Datatables Do Not Send Ajax Request At The Initialization

November 30, 2023 Post a Comment

How to use dataTables to instantiate the table does not load data (server mode),then loading data when i click on a button.If serverSide is set to true at initialization, the table

Solution 1:

You should use "iDeferLoading" : 0 in DataTables parameters, when you initialize it:

var table =  $("#table").dataTable({
  "bProcessing": true,
  "bServerSide": true,
  "iDeferLoading": 0,
  "sAjaxSource": service_url,
  "sServerMethod": "POST",
  ...
  ...

(or "deferLoading":0 for newer DataTables versions, 1.10 and above), and then add the event to your button:

$("#button").on("click", function (event) {
   $('#table').dataTable().fnDraw();
});

https://datatables.net/examples/server_side/defer_loading.html

Solution 2:

in a similar situation, this is how I did it.

<script>
                $(function ($) {
                    $("#tbl").DataTable({columns:[{data:"id"}, {data:"text"}], dom: "tB", buttons: [{ text: "Load Me", action: function (e, dt, node, config) { loadme(e, dt, node, config); } }] });
                }
                );

                // // parameters are passed from the datatable button event handlerfunctionloadme(e, dt, node, config) {
                    parms = JSON.stringify({ parm1: "one", parm2: "two" });

                    $.ajax({
                        // my test web server that returns an array of {id:"code field", text:"country namee"}url: "WebService1.asmx/GetAList",
                        data: JSON.stringify({ s: parms }),
                        type: 'post',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        // this is just away of passing arguments to the success handlercontext:{dt:dt, node:node},

                        success: function (data, status) {

                            var contries = JSON.parse(data.d);
                            for (var i = 0; i < contries.length; i++){
                                this.dt.row.add(contries[i], "id", "text");
                                this.dt.draw();
                            }
                        },
                        error: function (one, two) {
                            debugger;
                        }
                    });

                }


            </script></head><body><divstyle="width:500px"><tableid="tbl"><thead><tr><th>Code</th><th>Contru</th></tr></thead><tbody></tbody><tfoot></tfoot></table></div></body>

Solution 3:

After looking at the source code for half a day, I finally found a solution. First I needed a custom parameter called firstAjax and set it to false. like this:

$("#example").DataTable({serverSide:true,ajax: {
        url:'your url'
    },firstAjax:false});

Then I changed the

_fnReDraw (settings);  //in datatables.js line 4717

if (settings.oInit.firstAjax) {
         _ fnReDraw (settings);
     }

If the compressed js file(datatables.min.js), you should find _fnReDraw function corresponding alias.

Solution 4:

I found the solution, in the initialization make like this, with the "oLanguage":

$('.table').dataTable({
  oLanguage: {
     sUrl: ""
  }
});

Solution 5:

After initialize datatables with ajax, use this simple line to call ajax for get data:

$('#table').DataTable().ajax.reload();

this code may not working with old versions of datatables.

Download latest version: https://datatables.net/download

JavaScript Sample