jquery - Disable initial automatic ajax call - DataTable server side paging -


i have datatable initialized server side paging , working fine. table triggers ajax, pulls data , renders onto table during initialization. need empty table , load table data on click of button using load() or reload() like:

mytable.api().ajax.reload(); 

here table initialization:

function inittesttable(){     mytable =  $('#testtable').datatable({     "processing": true,     "serverside": true,     "ajax": {         "url": "testtabledata.html",         "type": "get",     },     "columns": [         { "data": "code" },         { "data": "description" }     ]  }); } 

there should way restrict loading of table during initialization? read documentation not find. please suggest.

you use deferloading parameter , set 0. delay loading of data until filter, sorting action or draw/reload ajax happens programmatically.

function inittesttable(){     mytable =  $('#testtable').datatable({     "processing": true,     "serverside": true,     "deferloading": 0, // here     "ajax": {         "url": "testtabledata.html",         "type": "get",     },     "columns": [         { "data": "code" },         { "data": "description" }     ]  }); } 

to trigger ajax when button clicked can have following in handler:

function buttonclickhandler(event){   $('#testtable').datatable().draw(); } 

see example below demonstration.

$(document).ready(function() {    // ajax emulation demonstration    $.mockjax({        url: '/test/0',        responsetime: 200,        response: function(settings){           this.responsetext = {              draw: settings.data.draw,              data: [                [ "tiger nixon", "system architect", "edinburgh", 61, "2011/04/25", "$320,800" ],                [ "tiger nixon", "system architect", "edinburgh", 61, "2011/04/25", "$320,800" ],                [ "tiger nixon", "system architect", "edinburgh", 61, "2011/04/25", "$320,800" ],                [ "tiger nixon", "system architect", "edinburgh", 61, "2011/04/25", "$320,800" ],                [ "tiger nixon", "system architect", "edinburgh", 61, "2011/04/25", "$320,800" ],                [ "tiger nixon", "system architect", "edinburgh", 61, "2011/04/25", "$320,800" ],                [ "tiger nixon", "system architect", "edinburgh", 61, "2011/04/25", "$320,800" ],                [ "tiger nixon", "system architect", "edinburgh", 61, "2011/04/25", "$320,800" ],                [ "tiger nixon", "system architect", "edinburgh", 61, "2011/04/25", "$320,800" ],                [ "tiger nixon", "system architect", "edinburgh", 61, "2011/04/25", "$320,800" ]              ],              recordstotal: 1000,              recordsfiltered: 1000           };        }    });      $('#example').datatable({          "processing": true,      "serverside": true,      "deferloading": 0,      "ajax": {          "url": "/test/0",          "type": "get"      }        });            $('#btn-reload').on('click', function(){       $('#example').datatable().draw()      });  });
<!doctype html>  <html>    <head>  <meta charset="iso-8859-1">  <link href="//cdn.datatables.net/1.10.5/css/jquery.datatables.min.css" rel="stylesheet"/>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   <script src="//cdn.datatables.net/1.10.5/js/jquery.datatables.min.js"></script>  <script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>      </head>  <body>  <p>  <button id="btn-reload">reload</button>  </p>  <table id="example" class="display" cellspacing="0" width="100%">    <thead>     <tr>        <th>name</th>        <th>position</th>        <th>office</th>        <th>age</th>        <th>start date</th>        <th>salary</th>     </tr>  </thead>    <tfoot>     <tr>        <th>name</th>        <th>position</th>        <th>office</th>        <th>age</th>        <th>start date</th>        <th>salary</th>     </tr>  </tfoot>    <tbody>  </tbody>  </table>  </body>  </html>


Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -