LayPage分页插件使用

最新推荐文章于 2022-08-30 09:36:12 发布

转载最新推荐文章于 2022-08-30 09:36:12 发布 · 3.2k 阅读

编程语言专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了一个使用layui分页插件的实战案例，展示了如何在前端页面中整合layui分页功能，实现数据的分页展示。通过具体的代码示例，讲解了初始化layui分页、动态填充表格数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端页面

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html>
  <head>
  <title></title> 
  <link rel="stylesheet" type="text/css" href="${BASE_PATH}/Plugins/layui/css/layui.css">
  <link rel="stylesheet" href="${BASE_PATH}/Plugins/bootstrap/css/bootstrap.min.css" type="text/css"></link>
  <script type="text/javascript" src="${BASE_PATH}/Plugins/jquery/jquery-1.12.4.min.js"></script>
  <script type="text/javascript" src="${BASE_PATH}/Plugins/layui/js/layui.all.js"></script>
  <script type="text/javascript" src="${BASE_PATH}/Themes/Default/js/test.js"></script>
 <style type="text/css">
     .table th, .table td{
         text-align : center;
         vertical-align : middle!improtant;
     }
     .container {
         width : 60%;
     }
 </style>
 </head>
 <body>
     <div class="container content">
         <div class="row">
             <div>
                 <div class="panel panel-green margin-bottom-40">
                     <div class="panel-heading">
                         <h1 class="panel-title">layPage测试</h1>
                     </div>
                     <div class="panel-body">
                         <div>
                             <div>
                                 <table class="table table-bordered table-striped">
                                     <thead>
                                         <tr>
                                             <th>序号</th>
                                             <th>姓名</th>
                                             <th>年龄</th>
                                             <th>操作</th>
                                         </tr>
                                     </thead>
                                     <!-- 表格数据加载 -->
                                     <tbody id="tab_list">
                                     </tbody>
                                 </table>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <!-- 存放分页的容器 -->
         <div id="layui"></div>
     </div>
 </body>
 </html>

js 页面

$(function () {
     initLayPage();
 });
 
 /**
  * 初始化layui分页
  */
 
 function initLayPage(pageConf) {
    if(!pageConf){
        pageConf ={};
        pageConf.pageSize = 10;
        pageConf.currentPage = 1;         
    }
    $.post("/test/query", pageConf, function (data) {
        layui.use(['laypage', 'layer'], function () {
            var page = layui.laypage;  
            page.render({
                elem: 'layui', 
                count: data.total,
                curr: pageConf.currentPage,
                limit: pageConf.pageSize,
                first:"首页",
                last:"尾页",
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function (obj, first) {
                    if (!first) {
                        pageConf.currentPage = obj.curr;
                        pageConf.pageSize = obj.limit;
                        initLayPage(pageConf);
                    }
                }
            });
            fillTable(data.list,(pageConf.currentPage - 1) * pageConf.pageSize); //页面填充
        })
    });
}
//填充表格数据
function fillTable(data,num) {
    var info = '';
    $.each(data, function (index, obj) {
        // id 很多时候并不是连续的，如果为了显示比较连续的记录数，可以这样根据当前页和每页条数动态的计算记录序号
        index = index +num+1;
        info += '<tr><td>' + index + '</td><td>' + obj.name + '</td><td>' + obj.age + '</td>' +
            '<td style="text-align: center;"><button name="btnModify" type="button" class="btn btn-success btn-xs" >修改</button>' +
            '<button name="btnDelete" type="button" class="btn btn-danger btn-xs" οnclick="remove(' + obj.id + ')">删除</button></td></tr>';
    });
    $("#tab_list").html(info);
}