layui 数据表格 点击分页按钮 监听事件的实例


Posted in Javascript onSeptember 02, 2019

找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起

(我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法)

先上图

layui 数据表格 点击分页按钮 监听事件的实例

代码

.html

<div>
  <table class="layui-hide" id="test" lay-filter="demo"></table>
  <div id="page"></div>
</div>

.js

//页面第一次请求 默认 1页 10条
function dataLists(pageNum, numPerPage) {
    $.post(Url + 'pipei_dj/pagelist', {
      pageNum: pageNum, // 页码数
      numPerPage: numPerPage // 每页条数
    }, function (data) {
      let datalist = JSON.parse(data)
      dataList(datalist) // 数据传到 table组件
      page(datalist)   // 数据传到 分页组件
    })
  }
  dataLists(1, 10)

function page(data) {
    laypage.render({
      elem: 'page', //注意,这里的 page 是 ID,不用加 # 号
      count: data.totalCount, //数据总数,从服务端得到
      limit: data.numPerPage, // 每页条数
      limits: [10, 20, 30, 40, 50],
      layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
      jump: function (obj, first) {
        //console.log(obj)
        //obj包含了当前分页的所有参数,比如:
        //console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
        //console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if (!first) {
          //do something
          numpage(obj.curr, obj.limit) // 分页点击传参 
        }
      }
    });
  }
	// 从新写了 一个请求
  function numpage(pageNum, numPerPage) {
    $.post(Url + 'pipei_dj/pagelist', {
      pageNum: pageNum,
      numPerPage: numPerPage
    }, function (data) {
      let datalist = JSON.parse(data)
      dataList(datalist) // 传到table组件
    })
  }

  // 表格渲染
  function dataList(data) {
    table.render({
      elem: '#test',
      cols: [
        [{
          title: '序号',
          type: "numbers"
        }, {
          field: 'id',
          title: 'id',
          hide: true
        }, {
          field: 'status',
          title: '状态',
          hide: true
        }, {
          field: 'danjia',
          title: '单价(¥)'
        }, {
          field: 'createtime',
          title: '创建时间'
        }, {
          field: 'status',
          title: '状态',
          toolbar: '#barstate'
        }, {
          title: '操作',
          toolbar: '#barDemo'
        }]
      ],
      data: data.dataList, // 数据
      limit: data.numPerPage, // 显示的条数
      //page: true, // 开启分页
    });
  }

以上这篇layui 数据表格 点击分页按钮 监听事件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 #Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 #Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 #Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 #Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 #Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 #Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 #Javascript
You might like
php新浪微博登录接口用法实例
2014/12/23 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
详解jQuery事件
2017/01/13 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
Java面向对象面试题
2016/12/26 面试题
银行求职推荐信范文
2013/11/30 职场文书
绩效工资实施方案
2014/03/15 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
美国留学经济担保书
2014/05/20 职场文书
见习报告格式范文
2014/11/08 职场文书
大学生求职自荐信
2015/03/24 职场文书
朋友聚会开场白
2015/06/01 职场文书
迎新生晚会主持词
2015/06/30 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
初中政治教学反思
2016/02/23 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
mysql主从复制的实现步骤
2021/10/24 MySQL
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS