bootstrap datatable 資料重新整理問題
阿新 • • 發佈:2018-12-30
在專案中,頁面初始化的時候,通過通過向後臺請求資料,頁面初始化完之後,datatable是有資料的,當我點選頁面的搜尋按鈕(按照時間過濾資料),datatable的資料要能重新重新整理或者過載;這一點,我的實現是直接從資料庫中查詢,目前的資料量比較小,還沒必要用到快取,此時,由於初做web,遇到了好多問題,諸如datatable cannot initial 等等問題,
datatable初始化的程式碼:
$(document).ready(function() {
$('#example1').DataTable({
"bPaginage": false,
"sPaginationType" : "full_numbers",
"oLanguage": {
"sLengthMenu": "每頁顯示 _MENU_ 條",
"sZeroRecords": "沒有找到符合條件的資料",
"sInfo": "當前第 _START_ - _END_ 條 共計 _TOTAL_ 條",
"sInfoEmpty": "沒有記錄",
"sInfoFiltered": "(從 _MAX_ 條記錄中過濾)",
"sSearch": "搜尋",
"sProcessing" : "資料載入中...",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "尾頁"
}
},
"aoColumns": [
{
"sDefaultContent": "",
fnRender: function (obj) {
return "<input type='checkbox' name='checkbox1'/>"
}
},
{"mData": "column_name"},
{"mData": "data_type"},
{"mData": "column_comment"}
]
});
$('#example2').DataTable({
"bProcessing":false,
"bFilter" : true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bSort": true,
"oLanguage": {
"sLengthMenu": "每頁顯示 _MENU_ 條",
"sZeroRecords": "沒有找到符合條件的資料",
"sInfo": "當前第 _START_ - _END_ 條 共計 _TOTAL_ 條",
"sInfoEmpty": "沒有記錄",
"sInfoFiltered": "(從 _MAX_ 條記錄中過濾)",
"sSearch": "搜尋",
"sProcessing": "資料載入中...",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "尾頁"
}
},
"aoColumns": [
{"mData": "column_name"},
{
"sDefaultContent": "",
fnRender: function (obj) {
return "<input type='checkbox' name='checkbox2'/>"
}
},
{
"sDefaultContent": "",
fnRender: function (obj) {
return "<button class='btn' " +
"style='margin-top: -2px;margin-bottom: -18px;padding-top: 3px;height: 24px!important;" +
"font-size: 8px;color: snow' " +
"onclick=dl(this)>刪除</button>"
}
}
]
});
});
var table2 = $('#example2').dataTable();
oSettings = table2.fnSettings();
$.getJSON("transform.action?data="+data.join(","), null, function( json )
{
for (var i=0; i<json.aaData.length; i++)
{
table2.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
table2.fnDraw();
});
//也許你還可能用到這幾個方法:
table = $('#e
xample1').dataTable();
oSettings = table.fnSettings();
table.fnClearTable(this);
一個簡單的方法…
$(‘YourDataTableID’).dataTable()._fnAjaxUpdate();
它將通過與非常簡單的ajax請求重新整理資料。
如果有什麼工作!做到這一點: 例如: