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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
Three.js学习之网格
Aug 10 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
vue-cli4.5.x快速搭建项目
May 30 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查看session内容的函数
2008/08/27 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP单例模式详细介绍
2015/07/01 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python做接口测试的必要性
2019/11/20 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
师范毕业生求职自荐信
2013/09/25 职场文书
材料化学应届生求职信
2013/10/09 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
委托证明的格式
2014/01/10 职场文书
电视购物广告词
2014/03/19 职场文书
2014组织生活会方案
2014/05/19 职场文书
事业单位考察材料范文
2014/12/25 职场文书
管理失职检讨书范文
2015/05/05 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
七年级数学教学反思
2016/02/17 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
什么是SOLID
2022/03/24 Javascript
python 闭包函数详细介绍
2022/04/19 Python
Java完整实现记事本代码
2022/06/16 Java/Android
正则表达式基础与常用验证表达式
2022/06/16 Javascript