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 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
vue全屏事件开发详解
Jun 17 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
js 幻灯片的实现
2011/12/06 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
vue多次循环操作示例
2019/02/08 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python中的global关键字的使用方法
2019/08/20 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
浙江文明网签名寄语
2014/01/18 职场文书
升国旗仪式主持词
2014/03/19 职场文书
法人授权委托书格式
2014/04/08 职场文书
招商引资工作汇报
2014/10/28 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL