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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
javascript数据类型验证方法
Dec 31 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
详解vue.js的devtools安装
May 26 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 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
浅谈php扩展imagick
2014/06/02 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python调用支付宝支付接口流程
2019/08/15 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python下载库的步骤方法
2019/10/12 Python
python的链表基础知识点
2020/09/13 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
综合测评自我鉴定
2013/10/08 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
设备收款委托书范本
2014/10/02 职场文书
小型婚礼主持词
2015/06/30 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书