©2020-2024 ioDraw All rights reserved
Yes quite a lot About table Pagination Click event request , table.render Monitoring click events is not supported , So I put table.render and
laypage.render Together
（ I don't want to write pagination , But there is a lot of data in the background , To add Pagination , Forced and helpless , Thought of a way ）
Let's start with the picture above
code
.html
<div> <table class="layui-hide" id="test" lay-filter="demo"></table> <div id="
page"></div> </div>
.js
// Page first request default 1 page 10 strip function dataLists(pageNum, numPerPage) { $.post(Url +
'pipei_dj/pagelist', { pageNum: pageNum, // Page number numPerPage: numPerPage // Number of items per page }
, function (data) { let datalist = JSON.parse(data) dataList(datalist) // Data transfer
table assembly page(datalist) // Data transfer Paging component }) } dataLists(1, 10) function page(data) {
laypage.render({ elem: 'page', // be careful , there page yes ID, No need to add # Number count: data.totalCount
, // Total data , Get it from the server limit: data.numPerPage, // Number of items per page limits: [10, 20, 30, 40, 50],
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], jump: function (obj,
first) { //console.log(obj) //obj Contains all the parameters of the current page , such as ： //console.log(obj.curr);
// Get current page , In order to request the data of the corresponding page from the server . //console.log(obj.limit); // Get the number of items displayed per page // Not implemented for the first time if (!first
) { //do something numpage(obj.curr, obj.limit) // Click page by page to transfer parameters } } }); } // It's new A request
function numpage(pageNum, numPerPage) { $.post(Url + 'pipei_dj/pagelist', {
pageNum: pageNum, numPerPage: numPerPage }, function (data) { let datalist =
JSON.parse(data) dataList(datalist) // Pass on table assembly }) } // Table rendering function dataList(
data) { table.render({ elem: '#test', cols: [ [{ title: ' Serial number ', type: "numbers" },
{ field: 'id', title: 'id', hide: true }, { field: 'status', title: ' state ', hide:
true }, { field: 'danjia', title: ' Unit Price (￥)' }, { field: 'createtime', title:
' Creation time ' }, { field: 'status', title: ' state ', toolbar: '#barstate' }, { title: ' operation ',
toolbar: '#barDemo' }] ], data: data.dataList, // data limit: data.numPerPage,
// Number of displayed items //page: true, // Turn on paging }); }
What are the improvements , Welcome to leave a message
Technology