How to use server side scripting with Datatables

SujitJ

Hello

I have a Jave EE application using Servlets. Im currently using datatables for displaying the data, however there are large no. of records that need to be shown on the jsp (>30k records). The time taken to fetch these 30k records (from SQL) in a single go by the controller and converting it to datatables on jsp is quite considertable.

Hence i would cut down on the time. I read there is the option to use server side with datatables, however the example given is of php.

Can someone help how it can be easily achieved with Servlets and java?

allan

The documentation for server-side processing with DataTables is available here. I'm afraid I'm not very experienced with Java myself, so there are no examples of server-side processing for DataTables.

Allan

SujitJ

Allan

I managed to write code in Java and its working now, the data is being pulled correctly using server side.
However now the filter is not working correctly on the column.
JS snippet

$(document).ready(function() {
    // Converting table to DataTable
    var table = $('.tableContent').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "dashboard",
            "data": {logic: 'LoadServerSideData'},
            "type": "POST"
        },
        "autoWidth": false,
        "pageLength": 50,
        dom : 'lBfrtip',
        buttons : [ {
            extend : 'csv',
            text : 'Export to CSV',
            exportOptions : {
                modifier : {
                    // DataTables core
                    order : 'index',  // 'current', 'applied', 'index',  'original'
                    page : 'all',      // 'all',     'current'
                    search : 'none'     // 'none',    'applied', 'removed'
                }
            }
        } ],
        "columnDefs" : [{
            "targets" : [ 0, 1, 2],
            "visible" : true,
            "searchable" : true
        }, {
            "targets" : [ 3, 4],
            "visible" : false,
            "searchable" : false
        }]
    });
    
    table.column(2).search('Abc', false, true, true).draw();
});

Earlier (before changing to server side) the same code was working and the data would be seen filtered only if Column(2) had 'Abc' text.

Can you help to resolve?

allan

Move the initial search into initComplete. You have to keep in mind that when using Ajax loaded data the initialisation of the DataTable is async.

Allan

SujitJ

Allan

Can you guide me to an example where a specific column can be obtained easily in initComplete to perform serach and then draw.
The example i have seen states to user this.api().columns() and then iterate over the columns until the desired column is reached and then perform search.

allan

initComplete: function () {
    table.column(2).search('Abc', false, true, true).draw();
}

should be all you need based on the above.

Allan

SujitJ

Tried the below, but it does add the filer. (There are no errors when seen from Developer Tools).

$(document).ready(function() {
    // Converting table to DataTable
    var table = $('.tableContent').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "dashboard",
            "data": {logic: 'LoadServerSideData'},
            "type": "POST"
        },
        "autoWidth": false,
        "pageLength": 50,
        dom : 'lBfrtip',
        buttons : [ {
            extend : 'csv',
            text : 'Export to CSV',
            exportOptions : {
                modifier : {
                    // DataTables core
                    order : 'index',  // 'current', 'applied', 'index',  'original'
                    page : 'all',      // 'all',     'current'
                    search : 'none'     // 'none',    'applied', 'removed'
                }
            }
        } ],
        "columnDefs" : [{
            "targets" : [ 0, 1, 2],
            "visible" : true,
            "searchable" : true
        }, {
            "targets" : [ 3, 4],
            "visible" : false,
            "searchable" : false
        }],
        "initComplete": function () {
            table.column(2).search('Abc', false, true, true).draw();
        }
    });

allan

but it does add the filer.

Does or doesn't? If it doesn't work, could you linke to a page showing the issue to I can try to help debug it please?

Thanks,
Allan

SujitJ

Sry for the typo. It does not work. Filter is not added

View Plunker

SujitJ

Sry for the typo. It does not work. Filter is not added

View Plunker

SujitJ

-

allan

"serverSide": true,

That means that all filtering would be done at the server-side. In the example you linked to it is always just loading static data with no filtering being performed which is why it isn't working.

Allan