jQuery DataTables: “Load more” button

Client-side processing




  • Include “Load more” plug-in file

    You need to include plug-in’s JavaScript file after loading jQuery and jQuery DataTables files as shown below:

    <script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-pageLoadMore/1.0.0/js/dataTables.pageLoadMore.min.js"></script>
  • Control elements

    With dom: 'frt' I hide pagination, page length and information controls. These controls are not needed with “Load more” button.

    If you’re using Bootstrap, Foundation or other frameworks, see dom option for default string for your framework and remove characters p, l and i to hide these controls.


  • “Load more” button

    Button is initially hidden with inline CSS style display:none. This helps to avoid flickering while resource files are being loaded.

    Later visibility of the “Load more” button is controlled based on availability of the additional data in a callback defined by drawCallback option.

    You can use your own markup for the “Load more” button and style it as needed. Just remember to use button’s ID (btn-example-load-more in my example) in the JavaScript code.

Server-side processing



Code for server-side processing mode is very similar to code used for client-side processing mode. Therefore everything that has been mentioned above also applies here as well.

There is only one notable difference. You need to use predefined function $.fn.dataTable.pageLoadMore as a value for ajax option and specify URL to your server-side script using url option.

For example:

      ajax: $.fn.dataTable.pageLoadMore({
         url: '/test/0'

Optionally, you can specify request method using method option and data to be sent to the server using data option. For example:

      ajax: $.fn.dataTable.pageLoadMore({
         url: '/test/0',
         method: 'POST',
         data: { 
            extraParam: 'extraValue'

Known Limitations

  • Plug-in expects data returned by the server-side script to be in data property. For example:

        "draw": 1,
        "recordsTotal": 57,
        "recordsFiltered": 57,
        "data": [
                "System Architect",
                "9th Oct 09",
                "Technical Author",
                "San Francisco",
                "12th Jan 09",

Also please note that I am using Mockjax plug-in to emulate server-side processing in my example. This plug-in (jquery.mockjax.min.js) and corresponding code ($.mockjax({ ... })) is not needed in production.

You Might Also Like


  1. Works great – how we do we trigger a reload of the ajax data externally? So if I want to send a new data object to the server as request body then refresh the table? I’m using search inputs external to datatables.

      1. Thank you for the quick response. There is a problem however, as the table doesn’t clear itself of data before getting a new data set. table.clear().draw() doesn’t seem to work. It does however append the new data on the end of the datatable.

  2. Thank you for these examples.
    Can you please tell us how to choose how many records to be loaded at one time? I see you get 10. For me, the whole ajax dataset is loaded. How can I limit this?

  3. Very good plugin. Like costel, I am also only getting the entire dataset to load at once. I’ve got “paging”: true, “pagelength”: 10 currently set in my code – is it possible that something else is interfering? I’ve also got column filtering and column sort on one column also active.

      1. I’m not sure, I’ve just created a second page, db-test2.php which is running your plugin and connected to the same db-connect.php file (db-test.php has reverted to the original settings and now only returns a 20 result page). I’ll keep looking though.

        1. The problem is in your server-side script db-connect.php. It disregards request to return limited number of records and returns everything. I recommend using ssp.class.php class from DataTables distribution for server-side processing. Please see github.com for more details.

  4. Hi Michael, I got it up and running by changing to ssp.class.php, thanks. I’ve noticed that search doesn’t work for me or on your server-side example – I presume this is a known limitation?

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.