// 获取table数据
function getTableData(){
var data = [];
$.ajax({
type:'post',
url:'接口地址',
data:'参数',
dataType : "json",
async:true,
success : function(result) {
if(result.resultCode == 1000){
var data = result.resultSet;
tableDrawing(data) // 数据传到 table组件
pagesDrawing(result) // 数据传到 分页组件
}else{
console.log(result);
}
},error : function() {
console.log('访问失败');
}
});
}
// 绘制table
function tableDrawing(data){
layui.table.render({
elem: '#tableId',
cols: [
[
{type:'checkbox', fixed: 'left', width: 50},
{field:'rank',title:'序号',templet:'#rank',type:'numbers',width: 50,},
{field: 'team_name',title: '救援队名称'},
{field: 'team_status',title: '救援队状态'},
{field: 'team_num',title: '人员数量'},
{field: 'affiliated_unit',title: '隶属单位'},
{title: '操作',toolbar: '#barDemo', width: 180}
]
],
data: data, // 数据
limit: page_count, // 每页显示的条数
even: true,
});
}
// 绘制pages
function pagesDrawing(data) {
layui.laypage.render({
elem: 'pages', //注意,这里的 page 是 ID,不用加 # 号
count: data.resultnNoList, //数据总数,从服务端得到
theme: '#0078ff',
limit: page_count, // 每页条数
layout: [ 'prev', 'page', 'next', 'count'],
jump: function (obj, first) {
//console.log(obj)
//obj包含了当前分页的所有参数,比如:
//console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
//console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
numpage(obj.curr, obj.limit) // 分页点击传参
}
}
});
};
// 分页获取数据
function numpage(curr, page_count) { // 分页切换-数据请求
let page_b = (curr-1)*page_count;
var list_parameter = {
page_b:page_b,
page_count:page_count,
};
if(isSearch){ // 搜索列表
var key = 'team_name'
var value = keywords
list_parameter[key] = value;
}
$.ajax({
type:'post',
url:'接口地址',
data:list_parameter,
dataType : "json",
async:true,
success : function(result) {
console.log(result);
if(result.resultCode == 1000){
var data = result.resultSet;
tableDrawing(data) // 数据传到 table组件
}else{
console.log(result);
}
},
error : function() {
console.log('访问失败');
}
});
};
思路:初始化调用getTableData();绘制table以及分页;点击分页调用numpage()重新渲染table;