DataTables do not send ajax request at the initialization

1
votes

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 will automatically send an ajax request, then render the data, which is not what I want !:(

5
javascriptdatatables
Show some code. – Mairaj Ahmad
don't use the datatable ajax, use a separate one associated with the button to fire it off – Bindrid
Did you write the datatable initialisation code on button event ? I – Haseena P A
@HaseenaPA I just want the Datatables do not send ajax request when initialization, I think it maybe have a option to complete . but i 'm not found in link – fang xing
stackoverflow.com/questions/40828790/… – Hassan Kalhoro

5 Answers

1
votes

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

0
votes

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 handler
                function loadme(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 handler
                        context:{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>
            <div style="width:500px">
                <table id="tbl">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Contru</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot></tfoot>
                </table>
            </div>
        </body>
0
votes

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

to 

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

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

-1
votes

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

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

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