datatables ajax reload from new source

Question

How do I reload datatables with the new ajax functionality?

I think it's a problem of scope.

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
            }); 
          }, 
     });
}

Try to reload it from a different data source:

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

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


});

Alert outputs : src : newsource

Browser loads table from src: oldsource

Answer 1

I've had the same issue to anyone who runs into this problem in the future here is the solution:

To accomplish reloading of data from a different source:

refer to the DOM table element NOT the DataTable object or you will get a reinitilization error:

step 1: clear data :

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

step 2: Destroy the DataTable object

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

if you're using child rows this is very important remove the click listener

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

Reinit DataTables:

loadTable('newsource','your_table_name')

and your loadTable function

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

Yes, this seems to be a scope problem. You assign the dataTables instance to a local variable :

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

assign it to a global variable instead :

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

If it still not works - but it should, you are using oTable.ajax.url(<src>).load() just right - then simply reinitialise the table with the destroy : true option :

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

and call load_table from the event :

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

Answer 3

Thanks,Here is my solution,it is not perfect,must send twice url,thanks to this author: How do I modify ajax url of a query datatable? eg: if you If you initialize datatable like this：

  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"
                                },

                            };

import: if you want to reload new url（action）,here is the solution： first step： Initialize table variables at the JSP file，like this:

 <script type="text/javascript">

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

second step: Add the following code to the JS file,like this:

 $("#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);

                                                        });
                                                    }

                           } );     
                });

Determine whether the table has been an instance, there is no instance, has been a direct update, load the new 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);
                        }