How to partially load data of datatable?

patreeeeek

Hello guys!
I have a datatable that loads 51,000+ data stored in a json file.

Is there any way to load the data partially so that the loading of the datatable will be faster.

Or do you guys have any suggestion on what I should do.

This is how I create my datatable.

$('#ticket-datatables').DataTable({
                    "dom": '<"toolbar">frtip',
                    "responsive": true,
                    "serverSide": true,
                    "ordering": false,
                    "scrollY": "300px",
                    "scrollCollapse": true,
                    "deferRender": true,
                    "ajax": "ticketList.json",
                    "aoColumns": [
                        {"mData": "ticketNumber"},
                        {"mData": "category"},
                        {"mData": "subcategory"},
                        {"mData": "status"},
                        {"mData": "requestedBy"},
                        {"mData": "ticketNumber",
                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                                $(nTd).html("<a class='linkColor' href='${pageContext.request.contextPath}/assignTicket?sender_assign=" + encodeURIComponent(sender) + "&smsc_assign="+encodeURIComponent(smsc)+"&ticketNumber_assign="+encodeURIComponent(oData.ticketNumber)+"'><span data-toggle='tooltip' title='Assign'><i class='ti-plus btn btn-simple btn-assign btn-icon' data-mode='assignTicket'></i></span></a>");
                            }
                        }
                    ],
                    initComplete: function () {
                        this.api().columns(3).every( function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo( $(column.footer()).empty() )
                                .on( 'change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );

                                    column
                                        .search( val ? '^'+val+'$' : '', true, false )
                                        .draw();
                                } );

                            column.data().unique().sort().each( function ( d, j ) {
                                select.append( '<option value="'+d+'">'+d+'</option>' )
                            } );
                        } );
                    },
                    language: {
                        "search": "_INPUT_",
                        searchPlaceholder: "Search records"
                    }     
                });

Thank you in advance!

kthorngren

You have "serverSide": true, set. What are you using for your server script, ie, ticketList.json"?

Your server script needs to support the communications described in the Server Side Processing doc:
https://datatables.net/manual/server-side

Kevin

patreeeeek

@kthorngren

Hi Kevin!

I don't really know how to use "serverSide": true. Yes I am using ticketList.json for my server script.

What should I do with this one?

colin

Hi @patreeeeek ,

This section of the FAQ also has some suggestions that may help,

Cheers,

Colin