datatables ajax reload из нового источника

Question

Как перезагрузить данные с новой функциональностью ajax?

Я думаю, что это проблема масштаба.

function load_table(tableName,src) 
{ 
    var oTable = $('#'+tableName).DataTable({ 
      'bProcessing' : true, 
      'bServerSide' : true, 
      'responsive' : true, 
      'sAjaxSource' : src, 

     'fnServerData' : function(sSource, aoData, fnCallback) 
      { 
      $.ajax({ 
       'dataType': 'json', 
       'type' : 'POST', 
       'url'  : sSource, 
       'data' : aoData, 
       'success' : fnCallback 
      }); 
      }, 
    }); 
} 

Попробуйте перезагрузить его из другого источника данных:

$("input[type="button"]").on('click',function() 
{ 

oTable.ajax.url('newsource').load(); 
alert('Data source: '+oTable.ajax.url()); 


}); 

выходы Alert: ЦСИ: Newsource

браузер загружает таблицу из ЦСИ: oldsource

Answer 1

У меня был тот же вопрос для тех, кто работает с этой проблемой в будущем здесь будет решение:

Чтобы выполнить повторную загрузку данных из другого источника:

относятся к DOM элемент таблицы НЕ объект DataTable объект или вы получите ошибку reinitilization:

шаг 1: четкие данные:

$('#your_table_name').DataTable().clear(); 

шага 2: Уничтожить DataTable объекта

$('#your_table_name').DataTable().destroy(); 

если вы используете дочерние строки, это очень важно удалить замковый слушатель

$("#your_table_name tbody") 
    .off("click", "td.details-control"); 

Reinit DataTables:

loadTable('newsource','your_table_name') 

и функция loadTable

function loadTable(src,tableName) 
{ 
var oTable = $('#'+tableName).DataTable({ 
    'bProcessing' : true, 
    'bServerSide' : true, 
     'responsive' : true, 
     "sDom": '<"toolbar"lfr>tip<"F">R', 

    'sAjaxSource' : src, 

    }); 

    //initchildrows() 
} 

Answer 2

Да , это, по-видимому, проблема масштаба. Назначьте экземпляр DataTables локальной переменной:

function load_table(tableName,src) 
{ 
    var oTable = $('#'+tableName).DataTable({ 
      'bProcessing' : true, 
      ... 

присвоить его глобальной переменной вместо:

var oTable; 
function load_table(tableName,src) 
{ 
    oTable = $('#'+tableName).DataTable({ 
      'bProcessing' : true, 
      ... 

Если он все еще не работает - но это должно, вы используете oTable.ajax.url(<src>).load() раз - тогда просто инициализировать таблицу с destroy : true вариант:

var oTable; 
function load_table(tableName,src) 
{ 
    oTable = $('#'+tableName).DataTable({ 
      destroy : true, 
      'bProcessing' : true, 
      ... 

и называют load_table от события:

$("input[type='button']").on('click',function() 
{ 
    load_table('tableName', 'newsource'); 
}); 

Answer 3

Спасибо, вот мое решение, оно не идеально, должно отправить дважды URL-адрес, благодаря этому автору: Как мне изменить URL-адрес ajax запроса?например: если вы Если вы инициализировать DataTable так:

var datatables_options = { 
           "aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ], 
           "iDisplayLength" : 5, 
           "sDom": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>', 
           <'float_right_nexpage'p>     <'float_right_display'l>>", 
           "bSort" : false, 
           "bProcessing" : false, 
           "bServerSide" : true, 
           "bStateSave" : true, 
           "bDestroy" : true, 
           "bDeferRender":true, 
           "bJQueryUI" : false, 
           "sScrollX" : "100%", 
           "bStateSave":true, 
           "language" : oLanguageData, 
           "aoColumns" : aoColumnsData,        
           "fnDrawCallback" : function() { 
//Checkbox status updates 
            $("#uniform-check-all").removeClass("checker");         
            $("span").removeClass("checked"); 
            $("span #check-all").attr("checked",false); 
            $.uniform.update(); 
           }, 
           "fnRowCallback" : function(nRow, aData, 
             iDataIndex) { 

           }, 
           "sAjaxSource" : "wageQuery.action?wageDate=" 
             + date, 
           "fnServerData" : function(sSource, aoData, 
             fnCallback) { 
            $.ajax({ 
             "type" : 'post', 
             "async":false, 
             "url" : sSource, 
             "dataType" : "json", 
             "data" : aoData, 
             "success" : function(resp) { 
              fnCallback(resp); 
             } 

            }); 
           }, 
           "fixedColumns": { 
            "iLeftColumns" : 4, 
            "sHeightMatch" : "auto" 
           }, 

          }; 

импорта: если вы хотите, чтобы перезагрузить новый URL-адрес (действие), вот решение: первый шаг: Инициализировать таблицы переменных в файле JSP, как это:

<script type="text/javascript"> 

      var wageNowTable;//Table global variables, do not put in the ready function, otherwise it is not a global variable 
     </script> 

второй шаг: Добавьте следующий код в файл JS, как это:

$("#wages-query") 
       .click(
         function() { 
          var datatables_options = { 
           "aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ], 
           "iDisplayLength" : 5, 
           //The following SDOM, 1.9 version will not show up 
           "sDom": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>', 
           //"sDom" : "<r>t<'float_left'i><'float_right_nexpage'p><'float_right_display'l>>", 
           "bSort" : false, 
           "bProcessing" : false, 
           "bServerSide" : true, 
           "bStateSave" : true, 
           "bDestroy" : true, 
           "bDeferRender":true, 
           "bJQueryUI" : false, 
           "sScrollX" : "100%", 
           "bStateSave":true, 
           "language" : oLanguageData, 
           // "aaData" : data, 
           "aoColumns" : aoColumnsData,   
           "fnRowCallback" : function(nRow, aData, 
             iDataIndex) {         
           }, 
           "sAjaxSource" : "wageQuery.action?wageDate=" 
             + date, 
           "fnServerData" : function(sSource, aoData, 
             fnCallback) { 
            $.ajax({ 
             "type" : 'post', 
             "async":false, 
             "url" : sSource, 
             "dataType" : "json", 
             "data" : aoData, 
             "success" : function(resp) { 
              fnCallback(resp); 
             } 

            }); 
           }, 
           "fixedColumns": { 
            "iLeftColumns" : 4, 
            "sHeightMatch" : "auto" 
           }, 

          }; 

          //Determine whether the table has been an instance, there is no instance, has been a direct update, load the corresponding URL 
          if (typeof(wageNowTable) == "undefined") { 
           wageNowTable = $('#sample_1').dataTable(datatables_options); 

          }else{ 
           var oSettings = wageNowTable.fnSettings(); 
           oSettings.sAjaxSource = "wageQuery.action?wageDate=" 
            + date; 
           wageNowTable.fnDraw(false);//Don't jump to the first page, the page number and the reserved page displays the number of 
           wageNowTable.fnDraw(false);// 
          } 


           //Important point: listen to the state of the check box, the important need to use the form of on, the direct click can not change the state 
          $('.DTFC_LeftHeadWrapper div').on('click','input' ,function() { 
              $("#uniform-check-all").removeClass("checker"); 

              $("span").removeClass("checked"); 


                var val = $(this).prop("checked"); 
                $("input[type='checkbox']", ".DTFC_LeftHeadWrapper").attr("checked", val); 

                $("#check-all").attr("checked", val); 
                if (val) { 
                 $(".checkboxes").each(function(index){ 
                  $(this).attr("checked", val); 

                 }); 
                } else { 
                 $(".checkboxes").each(function(index){ 
                  $(this).attr("checked", val); 

                 }); 
                } 

          });  
       }); 

определить, имеет ли таблица была экземпляром, не существует ни одного случая, был прямым UPDA te, загрузите новый URL-адрес:

if (typeof(wageNowTable) == "undefined") { 
          wageNowTable = $('#sample_1').dataTable(datatables_options); 

         }else{ 
          var oSettings = wageNowTable.fnSettings(); 
          oSettings.sAjaxSource = "wageQuery.action?wageDate=" 
           + date; 
          //need twice fndraw 
          wageNowTable.fnDraw(false); 
          wageNowTable.fnDraw(false); 
         }