這篇文章記錄一下datatables的一些主要設置
this.dtOptions = {
columns: [
{
title: '用戶名',
data: 'name',
width: '10%'
},
{
title: '行政區名稱',
data: 'xzqmc',
width: '10%'
},
{
title: '行政區代碼',
data: 'xzqdm',
width: '10%'
},
{
title: '單位',
data: 'company',
width: '30%',
render: (data, type, row, meta) => {
//如果單位名稱過長則用省略號隱藏
if (type === 'display') {
if (data && data.length > 8) {
return data.substr(0, 10) + '<a href="javascript:void(0)">...</a>';
}
else {
return data;
}
}
return data;
}
},
{
title: '電話號碼',
data: 'phone',
width: '10%'
},
{
title: '郵箱地址',
data: 'email',
width: '10%'
},
{
title: '審覈',
data: 'state',
width: '20%',
type: 'html',
className: 'auditTd',
render: (data, type, row, meta) => {
if (row.state == 0) {
return '<div>' +
'<button class="agreeBtn btn btn-sm btn-raised btn-blue">通過</button>' +
'<button class="refuseBtn btn btn-sm btn-raised btn-red">拒絕</button>' +
'</div>';
}
else {
return '未通過審覈'
}
}
}
],
columnDefs: [
{
targets: [-1],
orderable: true,
orderSequence: ["asc", "desc"],
searchable: false
},
{
targets: '_all',
orderable: false,
searchable: true
}
],
ajax: (data, callback) => {
this.systemService.getAllUnauditUser().subscribe(userArr => {
callback(userArr);
})
},
pagingType: 'full_numbers',
pageLength: 5,
scrollX: true,
scrollCollapse: true,
order: [[6, 'desc']],
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
processing: true,
rowCallback: (row, data, index) => {//每一行創建完成之後的回調函數
let self = this;
self.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {//用於獲取datatable的實例
//對審覈通過和拒絕button綁定相應的事件
if ($('.agreeBtn', row).length > 0) {
$('.agreeBtn', row).unbind('click');
$('.agreeBtn', row).bind('click', () => {
self.systemService.updateUserState(data.id, 1).subscribe(result => {
if (result) {
alertFunctions.basicSuccess('成功', '用戶' + data.name + '審覈通過');
dtInstance.row(row).remove();
dtInstance.draw();
self.ifAudited = true;
}
else {
alertFunctions.basicError('失敗', '用戶' + data.name + '審覈失敗');
}
})
})
$('.refuseBtn', row).unbind('click');
$('.refuseBtn', row).bind('click', () => {
self.systemService.updateUserState(data.id, -1).subscribe(result => {
if (result) {
$('.auditTd', row).html('未通過審覈');
data.state = -1;
dtInstance.draw()
}
else {
alertFunctions.basicError('失敗', '拒絕通過審覈失敗');
}
})
})
}
//如果單位名稱過長則綁定展開和收回事件
let $a = $('a', row);
if ($a.length > 0) {
$a.unbind('click');
$a.bind('click', () => {
if ($a.html() == '...') {
$a.parent('td').html(data.company + '<a href="javascript:void(0)"><small>收回</small></a>');
}
else {
$a.parent('td').html(data.company.substr(0, 10) + '<a href="javascript:void(0)">...</a>');
}
dtInstance.draw()
})
}
})
},
createdRow: (row, data, dataIndex) => {
},
preDrawCallback: (settings) => {
},
language: {
emptyTable: "表中數據爲空",
info: "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
infoEmpty: "顯示第 0 至 0 項結果，共 0 項",
infoFiltered: "(由 _MAX_ 項結果過濾)",
infoPostFix: "",
thousands: ",",
lengthMenu: "顯示 _MENU_ 項結果",
loadingRecords: "載入中...",
processing: "處理中...",
search: "搜索:",
searchPlaceholder: "",
zeroRecords: "沒有匹配結果",
paginate: {
first: "首頁",
last: "末頁",
next: "下頁",
previous: "上頁"
}
}
}
先看一下一些基本的設置：
pagingType：string 表示分頁按鈕佈局，有6種內置的佈局
numbers只顯示數字 （1.10.8版本）simple只有上一頁和下一頁兩個按鈕simple_numbers上一頁和下一頁兩個按鈕，加上頁數按鈕（默認值）full首頁，尾頁，上一頁和下一頁四個按鈕full_numbers首頁，尾頁，上一頁和下一頁四個按鈕,加上數字按鈕first_last_numbers首頁，尾頁兩個按鈕,加上數字按鈕
pagingLength：number 表示每頁有多少行數據（默認10）
scrollX：boolean 設置水平滾動，默認false。scrollY同理
scrollCollapse：boolean 當顯示更少的記錄時，是否允許表格減少高度。默認false
order：array 表格初始排序（注意在datatables中列數是從0開始的，也就是說0表示第一列）。默認會對第一列進行排序，即使設置了第一列不排序（orderable:false），如何不設置這個屬性，表格初始化後第一列仍然會顯示排序箭頭，爲避免這個bug一般要對這一屬性進行設置。
lengthMenu：array 更改頁面顯示條數的下拉框選項，它可以是：
- 整數值的一維數組，用於顯示的選項和顯示長度的值
- 二維數組，第一個數組用來作爲長度的值，第二個數組用來作爲顯示的選項。這是很有用的，比如當你想顯示“所有”選項。分頁長度值必須的大於
0，當爲-1的時候，代表告訴DataTablse禁用分頁（比如，顯示所有數據）
processing：boolean 是否顯示正在處理的狀態。默認false
language：文字表示設置，具體意思見字面意思，這裏就不多說了
比較常用的設置屬性就介紹到這兒，後面的文章會介紹column、columnDefs等