jQuery中layer分页器的使用


Posted in Javascript onMarch 13, 2017

layui给我们提供了分页器的组件,进行简单的配置就能做出分页的效果

上代码:

// 点击查询按钮 开始显示表格内容
// 如果查询内容不存在 则显示为空
$('#searchBtn').click(function(){
  var html = '';
  $.ajax({
    type:"GET",
    url:"data/tsResult.json",
    success:function(TS){
      // 拿到投诉案件数据
      // 分页器
      layui.use(['laypage','layer'],function(){
        var laypage = layui.laypage,
        layer = layui.layer;

        var num = 7;//每一页出现的数据量
        // 模拟渲染
        var render = function(curr){//当前页
          var html = '',
            last = curr*num-1;//当前页的最后一行数据的下标
            last = last >= TS.length?(TS.length-1):last;
            for(var i=(curr*num-num); i<=last; i++){
              // 从未显示的第一行开始
              html += '<tr>'+
                    '<td width="4%">'+TS[i].id+'</td>'+
                    '<td width="8%">'+TS[i].COMPNAME+'</td>'+
                    '<td width="12%">'+TS[i].COMTELPHONE+'</td>'+
                    '<td width="16%">'+TS[i].COMPCARD+'</td>'+
                    '<td width="8%">'+TS[i].DJRQ_S+'</td>'+
                    '<td width="8%">'+TS[i].COMTYPE+'</td>'+
                    '<td width="28%">'+TS[i].COMCONTEXT+'</td>'+
                    '<td width="8%">'+TS[i].STATE+'</td>'+
                    '<td width="8%" style="text-align:center;"><button class="layui-btn doBtn">'+TS[i].btn+'</button></td>'+
                  '</tr>';
            }
            return html;
        };

        laypage({
          cont:'demo4',
          pages:Math.ceil(TS.length/num),
          first:false,
          last: false,
          jump:function(obj){
            document.getElementById('TS-list').innerHTML = render(obj.curr);
          }
        });
      });
    }
  });
});

稍微解释一下这边的代码:

1、点击按钮#searchBtn 发起ajax请求 获得需要分页的数据。

2、success成功后回调执行分页+拼接。

3、必须代码

layui.use(['laypage','layer'],function(){
        var laypage = layui.laypage,
        layer = layui.layer;
        }

4、定义一页需要显示的条数num,定义render方法,进行模拟渲染。

5、jump实现跳转

上面的代码是直接可以用的,只需要改一下对象

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

Javascript 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
js实现表格字段排序
Feb 19 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 #Javascript
Node.js调试技术总结分享
Mar 12 #Javascript
JavaScript中双符号的运算详解
Mar 12 #Javascript
利用Node.js对文件进行重命名
Mar 12 #Javascript
纯js的右下角弹窗实例
Mar 12 #Javascript
彻底学会Angular.js中的transclusion
Mar 12 #Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 #Javascript
You might like
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
详解Python中for循环的使用方法
2015/05/14 Python
Python 读写文件的操作代码
2018/09/20 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python与C/C++的相互调用案例
2021/03/04 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
五好党支部事迹材料
2014/02/06 职场文书
公司节能减排倡议书
2014/05/14 职场文书
党校学习党性分析材料
2014/12/19 职场文书
毕业生个人总结
2015/02/28 职场文书
财政局长个人总结
2015/03/04 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
2015年电教工作总结
2015/05/26 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers