關於後臺管理前端列表外掛的選擇和使用。
阿新 • • 發佈:2018-12-20
做後臺管理系統一般不怎麼講究樣式。都是以功能為主。而最多的應該是資料列表了。如果純粹自己寫,需要考慮因素太多,例如分頁,搜尋,排序,功能擴充套件,樣式統一等,還容易出現問題,不符合快速開發的理念。採用Jquery的外掛,使用AJAX的互動方式。進行列表頁面的快速渲染。而關於選擇又有多樣化,而經過考慮我是選擇datatables。
以下是實際效果圖
下載我們需要的外掛。官網還有文件,雖然有些地方是坑點,但大致上還是沒錯的。
解壓縮包後放入專案。此次主要引用檔案為。
jquery.js
jquery.dataTables.min.js
引入後。開始後端的程式碼
我這裡使用的是PHP
//多維陣列一般是資料查詢後生成的。大致上是總條數/分頁數=單頁資料 $info=[ 0=> ['id'=>1,'name'=>'test1', ], ['id'=>2,'name'=>'test2', ] ]; //總條數,資料查詢後統計一下總共多少條。 $count=2; $info=array('data'=>$info,'recordsTotal'=>$count,'recordsFiltered'=>$count); echo json_encode($info);
最終返回的是JSON格式。例如下圖
而前端要做的是。
首先是HTML的,需要一個存放表格。
<table class="table table-border table-bordered table-bg table-hover"> <thead> <tr> <th scope="col" colspan="14">產品列表</th> </tr> <tr class="text-c"> <th >序號</th> <th>名稱</th> </tr> </thead> <tbody> </tbody> </table>
然後是JS的程式碼。
window.onload = function () {
$('.table').dataTable({
lengthChange: false,
searching: false,//本地搜尋
serverSide: true,//伺服器模式
ordering: false,//是否排序
stateSave: true,//儲存查詢狀態
pageLength: "10",//預設10條
order: [[11,'desc']],//排序設定
aoColumnDefs: [
{"orderable": false, "aTargets": [0,1]}// 不參與排序的列
],
"ajax": {
"url": "請求地址",
"contentType": "application/json",
"data": function (d) {
//提交額外的ajax 搜尋
return $.extend({}, d, {
'_csrf': "csrf",
"productCode": $('#productCode').val(),
"title": $('#title').val(),
"source": $('#source').val(),
"datemin": $('#datemin').val(),
"datemax": $('#datemax').val()
});
},
"dataSrc": function (json) {
//json二次處理層
$("#list_nums").html(json.recordsTotal);
var data = [];
return data;
}
},
"columns": [
/*列對應json返回鍵名*/
{"data": "id"},
{"data": "name"}
],
"infoCallback": function (settings, json) {
/*居中列*/
$('table tr').find('td:eq(0)').css('text-align', 'center');
$('table tr').find('td:eq(1)').css('text-align', 'center');
}
});
};
var list_cat = {
doSearch: function () {
//無過載式重新整理
var table = $('.table').DataTable();
table.draw(false);
}
};
這些是基本的功能。註釋上都有標明,根據自己的需求去調整。如果需要更多功能。
以下是你需要的。