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 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 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+DBM的同学录程序(3)
2006/10/09 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
vue实例的选项总结
2020/06/09 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
使用django实现一个代码发布系统
2019/07/18 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
ant design vue的form表单取值方法
2022/06/01 Vue.js