layui分页按钮失效解决办法
问题:分页条数没问题,但是无论点击分页按钮第一页还是第二页或者第N页,都是一次性把所有结果集返回,没有实现我们的效果
想要的结果是点击下方的分页按钮,表格能显示成上面的内容,按照页面渲染成分页的行数
如何让分页部分居中
<style type="text/css">
.layui-table-page {
text-align: center;
}
</style>
<script>
layui.use('table', function(){
var table = layui.table;
//方法级渲染
table.render({
elem: '#instance_info'
, url: '/sql/mdisplay'
,method:'POST'
, cols: [[
{checkbox: true, fixed: true}
, {field: 'id', title: 'ID', width: 80, fixed: true}
, {field: 'ip', title: '服务器IP地址', width: 200}
, {field: 'port', title: '端口号', width: 80}
, {field: 'instance_name', title: '实例名称', width: 200}
, {field: 'instance_status', title: '主从标识',width: 100}
, {field: 'cluster_status', title: '集群标识', width: 150}
, {field: 'create_time', title: '创建时间', width: 200}
, {field: 'apply_user', title: '申请人', width: 80}
, {field: 'create_user', title: '创建人', width: 80}
]]
, id: 'testReload'
, page: true
,limits: [3,5,10]
,limit: 10
, height: 500
,parseData: function(res){
var result;
console.log(this);
console.log(JSON.stringify(res));
if(this.page.curr){
result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
}
else{
result=res.data.slice(0,this.limit);
}
return {
"code": res.code,
"msg": res.msg,
"count": res.count,
"data": result
};
}
});
var $ = layui.$, active = {
reload: function(){
var input1 = $("input[name='pk']");
var input2 = $("input[name='ip']");
var input3 = $("input[name='insname']");
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
key: {
id: input1.val(),
ip: input2.val(),
insname: input3.val()
}
}
}, 'data');
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
附上json字符串
{
code: 0,
msg: "",
count: 34,
data: [
{
id: 1,
ip: "192.168.56.101",
port: "3307",
instance_name: "健康大生活集群-1",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-03 02:29:23",
apply_user: null,
create_user: null,
},
{
id: 2,
ip: "192.168.56.102",
port: "3307",
instance_name: "健康大生活集群-1",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-03 02:29:23",
apply_user: null,
create_user: null,
},
{
id: 3,
ip: "192.168.56.103",
port: "3307",
instance_name: "健康大生活集群-1",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-03 02:29:23",
apply_user: null,
create_user: null,
},
{
id: 4,
ip: "192.168.56.103",
port: "3308",
instance_name: "健康大生活-1",
instance_status: "主",
cluster_status: "单机",
create_time: "2021-03-03 02:30:50",
apply_user: null,
create_user: null,
},
{
id: 5,
ip: "192.168.56.102",
port: "3309",
instance_name: "亢龙有悔集群-1",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-03 09:19:59",
apply_user: null,
create_user: null,
},
{
id: 6,
ip: "192.168.56.101",
port: "3309",
instance_name: "亢龙有悔集群-1",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-03 09:19:59",
apply_user: null,
create_user: null,
},
{
id: 7,
ip: "192.168.56.103",
port: "3309",
instance_name: "亢龙有悔集群-1",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-03 09:19:59",
apply_user: null,
create_user: null,
},
{
id: 8,
ip: "192.168.56.101",
port: "3310",
instance_name: "亢龙有悔集群-2",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-03 09:22:35",
apply_user: null,
create_user: null,
},
{
id: 9,
ip: "192.168.56.102",
port: "3310",
instance_name: "亢龙有悔集群-2",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-03 09:22:35",
apply_user: null,
create_user: null,
},
{
id: 10,
ip: "192.168.56.103",
port: "3310",
instance_name: "亢龙有悔集群-2",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-03 09:22:35",
apply_user: null,
create_user: null,
},
{
id: 11,
ip: "192.168.56.103",
port: "3311",
instance_name: "亢龙有悔集群-3",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-03 17:30:10",
apply_user: null,
create_user: null,
},
{
id: 12,
ip: "192.168.56.102",
port: "3311",
instance_name: "亢龙有悔集群-3",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-03 17:30:10",
apply_user: null,
create_user: null,
},
{
id: 13,
ip: "192.168.56.101",
port: "3311",
instance_name: "亢龙有悔集群-3",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-03 17:30:10",
apply_user: null,
create_user: null,
},
{
id: 14,
ip: "192.168.56.101",
port: "3312",
instance_name: "天龙八部集群-1",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-04 10:08:08",
apply_user: null,
create_user: null,
},
{
id: 15,
ip: "192.168.56.102",
port: "3312",
instance_name: "天龙八部集群-1",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:08:08",
apply_user: null,
create_user: null,
},
{
id: 16,
ip: "192.168.56.103",
port: "3312",
instance_name: "天龙八部集群-1",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:08:08",
apply_user: null,
create_user: null,
},
{
id: 17,
ip: "192.168.56.101",
port: "3313",
instance_name: "天龙八部集群-2",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-04 10:10:16",
apply_user: null,
create_user: null,
},
{
id: 18,
ip: "192.168.56.102",
port: "3313",
instance_name: "天龙八部集群-2",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:10:16",
apply_user: null,
create_user: null,
},
{
id: 19,
ip: "192.168.56.103",
port: "3313",
instance_name: "天龙八部集群-2",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:10:16",
apply_user: null,
create_user: null,
},
{
id: 20,
ip: "192.168.56.101",
port: "3314",
instance_name: "天龙八部集群-3",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-04 10:12:19",
apply_user: null,
create_user: null,
},
{
id: 21,
ip: "192.168.56.102",
port: "3314",
instance_name: "天龙八部集群-3",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:12:19",
apply_user: null,
create_user: null,
},
{
id: 22,
ip: "192.168.56.103",
port: "3314",
instance_name: "天龙八部集群-3",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:12:19",
apply_user: null,
create_user: null,
},
{
id: 23,
ip: "192.168.56.101",
port: "3315",
instance_name: "笑傲江旭集群-1",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-04 10:16:30",
apply_user: null,
create_user: null,
},
{
id: 24,
ip: "192.168.56.102",
port: "3315",
instance_name: "笑傲江旭集群-1",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:16:30",
apply_user: null,
create_user: null,
},
{
id: 25,
ip: "192.168.56.103",
port: "3315",
instance_name: "笑傲江旭集群-1",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:16:30",
apply_user: null,
create_user: null,
},
{
id: 26,
ip: "192.168.56.101",
port: "3316",
instance_name: "笑傲江旭集群-2",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-04 10:19:32",
apply_user: null,
create_user: null,
},
{
id: 27,
ip: "192.168.56.102",
port: "3316",
instance_name: "笑傲江旭集群-2",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:19:32",
apply_user: null,
create_user: null,
},
{
id: 28,
ip: "192.168.56.103",
port: "3316",
instance_name: "笑傲江旭集群-2",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:19:32",
apply_user: null,
create_user: null,
},
{
id: 29,
ip: "192.168.56.101",
port: "3317",
instance_name: "笑傲江旭集群-4",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-04 10:21:39",
apply_user: null,
create_user: null,
},
{
id: 30,
ip: "192.168.56.102",
port: "3317",
instance_name: "笑傲江旭集群-4",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:21:39",
apply_user: null,
create_user: null,
},
{
id: 31,
ip: "192.168.56.103",
port: "3317",
instance_name: "笑傲江旭集群-4",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:21:39",
apply_user: null,
create_user: null,
},
{
id: 32,
ip: "192.168.56.101",
port: "3318",
instance_name: "笑傲江旭集群-5",
instance_status: "主",
cluster_status: "集群",
create_time: "2021-03-04 10:23:06",
apply_user: null,
create_user: null,
},
{
id: 33,
ip: "192.168.56.102",
port: "3318",
instance_name: "笑傲江旭集群-5",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:23:06",
apply_user: null,
create_user: null,
},
{
id: 34,
ip: "192.168.56.103",
port: "3318",
instance_name: "笑傲江旭集群-5",
instance_status: "从",
cluster_status: "集群",
create_time: "2021-03-04 10:23:06",
apply_user: null,
create_user: null,
},
],
- 技术无止境