jQuery DataTables: “Load more” button

Client-side processing

Example

Highlights

JavaScript

  • 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.

HTML

  • “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

Example

Highlights

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": [
            [
                "Angelica",
                "Ramos",
                "System Architect",
                "London",
                "9th Oct 09",
                "$2,875"
            ],
            [
                "Ashton",
                "Cox",
                "Technical Author",
                "San Francisco",
                "12th Jan 09",
                "$4,800"
            ],
            ...
        ]
    }
    

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.

Recommended For You

Books

Online Courses

You Might Also Like

Comments

  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?

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.
(Optional)