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 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
javascript折半查找详解
Jan 26 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
js 调用百度分享功能
Feb 27 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
如何理解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
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
Fetch超时设置与终止请求详解
2019/05/18 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Python3标准库总结
2019/02/19 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
村优秀党员事迹材料
2014/01/15 职场文书
答谢会策划方案
2014/05/12 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
教师党员个人自我评价
2015/03/04 职场文书
家装电话营销开场白
2015/05/29 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python