sorting and pagination locally with ajax load

armando@streamloan.io

For the benefit of other users:
I was able to activate the data table in hybrid mode.

The following configuration allow you to do an initial Post on load to your ajax function. The main difference is that with server side false , the post request has no parameters, if you require parameters you can build them int he query string for the post request definition in the ajax definition as shown below with the variable that defines the ajax URL definition.

                    var table = $('#bundletbl').DataTable({
                        processing: true,
                        serverSide: false,
                        lengthMenu: [10, 25, 50],
                        select: true,
                        dom: 'Blrtip',
            ajax: {
                                    "url": "<?php echo APP_URL ?>adm/ajax/partners?id" <?php echo $ID ?>,
                                    "type": "POST"
             }, 
             columns: [
                                            {
                                                className: 'details-control',
                                                orderable: false,
                                                data: null,
                                                defaultContent: ''
                                            },
                                            { "data": "partner" },
                                            { "data": "DT_RowId" },                                             
                                            { "data": "appname" },
                                            { "data": "appid" },
                                            { "data": "apiurl" },
                                            { "data": "hostname" }                          
                                ]                       
             });

                    // Apply the search
                    table.columns().every(function () {
                        var that = this;

                        $('input', this.footer()).on('keyup change', function () {
                            if (that.search() !== this.value) {
                                that
                                    .search(this.value)
                                    .draw();
                            }
                        });
                    });

I was not able to find this specific solution in the forums nor stack overflow. The above allows you to load data tables with the initial load from the ajax Post call, then since server side is false the data tables jquery framework takes care of the search and the sorting. This is very efficient since ideally the initial query is reducing the amount of data shown for a user. Typically you will never display thousands of records for a given user and the performace is improved for the user given the fact that there is no need to do ajax call on every keystroke when searching.

If you require to refresh the table with ajax calls you can manipulate the ajax call with other methods or events.

Hope this will save time to other people who are looking for the same answer.

allan

That's excellent - thanks for sharing this with us. Another way of sending parameters is to use ajax.data, but yes, using query string parameters is absolutely valid!

Allan