layui数据表格(静态)重载+分页_layui table 静态数据分页-CSDN博客

本文链接：https://blog.csdn.net/qq_37164847/article/details/94395108

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>。。。</title>
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       <link rel="stylesheet" href="../layui/css/layui.css" />
   </head>
   <body>
       <div class="layui-fluid">
           <table class="layui-hide" id="mytable" lay-filter="mytable"></table>
           <div id="demo1"></div>
       </div>
       <script type="text/html" id="toolbarDemo">
           <div class="layui-row">
       <div class="layui-col-md2 layui-col-sm3 layui-col-xs6" style="text-align: left;padding-left: 10px;">
       <div class="layui-input-inline yutons-btn-margin-right">
       <span class="layui-btn yutons layui-btn-sm yutons-color-detail" lay-event="table_down">下载</span>
       </div>
       </div>
       </div>
       </script>
<script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="../layui/layui.js" ></script>
<script>
   layui.use(['layer','table','laypage'], function(){
               var   table = layui.table;
               var   layer = layui.layer;
               var laypage = layui.laypage;

               var userid=getUrlParam("id");
               var base_url="http://localhost:9010/";
               var get_url=base_url+"test";

               var page=1;
               var limit=100;
               var realData;

               network();
               //执行一个 table 实例
               table.render({
                   elem: '#mytable',
id: 'testReload',
                   title: '表',
                   toolbar: '#toolbarDemo', //操作1:启用自定义模板表格头部工具栏
                   defaultToolbar: [], //操作2:隐藏头部工具栏右侧的图标
                   cellMinWidth: 150,
                   height:500,
                   totalRow: true ,
                   page:false,
                   limit:limit,
                   cols: [
                       [ {field:'zkid', title:'ID',align: 'center'}
                   ,{field:'name', title:'名字',align: 'center'}
                       ]
                   ]
                   ,data:realData.dataList
               });
               //总页数大于页码总数
               laypage.render({
               elem: 'demo1'
               ,count: realData.allSize //数据总数
               ,limit:limit //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
               ,layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
               ,jump: function(obj,first){
                   console.log("得到当前页="+obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                   console.log("得到每页显示的条数="+obj.limit); //得到每页显示的条数
                   page=obj.curr;
                       //首次不执行
                   if(!first){
                       network();
                       //执行重载
                           table.reload("testReload",{data:realData.dataList});
                           console.log("表格重载");
                   }
               }
               });
               function network(){
               jQuery.support.cors = true;
                   $.ajax({
                       type:"get",
                       url:get_url,
                       data:{"id":id,"page":page,"limit":100,"time":new Date()},
                   async:false,
                   cache:false,
                   dataType: "json",
                   crossDomain: true == !(document.all),
                       success: function(res) {
                       console.log("请求信息=="+JSON.stringify(res));
                   if (res.code==0) {
                      realData=res.data;
                   } else{
                      layer.msg(res.msg);
                   }
                   },
                   error:function(res) {
                   layer.msg("联网失败，请检查网络");
                   }
                   });
               }
           //layui结束
   })
   //获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
</script>
   </body>
</html>