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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
Jquery 基础学习笔记
May 29 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 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图片上传类 附调用方法
2016/05/15 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python实现FTP服务器服务的方法
2017/04/11 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
师范生求职自荐信
2014/06/14 职场文书
班主任先进事迹材料
2014/12/17 职场文书
办公室禁烟通知
2015/04/23 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
交通事故协议书范本
2016/03/19 职场文书