JavaWeb使用layui实现分页

JavaWeb使用layui实现分页

 

【1】视图层

 <link href="/Content/layui/css/layui.css" rel="stylesheet" />

 <div class="layui-card-body layui-table-body layui-table-main">

   <table  class="layui-table"  id="tabMusicInfor" lay-filter="tabMusicInfor"  ></table>

 </div>

<script type="text/html" id="barDemo">

  <a class="layui-btn layui-btn-xs" lay-event="play">播放</a>

  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

    <script src="/Content/jquery-3.3.1/jquery-3.2.1.min.js"></script>

    <script  src="/Content/layui/layui.js"></script>

<script src="/Content/layui/layui.all.js"></script>

<script type="text/javascript">

     var tabMusicInfor;//音乐信息表

     var i=0;  

     var layer, table;

     //1-页面数据加载

      $(function () {

         //【1】加载&初始化layui模块

         layui.use(["layer", "table"], function () {

           

             table = layui.table;//【2】获取layui的table模块的属性

             layer = layui.layer;//弹出层

             //加载table模块数据

             layuiTable();

         });

     });

     //【2】加载table模块数据

     function layuiTable(){

     tabMusicInfor = table.render({

            //【1】指定table的容器选择器或 DOM

             elem: "#tabMusicInfor",

             //【2】指定加载数据的路径

            // url: "${ctx}/web/MyMusicServlet?method=musicList",

             //【3】控制整个table元素的宽

             width : 1500,

            //【4】设置表头。值是一个二维数组

             cols: [[

                { type: "checkbox", fixed :"left",width:"10%"},

               { type: "numbers", title: "序号",width:"10%"},

               { field: "music", title: "音乐名" ,width:"30%"},