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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 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
mysql 搜索之简单应用
2007/04/27 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
javascript读取xml实现javascript分页
2013/12/13 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
JavaScript中Object基础内部方法图
2018/02/05 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python实现代理服务功能实例
2013/11/15 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
党课知识竞赛主持词
2014/04/01 职场文书
合作经营协议书范本
2014/09/16 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
开国大典观后感
2015/06/04 职场文书
创业计划书之农家乐
2019/10/09 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers