Datatables не обновляется после нажатия кнопки

Question

Я, наконец, бросил полотенце. Я просмотрел кучу примеров как на веб-сайте Datetables, так и здесь, в stackoverflow для решения и внедрил все из них без успеха.

У меня есть страница, в которой есть 2 hjquery ui datepickers (начало и конец даты), которые я использую для подачи в свои php и sql, которые затем возвращают мой json-массив, который загружается в мои datatables. Это работает блестяще с первой попытки.

Однако типичный пользователь захочет изменить эти даты на протяжении всего своего пребывания на веб-сайте, но когда пользователь вводит новые переменные даты и нажимает кнопку go, данные не обновляются с новой информацией, которую он (надеюсь) получил от вход.

здесь свалка моего кода (не при первой загрузке страницы будет получать данные сегодняшние)

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback){ 
    if (typeof sNewSource != 'undefined'){ 
     oSettings.sAjaxSource = sNewSource; 
    } 
    this.oApi._fnProcessingDisplay(oSettings, true); 
    var that = this; 

    oSettings.fnServerData(oSettings.sAjaxSource, null, function(json) { 
     /* Clear the old information from the table */ 
     that.oApi._fnClearTable(oSettings); 

     /* Got the data - add it to the table */ 
     for (var i=0 ; i<json.aaData.length ; i++){ 
      that.oApi._fnAddData(oSettings, json.aaData[i]); 
     } 

     oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 
     that.fnDraw(that); 
     that.oApi._fnProcessingDisplay(oSettings, false); 

     /* Callback user function - for event handlers etc */ 
     if (typeof fnCallback == 'function'){ 
     fnCallback(oSettings); 
     } 
    }); 
} 
var oTable; 

$(document).ready(function() 
{ 
    $("#datestart").datepicker(); 
    $("#datestart").datepicker("setDate", new Date()); 
    $("#dateend").datepicker(); 
    $("#dateend").datepicker('setDate', new Date()); 
    oTable = $('#example').dataTable(
    { 
     "sDom": '<"toolbar">T<"clear">rt', 
     "oTableTools": { 
       "sSwfPath": "copy_csv_xls_pdf.swf" 
     }, 
     "bProcessing": true, 
     "fnServerParams": function (aoData) { 
       aoData.push({"name": "dateStart", "value": $('#datestart').datepicker('getDate').getTime()/1000+28800},{"name": "dateEnd", "value": $('#dateend').datepicker('getDate').getTime()/1000+28800}); 
     }, 
     "sAjaxSource": "SearchResults.php", 
     "iDisplayLength": -1, 
     "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]  
    })    
     .columnFilter(
     { 
      sPlaceHolder: "head:before", 
      aoColumns: [ 
       { type:"date-euro" }, 
       { type: "number" }, 
       { type: "number" }, 
       { type: "number" }, 
       { type: "text"} 
      ] 
     }); 

    $('#btnrun').click(function() 
    { 
     if(validateForm()) 
     { 
      $.blockUI({ 
      css: { 
        border: 'none', 
        padding: '15px', 
        backgroundColor: '#000', 
        '-webkit-border-radius': '10px', 
        '-moz-border-radius': '10px', 
        opacity: .5, 
        color: '#fff' 
       }, 
        message: '<h1>Loading report...</h1>', 
      }); 
     setTimeout($.unblockUI, 2000); 
     oTable.fnReloadAjax(); 
    } 
    }); 

}); 

Answer 1

К сожалению для тех, кто инвестирует время, чтобы исследовать. Я не понимал, что не наклеил весь fnReloadAjax(); функция. Поэтому я вернулся на сайт datetables и наклеил весь метод:

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback,  bStandingRedraw) 
{ 
// DataTables 1.10 compatibility - if 1.10 then versionCheck exists. 
// 1.10s API has ajax reloading built in, so we use those abilities 
// directly. 
if ($.fn.dataTable.versionCheck) { 
    var api = new $.fn.dataTable.Api(oSettings); 

    if (sNewSource) { 
     api.ajax.url(sNewSource).load(fnCallback, !bStandingRedraw); 
    } 
    else { 
     api.ajax.reload(fnCallback, !bStandingRedraw); 
    } 
    return; 
} 

if (sNewSource !== undefined && sNewSource !== null) { 
    oSettings.sAjaxSource = sNewSource; 
} 

// Server-side processing should just call fnDraw 
if (oSettings.oFeatures.bServerSide) { 
    this.fnDraw(); 
    return; 
} 

this.oApi._fnProcessingDisplay(oSettings, true); 
var that = this; 
var iStart = oSettings._iDisplayStart; 
var aData = []; 

this.oApi._fnServerParams(oSettings, aData); 

oSettings.fnServerData.call(oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) { 
    /* Clear the old information from the table */ 
    that.oApi._fnClearTable(oSettings); 

    /* Got the data - add it to the table */ 
    var aData = (oSettings.sAjaxDataProp !== "") ? 
     that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json; 

    for (var i=0 ; i<aData.length ; i++) 
    { 
     that.oApi._fnAddData(oSettings, aData[i]); 
    } 

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 

    that.fnDraw(); 

    if (bStandingRedraw === true) 
    { 
     oSettings._iDisplayStart = iStart; 
     that.oApi._fnCalculateEnd(oSettings); 
     that.fnDraw(false); 
    } 

    that.oApi._fnProcessingDisplay(oSettings, false); 

    /* Callback user function - for event handlers etc */ 
    if (typeof fnCallback == 'function' && fnCallback !== null) 
    { 
     fnCallback(oSettings); 
    } 
}, oSettings); 

};

Answer 2

здесь на форуме DataTables http://datatables.net/forums/discussion/comment/16380

Для перезагрузки данных при использовании обработки на стороне сервера, просто использовать встроенные функции API fnDraw, а не этот плагин

так, удалите подключаемый модуль и попробуйте использовать fnDraw, тогда, если у вас все еще есть проблемы, мы можем сортировать их