Datatables fnDraw не работает

Question

Я использую datatables, который получает его данные из json-файла.

var date=new Date(); 
var day=date.getDate(); 
var dataTable = $('#.main_content table').dataTable({ 
        "bProcessing": true, 
        "bPaginate": false, 
        "bSort": false, 
        "bServerSide": true, 
        "bjQueryUI": true, 
        "sAjaxSource": 'sources/data.json', 
        "fnServerData": fnServerObjectToArray() 
       }); 

Как вы можете видеть, я использую функцию для извлечения данных из json-файла.

fnServerObjectToArray = function() { 
      return function (sSource, aoData, fnCallback) { 
       $.ajax({ 
        "dataType": 'json', 
        "type": "GET", 
        "url": sSource, 
        "data": aoData, 
        "dataType": "json", 
        "success": function (json) { 
         var a = []; 
         var data = json.aoData; 
         for (var i = 0, iLen = data.appointments.length; i < iLen; i++) { 
          var inner = []; 
          inner.push(data.appointments[i].time); 
          if (data.appointments[i].CHT111[day]) { 
           inner.push(data.appointments[i].CHT111[day]); 
           inner.push(data.appointments[i].DOB[day]); 
           inner.push(data.appointments[i].Patient[day]); 
           inner.push(data.appointments[i].Visit_Reason[day]); 
           inner.push(data.appointments[i].Room[day]); 
           inner.push(data.appointments[i].Scheduled[day]); 
          } 
          else { 
           inner.push(data.appointments[i].CHT111.default); 
           inner.push(data.appointments[i].DOB.default); 
           inner.push(data.appointments[i].Patient.default); 
           inner.push(data.appointments[i].Visit_Reason.default); 
           inner.push(data.appointments[i].Room.default); 
           inner.push(data.appointments[i].Scheduled.default); 
          } 
          a.push(inner); 
         } 
         json.aaData = a; 
         fnCallback(json); 
        } 
       }); 
      } 
     } 

Проблема заключается в том, что у меня есть кнопка, которая изменяет переменную день и после этого вызывается метод fnDraw(), который не работает.

Answer 1

Согласно документации datatables fnDraw не перезагружает данные Ajax. Однако есть плагин, который был написан как fnReloadAjax, который будет делать именно то, что вы ищете. Следующий код является кодом плагина, просто сохраните его как файл JS и загрузить его после того, как вы загрузите DataTables JS, но перед тем как инициализировать таблицу:

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) 
{ 
if (typeof sNewSource != 'undefined' && sNewSource != null) 
{ 
    oSettings.sAjaxSource = sNewSource; 
} 
this.oApi._fnProcessingDisplay(oSettings, true); 
var that = this; 
var iStart = oSettings._iDisplayStart; 
var aData = []; 

this.oApi._fnServerParams(oSettings, aData); 

oSettings.fnServerData(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 (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) 
    { 
     oSettings._iDisplayStart = iStart; 
     that.fnDraw(false); 
    } 

    that.oApi._fnProcessingDisplay(oSettings, false); 

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

Теперь вы можете просто позвонить следующий код каждый раз, когда вы хотите для перезагрузки таблицы новыми отфильтрованными данными:

dataTable.fnReloadAjax('sources/data.json');