Layui实现带查询条件的分页

本文实例为大家分享了Layui实现带查询条件的分页，供大家参考，具体内容如下

这个前端UI框架是真的让人又爱又恨呐！想了很久的方案才行的通

这是全部源码：

{include file=\"../../../application/admin/view/public/head\" /}
 
<div class=\"page-container p10\">
 
 <form class=\"layui-form \" method=\"post\" id=\"pageListForm\">
 <div class=\"layui-input-inline w150\">
  <div class=\"layui-btn-group\">
  <a data-full=\"1\" data-href=\"{:url(\'addBanner\')}\" class=\"layui-btn layui-btn-primary j-iframe\"><i class=\"layui-icon\"></i>添加广告</a>
  </div>
 
 </div>
 
 <div class=\"layui-input-inline w150\">
  <select name=\"vt_id\" class=\"vt_id\">
  <option value=\"\">视频类型</option>
  {foreach name=\'subject\' item=\'v\'}
  <option value=\"{$v[\'vt_id\']}\" >{$v[\'vt_name\']}</option>
  {/foreach}
  </select>
 </div>
 
 
 <div class=\"layui-input-inline w150\">
  <select name=\"b_targetType\" class=\"b_targetType\">
  <option value=\"\">是否跳出</option>
  <option value=\"1\">是</option>
  <option value=\"2\">否</option>
  </select>
 </div>
 <div class=\"layui-input-inline\">
  <input type=\"text\" autocomplete=\"off\" placeholder=\"请输入搜索条件\" id=\"content\" class=\"layui-input\" name=\"b_title\" value=\"\">
 </div>
 
 <a class=\"layui-btn mgl-20 .j-kaka\" id=\"query\"> 查询</a>
 
 
 <table class=\"layui-table\" lay-size=\"sm\">
 <thead>
  <tr >
  <th width=\"25\">ID</th>
  <th width=\"50\">分类</th>
  <th width=\"100\">对应视频</th>
  <th width=\"40\">缩略图</th>
  <th width=\"80\">点击url</th>
  <th width=\"30\">排序</th>
  <th width=\"100\">展示类型</th>
  <th width=\"100\">是否跳出2是1否</th>
  <th width=\"100\">标题</th>
  <th width=\"100\">内容页模版</th>
  <th width=\"100\">链接列表</th>
  <th width=\"130\">操作</th>
  </tr>
 </thead>
  <tbody id=\"tab_list\">
 
  </tbody>
 </table>
 </form>
</div>
 
<div id=\"pages\" class=\"center\"></div>
 
{include file=\"../../../application/admin/view/public/foot\" /}
 
<script type=\"text/javascript\">
 
 window.οnlοad= function () {
 loadData() //请求数据
 getPage() //分页操作
 }
 var page=1; //设置首页页码
 var limit=3; //设置一页显示的条数
 var total; //总条数
 function loadData(){
 $.ajax({
  type:\"post\",
  url:\"{url(Banner/index)}\",//对应controller的URL
  async:false,
  dataType: \'json\',
  data:{
  \"page_index\":page,
  \"page_size\":limit,
  },
  success:function(ret){
  total=ret.total_count;
 
  var data1=ret.data;
  var html= \'\';
  for(var i=0;i<data1.length;i++){
   html+=\'<tr>\';
   html+=\'<td>\'+ data1[i].b_id +\'</td>\';
   html+=\'<td>\'+ data1[i].b_id +\'</td>\';
   html+=\'<td>\'+ data1[i][\'banner_vs_video_name\'][\'vi_title\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_thumbnailUrl\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_linkUrl\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_sort\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_showType\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_targetType\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_title\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_slaveTitle\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_linkUrlList\']+\'</td>\';
   html+=\'<td>\';
   html+=\'<a class=\"layui-badge-rim j-iframe\" data-full=\"1\" data-href=\'+ROOT_PATH+\'/index.php/admin/banner/editBanner?b_id=\'+data1[i][\'b_id\']+\' href=\"javascript:;\" title=\"编辑\">编辑</a>\';
   html+=\'<a class=\"layui-badge-rim j-tr-del del\" data-href=\'+ROOT_PATH+\'/index.php/admin/banner/delBanner?b_id=\'+data1[i][\'b_id\']+\' href=\"javascript:;\" title=\"删除\">删除</a>\';
   html+=\'</td>\';
 
   html+=\'</tr>\';
  }
  $(\"#tab_list\").html(html);
  }
 });
 }
 
 
 // 查询
 $(\'#query\').click(function(){
 var content = $(\'#content\').val();
 var vt_id = $(\'.vt_id\').val();
 var b_targetType = $(\'.b_targetType\').val();
 
 if(!content && !vt_id && !b_targetType){
  layer.msg(\'查询条件不能为空\');
  return false
 }
 
 $.ajax({
  type:\"post\",
  url:\"{url(Banner/index)}\",//对应controller的URL
  async:false,
  dataType: \'json\',
  data:{
  \"page_index\":page,
  \"page_size\":limit,
  \"b_title\":content,
  \"vt_id\":vt_id,
  \"b_targetType\":b_targetType
  },
  success:function(ret){
  total=ret.total_count;
  getPage();
 
  var data1=ret.data;
  var html= \'\';
  for(var i=0;i<data1.length;i++){
   html+=\'<tr>\';
   html+=\'<td>\'+ data1[i].b_id +\'</td>\';
   html+=\'<td>\'+ data1[i].b_id +\'</td>\';
   html+=\'<td>\'+ data1[i][\'banner_vs_video_name\'][\'vi_title\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_thumbnailUrl\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_linkUrl\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_sort\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_showType\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_targetType\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_title\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_slaveTitle\'] +\'</td>\';
   html+=\'<td>\'+ data1[i][\'b_linkUrlList\']+\'</td>\';
   html+=\'<td>\';
   html+=\'<a class=\"layui-badge-rim j-iframe\" data-full=\"1\" data-href=\'+ROOT_PATH+\'/index.php/admin/banner/editBanner?b_id=\'+data1[i][\'b_id\']+\' href=\"javascript:;\" title=\"编辑\">编辑</a>\';
   html+=\'<a class=\"layui-badge-rim j-tr-del del\" data-href=\'+ROOT_PATH+\'/index.php/admin/banner/delBanner?b_id=\'+data1[i][\'b_id\']+\' href=\"javascript:;\" title=\"删除\">删除</a>\';
   html+=\'</td>\';
 
   html+=\'</tr>\';
  }
  $(\"#tab_list\").html(html);
  }
 });
 });
 
 
 function getPage(){
 layui.use(\'laypage\', function(){
  var laypage = layui.laypage
  , layer = layui.layer;
  laypage.render({
  elem: \'pages\'
  ,count: total //数据总数，从服务端得到
  ,limit:limit
  ,jump: function(obj, first){
   page=obj.curr; //改变当前页码
   limit=obj.limit;
   if(!first){
   loadData()
   }
  }
  });
 });
 }
 
 
 
 
 // 点击删除
 $(document).on(\'click\',\'.del\',function(){
 var that = $(this),
  href = !that.attr(\'data-href\') ? that.attr(\'href\') : that.attr(\'data-href\');
 layer.confirm(\'删除之后无法恢复，您确定要删除吗？\', {title:false, closeBtn:0}, function(index){
  if (!href) {
  layer.msg(\'请设置data-href参数\');
  return false;
  }
  $.get(href, function(res){
  layer.msg(res.msg);
  if (res.code == 1) {
   that.parents(\'tr\').remove();
  }
  });
  layer.close(index);
 });
 return false;
 })
 
 
 /**
 * 更改数据顺序
 */
 layui.use(\'laypage\', function(){
 var laypage = layui.laypage
  , layer = layui.layer,
  $ = layui.$;
 
 $(document).on(\'blur\',\'.sort\',function(){
  var that = $(this),
  b_sort = that.val();
  var b_id = that.attr(\'b_id\');
 
  $.post(\"{:url(\'banner/editSort\')}\",{b_sort:b_sort,b_id:b_id},function(res){
  if(res == 1){
   loadData()
  }
  });
 })
 });
 
 
 
 
</script>
</body>
</html> 

这个业务只有一个问题那就是button，我们需要把button的标签换了，换成a标签

还有一个点就是在点击查询后，获取的数据是根据条件查的，在把分页初始化一次即可

其余的操作跟做跟做分页是一样的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。