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 相关文章推荐
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
JSONP原理及简单实现
Jun 08 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
如何更好的编写js async函数
May 13 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
使用python开发vim插件及心得分享
2014/11/04 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Python与C/C++的相互调用案例
2021/03/04 Python
德国网上药房:Apotal
2017/04/04 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
结婚周年感言
2014/02/24 职场文书
个人担保书范文
2014/05/20 职场文书
个人委托书
2014/07/31 职场文书
管理人员岗位职责
2015/02/14 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
python数字图像处理:图像简单滤波
2022/06/28 Python