layui 数据表格 点击分页按钮 监听事件的实例
作者:z先生1025 发布时间:2024-04-19 10:45:12
标签:layui,表格,分页,监听事件
找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起
(我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法)
先上图
代码
.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, // 开启分页
});
}
来源:https://blog.csdn.net/weixin_44326007/article/details/100163457
0
投稿
猜你喜欢
- 开发人员有时候使用类似下面SQL将字符串转换为日期时间类型,乍一看,这样的SQL的写法是没有什么问题的。但是这样的SQL其实有时候就是一个定
- 应用场景:实验中不断得到新数据,想将数据图形化,但随着时间推移,数据越来越多,此时需要我们等距选择数据列表中固定数量的数据,来进行图形化。注
- 昨天在书上看到SQL语句优化时,where条件顺序不同,性能不同,这个建议在Oracle11G版本还合适吗?方式1优于方式2? 方式1: s
- 上午在分析索引的使用情况,想看一下数据库什么时候启动的,确保统计的数据没有问题,可以使用下面三种方法查询:--2008及之后版本才有SELE
- AlexNet介绍AlexNet是2012年ISLVRC 2012(ImageNet Large Scale Visual Recognit
- 本文实例为大家分享了PyQt5单行文本框展示的具体代码,供大家参考,具体内容如下QLineEdit 是一个允许输入和编辑纯文本的单行控件。系
- 1.在html页面中导入js文件和css文件<link rel="stylesheet" href=".
- 因客户需求,要把数据库里的索引编号做成五位长度的,且能自动累加编号,我只会在SQL中使用Identity自动编号:Create Table
- J2ME是利用HttpConnection建立HTTP连接,然后获取数据,ASP也是利用HTTP协议,因而可以利用J2ME与ASP建立连接,
- 为什么很多站长开始做英文网站,我想主要是原因是良好的互联网环境让大家更容易赚到钱,中小站长做英文网站大致为两类,一是电子商务的外贸网站,二是
- 某大师曾说过,像了解自己的老婆 一样了解自己管理的数据库,个人认为包含了两个方面的了解:1,在稳定性层面来说,更多的是关注高可用、读写分离、
- 方法1: 用SET PASSWORD命令MySQL -u rootmysql> SET PASSWORD FOR 'root&
- 前言我第一次见到飞机大战是在我小学五年级下半学期的时候(2020年),这个游戏中可以说包含了几乎所有我目前可接触到的pygame知识。一、p
- 如下所示:#coding=utf-8#读取图片 返回图片某像素点的b,g,r值import cv2import numpy as npimg
- 首先看一下目标的验证形态是什么样子的是一种通过验证推理的验证方式,用来防人机破解的确是很有效果,但是,But,这里面已经会有一些破绽,比如:
- Python 是一种极其多样化和强大的编程语言!当需要解决一个问题时,它有着不同的方法。在本文中,将会展示列表解析式(List Compre
- 目录先说结论问题解决方案使用Promise封装回调函数总结先说结论业务流程: 从网络日志中检查到token过期,则跳转到登录页面
- 一般现今ASP木马常通过以下四点来操作服务器,所以我们只要将一下四处设置好就能从一 前使用IIS服务器的站长很多,特别是对于ASP网站来说,
- 目标:目标文件为一个float32型存储的二进制文件,按列优先方式存储。本文使用Python读取该二进制文件并使用matplotlib.py
- 1 俄罗斯方块游戏《俄罗斯方块》原本是前苏联科学家阿列克谢·帕基特诺夫所开发的教育用软件,之后开始提供授权给各个游戏公