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 相关文章推荐
accesskey 提交
Jun 26 Javascript
载入进度条 效果
Jul 08 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
layui use 定义js外部引用函数的方法
Sep 26 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
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
使用正则替换变量
2007/05/05 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Keras loss函数剖析
2020/07/06 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
python IP地址转整数
2020/11/20 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
JAVA代码查错题
2014/10/10 面试题
医学院毕业生自荐信范文
2014/03/06 职场文书
寄语是什么意思
2014/04/10 职场文书
交通工程专业推荐信
2014/09/06 职场文书
办公室文员岗位职责
2015/02/04 职场文书
教师聘用意向书
2015/05/11 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
六一活动主持词
2015/06/30 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android