layui2.*資料表格分頁展示
阿新 • • 發佈:2018-11-29
直接列出js吧,說明資料表格雖然不算強大,但是簡單的展示渲染還是夠了我也滿足了,只是處理後臺寫罷了
html部分
<table id="demo" lay-filter="test"></table>
<div id="page"></div>
js部分
layui.use(['layer','laypage','laytpl','form','laydate','table'], function(){ var layer = layui.layer, form = layui.form, laypage = layui.laypage, laytpl = layui.laytpl, table = layui.table;; var searchdata={}; listpage(); function listpage() { searchdata['p']=1; currpage=0; //document.getElementById('listcontent').innerHTML=''; $.ajax({ type: "POST", url: "", data: searchdata, async: false, success: function (data) { laypage.render({ elem: 'page' , count: data['data']['countpage'] //資料總數,從服務端得到 ,limit:1 , jump: function (obj, first) { //obj包含了當前分頁的所有引數,比如: console.log(obj.curr); //得到當前頁,以便向服務端請求對應頁的資料。 console.log(obj.limit); //得到每頁顯示的條數 //首次不執行 if (!first) { searchdata['p']=obj.curr; console.log(searchdata); $.ajax({ type: "POST", url: "", data: searchdata, async: false, success: function (data) { table.reload('demo', {data: data['data']['listdata']}); } }); //do something } else { tabdata(data['data']['listdata']) } } }); } }); } function tabdata(data){ table.render({ elem: '#demo' ,cols: [[ //標題欄 {field: 'id', title: 'ID', width: 80, sort: true} ,{field: 'name', title: '姓名'} ,{field: 'address', title: '位置'} ,{field: 'mobile', title: '電話'} ,{field: 'services', title: '服務'} ,{field: 'servicesname', title: '服務人'} ,{field: 'servicesadress', title: '服務位置'} ,{field: 'technicalName', title: '服務人電話'} ,{field: 'price', title: '支付金額'} ,{field: 'statusname', title: '支付狀態'} ,{field: 'create_time', title: '訂單時間'} ]] ,data: data ,text: { none: '暫無相關資料' //預設:無資料。注:該屬性為 layui 2.2.5 開始新增 } //,skin: 'line' //表格風格 ,even: true //,page: true //是否顯示分頁 //,limits: [5, 7, 10] //,limit: 5 //每頁預設顯示的數量 }); } });