LayUI多tab欄無重新整理分頁
阿新 • • 發佈：2021-09-16
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layui非同步分頁</title> <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> </head> <body> <!--頭部按鈕 start--> <div style="clear: both;margin: 10px 10px 0 0;"> <div class="sx" style="float:left;">列表</div> </div> <!--頭部按鈕 end--> <!--分割線 start--> <div style="margin-top:10px;"> <hr class="layui-border-green hs"> </div> <!--分割線 end--> <!--搜尋框 start--> <div class="demoTable"> <!--表單 start--> <form class="layui-form" action="" style="border: 1px solid #D8D8D8; padding: 10px 0 0 10px;" lay-filter="lift_point_add"> <div class="layui-form-item"> <div class="layui-inline"> <div class="layui-inline" style="width: 25%;"> <input type="text" name="name" id="searchName" placeholder="請輸入搜尋名稱" class="layui-input" size="40"> </div> <div class="layui-inline" style="width: 25%;"> <select name="status" id="status"> <option value="">狀態</option> <option value="1">啟用</option> <option value="2">禁用</option> </select> </div> <div class="layui-inline"> <input type="text" class="layui-input" id="time" name="time" placeholder="選擇下單日期" size="30"> </div> </div> <div class="layui-inline" style="margin-left: -20px;"> <button class="layui-btn layui-btn-normal" id="getLiftPointList" lay-filter="search_btn" lay-submit>立即提交</button> <button type="reset" class="layui-btn layui-btn-primary" style="width: 100px;">重置</button> </div> </div> </form> <!--表單 end--> </div> <!--搜尋框 end--> <!--表格 start--> <div class="layui-tab layui-tab-brief" lay-filter="doTabBrief"> <div> <ul class="layui-tab-title layui-inline"> <li class="layui-this">全部</li> <li>欄目1</li> <li>欄目2</li> <li>欄目3</li> </ul> </div> <div class="layui-tab-content" > <div class="layui-tab-item layui-show layui-fluid"> <table id="tab0" class="layui-hide" lay-filter="tab_0"></table> </div> <div class="layui-tab-item"> <table id="tab1" class="layui-hide" lay-filter="tab_1"></table> </div> <div class="layui-tab-item"> <table id="tab2" class="layui-hide" lay-filter="tab_2"></table> </div> <div class="layui-tab-item"> <table id="tab3" class="layui-hide" lay-filter="tab_3"></table> </div> <div id="paginate" style="text-align:right;"></div> </div> </div> <!--表格 end--> <input type="hidden" id="pageSize" value="10"> <input type="hidden" id="totalNum" value="0"> <input type="hidden" id="curPage" value="1"> </body> </html> <script> layui.use(['table','upload', 'layer','form','laypage'], function(){ var table = layui.table; var $ = layui.jquery ,element = layui.element ,layer = layui.layer ,laypage = layui.laypage ,laydate = layui.laydate ,form = layui.form; var listData;//定義全域性變數，用來儲存服務端返回的列表資料，此處的值是測試資料，實際開發中請將該值刪除 var curTabIndex = 0;//定義當前tab，預設第一個 //時間外掛 laydate.render({ elem: '#time' }); //監聽tab欄目切換 element.on('tab(doTabBrief)', function(data){ curTabIndex = data.index; init(getParams()); }); //第一步：獲取引數 function getParams() { var params = {};//此處一定要用大括號，否則ajax請求資料時，可能會丟失引數 params['name'] = $("#searchName").val(); params['status'] = $("#status option:selected").val(); params['time'] = $("#time").val(); params['page'] = $("#curPage").val(); params['page_size'] = $("#pageSize").val(); var paramsStr = JSON.stringify(params); return eval('(' + paramsStr + ')'); } //第二步 定義列表查詢函式 function send(postData){ $.ajax({ type: "POST",//請求的方式 url: "URL",//填寫自己的路由地址 data: postData, dataType: "json", async:false, success: function (res) { if(res.status == 1) { listData = res.data.list;//為全域性變數賦值 $("#totalNum").val(res.data.paginate.totoal_count);//總條數 if (data.length == 0) { layer.msg('暫無資料');return false; } laypage.render({ elem: 'paginate' ,count: $("#totalNum").val() ,layout: ['count', 'limit', 'prev', 'page', 'next'] ,theme: '#1E9FFF' ,jump: function(obj){ $("#pageSize").val(obj.limit); $("#curPage").val(obj.curr); } }); }else { layer.msg(res.msg); } }, error:function(err){ //失敗 layer.msg("資料不存在"); } }) } //第三步定義table體 var infoOptions = { cellMinWidth: 80//全域性定義常規單元格的最小寬度，layui 2.2.1 新增 ,cols: [[ { field: 'id', title: 'ID', width: 80, sort: true} ,{field: 'username', title: '使用者名稱', width: 120} ,{field: 'email', title: '郵箱', minWidth: 150} ,{field: 'sign', title: '簽名', minWidth: 160} ,{field: 'sex', title: '性別', width: 80, templet: function(res){ console.log(res); if (res.sex == '男') { return '<span style="color:green;">'+res.sex+'</span>'; }else if(res.sex == '女') { return '<span style="color:pink;">'+res.sex+'</span>'; } }} ,{field: 'city', title: '城市', width: 100} ,{field: 'experience', title: '積分', width: 80, sort: true} ]] ,skin: 'line' //表格風格 ,even: true }; //第四步：定義初始化表格函式 function init(postData) { send(postData); // 完成表格資料 var elem; switch (curTabIndex) { case 0: elem = "#tab0"; //全部 break; case 1: elem = "#tab1"; //欄目1 break; case 2: elem = "#tab2"; //欄目2 break; case 3: elem = "#tab3"; //欄目3 break; } console.log(elem); infoOptions.elem = elem; $.extend(infoOptions, {data: listData}); table.render(infoOptions); listData=null; } //第五步：提交搜尋表單時觸發 form.on('submit(search_btn)', function(){ init(getParams()); return false; }); //第五步：分頁觸發，首次進入列表頁面同樣會觸發 laypage.render({ elem: 'paginate' ,count: $("#totalNum").val() ,layout: ['count', 'limit', 'prev', 'page', 'next'] ,theme: '#1E9FFF' ,jump: function(obj){ var curPage = obj.curr; var limit = obj.limit; $("#pageSize").val(limit); $("#curPage").val(curPage); init(getParams()); } }); }); </script>
執行效果如下：