1. 程式人生 > >bootstrap datatable 資料重新整理問題

bootstrap datatable 資料重新整理問題

在專案中,頁面初始化的時候,通過通過向後臺請求資料,頁面初始化完之後,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請求重新整理資料。
如果有什麼工作!做到這一點: 例如: