layui分页按钮失效解决办法

laoli815

已于 2023-07-31 14:38:54 修改

阅读量4.7k

点赞数 3

分类专栏： layui表格渲染文章标签： html jquery html5 css

于 2021-03-04 10:43:14 首次发布

本文链接：https://blog.csdn.net/laoli815/article/details/114362795

版权

layui表格渲染专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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,
},
],