jQuery DataTables: “Load more” button

Michael Ryvkin
31 31

According to some usability studies “Load more” button is superior to pagination or infinite scrolling when it comes to displaying multiple records on one page. It is simple to use and allows user to compare records more easily because new records are added to the list.

Download Donate Discuss Report a Bug

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.

Reloading Data

When you reload your data using ajax.reload() API method, number of records loaded on screen at once is preserved. If you want to reset table page length to default, use page.resetMore() API method as shown below.

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.

You May Also Like

jQuery DataTables: Row selection using checkboxes and Select extension
jQuery DataTables: Row selection using checkboxes
jQuery DataTables: Why click event handler does not work
jQuery DataTables: Alphabetical Search
Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.

Comments

  1. Thanks for the example, Michael!

    After including plug-in’s JavaScript file to my WordPress site, I get the following error:

    “Uncaught TypeError: Cannot set property ‘pageLoadMore’ of undefined at dataTables.pageLoadMore.min.js:5”

    What could be the reason? How to fix it?

    Reply

      1. I added the script to functions.php and it should load after jQuery and jQuery DataTables files:

        function loadmore_enqueue_script() {
        wp_enqueue_script( 'Load_More_Plugin', 'https://gyrocode.github.io/jquery-datatables-pageLoadMore/1.0.0/js/dataTables.pageLoadMore.min.js' );
}

 add_action( 'wp_enqueue_scripts', 'loadmore_enqueue_style', 999 );

        Here is the website: http://fridayinvestor.com/

        Reply

        1. You are loading dataTables.pageLoadMore.min.js before jQuery DataTables, that is why there is $.fn.dataTable is undefined console error. Third argument for wp_enqueue_script() can be used to specify the script pageLoadMore depends on.

          Reply

  3. On click on Load More, I want to add some classes on the newly added data row and and its tds. Can you please help me out here

    Reply

  4. This is very good one. I am using ajax server side to load more data. However, I got issues with sorting column where it does not seem to work as expected. It would be great if the sorting works on client side. For server side, it refresh new data from server side during sorting, and it reset load more page to new data, not appended data.

    Reply

  5. I would like to use client side but loading data from ajax. Each time of clicking Load more button it should get new data from server and append to dataTable. However, all sorting, searching should be on client side, so they should not reload new data. Please help me on this.

    Reply

  6. Hi Michael,

    Great tutorial and exactly what I needed. One quick question though. If I wish to add a fading in effect to the new table rows loading on button click how could I appraoch that? 

    Thanks you very much!

    Best,

    Paulo

    Reply

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.