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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
javascript拖拽应用实例
Mar 25 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
Js面试算法详解
Apr 08 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
Vue实现图书管理小案例
Dec 03 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
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
php生成HTML文件的类方法
2019/10/11 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
小程序转发探索示例
2019/02/19 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
浅析vue中的nextTick
2020/12/28 Vue.js
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
Python制作简单的网页爬虫
2015/11/22 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python实现统计代码行的方法分析
2017/07/12 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python 实现端口扫描工具
2020/12/18 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
经典促销广告词大全
2014/03/19 职场文书
庆元旦活动总结
2014/07/09 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers