Data Table Deferred loading of data. How to pass the "deferLoading" value dynamically

user_630209 0
Viewed 656

Using Data Table for server side pagination. Here first page of the table has already been preloaded in the HTML. This can be acieved using Deferred loading of data. Below link has been used to get the details.

this site

Here deferLoading value is hardcoded, so how can pass this "deferLoading" value dynamically.

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/server_processing.php",
        "deferLoading": 57
    } );
} );

The below code is not working. Is there a way there we can change the deferLoading value later ?

function loadInitialData(){
//ajax call to load initial html data
    var totalRecords = //get Value from server;
    table.deferLoading = totalRecords;
    table.fnDraw();
}

Below data is returned by the Ajax call

[               [0,'2021072701587','08:04:57'],
               [1,'2021072701585','08:03:46'],
               [2,'2021072701585','08:02:44']
]

But then from second time, by using using I'm getting the page count error like this. enter image description here

datatables datatable jquery
1 Answers

You can provide the deferLoading value via an initial (separate) Ajax call - for example, using jQuery ajax. You can then pass that value to your DataTable upon completion of the initial Ajax call.

So, assuming we have already built our HTML table and populated it with some data:

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
                <th>Start date</th>
                <th>Office</th>
                <th>Extn.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>$320,800</td>
                <td>2011/04/25</td>
                <td>Edinburgh</td>
                <td>5421</td>
            </tr>
            <tr> ... and more initial rows... </tr>
        </tbody>
    </table>

Then we can use a script as follows:

$(document).ready(function() {

  $.ajax({
    url: "YOUR_URL_HERE/preload-count"
  })
  .done(function( data ) {
    initializeTable( data.count );
  });

  function initializeTable(deferDataCount) {
    $('#example').DataTable( {
      serverSide: true,
      "deferLoading": deferDataCount,
      ajax: {
        url: "YOUR_URL_HERE/serverside-data",
      },
      "columns": [
        { "title": "ID", "data": "id" },
        { "title": "Name", "data": "name" },
        { "title": "Position", "data": "position" },
        { "title": "Salary", "data": "salary" },
        { "title": "Start Date", "data": "start_date" },
        { "title": "Office", "data": "office" },
        { "title": "Extn.", "data": "extn" }
      ]
    });
  }

} );

In the above script, we first call the following URL:

url: "YOUR_URL_HERE/preload-count"

This returns a simple JSON structure containing the count we want to use in the deferLoading option - so, in my case it is this:

{
  "count": 57
}

This integer is then passed to my initializeTable(deferDataCount) function, where the DataTable is initialized with the count I need to use:

"deferLoading": deferDataCount,

Now, the next time a user action is performed (paging/filtering/sorting) the DataTable will use its URL to fetch the next page of data:

url: "YOUR_URL_HERE/serverside-data"

And this URL will return all the required serverSide values needed by DataTables, including row data JSON which (in my case) looks like this:

{
  "id": "2",
  "name": "Garrett Winters",
  "position": "Accountant",
  "salary": "$170,750",
  "start_date": "2011/07/25",
  "office": "Tokyo",
  "extn": "8422"
}

Update

Here is my full web page, for reference, to show how all the pieces fit together:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
                <th>Start date</th>
                <th>Office</th>
                <th>Extn.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>$320,800</td>
                <td>2011/04/25</td>
                <td>Edinburgh</td>
                <td>5421</td>
            </tr>
        </tbody>
    </table>

</div>

<script type="text/javascript">

$(document).ready(function() {


  $.ajax({
    url: "YOUR_URL_HERE/preload-count"
  })
  .done(function( data ) {
    initializeTable( data.count );
  });

  function initializeTable(deferDataCount) {
    $('#example').DataTable( {
      serverSide: true,
      "deferLoading": deferDataCount,
      ajax: {
        url: "YOUR_URL_HERE/serverside-data",
      },
      "columns": [
        { "title": "ID", "data": "id" },
        { "title": "Name", "data": "name" },
        { "title": "Position", "data": "position" },
        { "title": "Salary", "data": "salary" },
        { "title": "Start Date", "data": "start_date" },
        { "title": "Office", "data": "office" },
        { "title": "Extn.", "data": "extn" }
      ]
    });
  }

} );

</script>

</body>
</html>
user_125673650
Related