Layui实现带查询条件的分页


Posted in Javascript onJuly 27, 2019

本文实例为大家分享了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标签

Layui实现带查询条件的分页

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

Layui实现带查询条件的分页

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 #Javascript
layui表格数据重载
Jul 27 #Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 #Javascript
微信小程序 如何获取网络状态
Jul 26 #Javascript
layui使用数据表格实现购物车功能
Jul 26 #Javascript
layui实现数据表格点击搜索功能
Mar 26 #Javascript
vue eslint简要配置教程详解
Jul 26 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
python使用scrapy解析js示例
2014/01/23 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python要安装在哪个盘
2020/06/15 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
房地产还款计划书
2014/01/10 职场文书
人力资源作业细则
2014/03/03 职场文书
同志主要表现材料
2014/08/21 职场文书
安全施工责任书
2014/08/25 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
雨花台导游词
2015/02/06 职场文书
小浪底导游词
2015/02/12 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL