Is it poss to initialize DataTables with data onload & keep pagination & other server side features

mikedevita

I have assumed support of an internal web app written with asp.net mvc 4, which is utilizing DataTables. I know that I can either set DataTables to use either client side or server side for the data. Everything was using the ajaxSource property to query for the table data on page load. This is quite slow as its essentially two renders that have to happen, so I opted to replace the ajaxSource property for the data property within datatables. I am JSON encoding the data beforehand in the MVC view. This worked fine for the simpler tables. However, I have a datatable on a page which allows the user to pick from a dropdown of years, to fetch older data using the fnReloadAjax plugin to call the datatables endpoint with the appropriate year to pull back the correct data.

Upon cursory examination, this works fine except the older datasets have quite a bit more data in them and I am running into issues where pagination will be helpful.

By moving from ajaxSource to data, i lose the ability to handle pagination server side to limit the older datasets. I'd like to know if its possible to preload the 'data' property and still utilize server side processing for the pagination and search functionality, and if it is are there any examples?

minhal

 $(document).ready(function () {
        $('#studentTable').DataTable({
            "ajax": {
                "url": "/StructuredImportTgts/GetData1",
                "type": "GET",
                "datatype": "json"
            },
            responsive: 'true',
            "bSort": false,
            dom: 'Bfrtip',
            buttons: [
                'copy', 'excel', 'pdf'
            ],
            "columns": [
                { "data": "PART_NO" },
                { "data": "LEVEL" },
                { "data": "PART_NO" },
                { "data": "PART_NAME" },
                { "data": "L1QTY" },
                { "data": "PL1" },
                { "data": "PL2" },
                { "data": "PL3" },
                { "data": "SupplierLocID" },
                { "data": "SupplierLocID" },
                { "data": "Discrepancies" },
                { "data": "Comments" }
            ]

           initComplete: function () { // After DataTable initialized
                this.api().columns([4]).every(function () {
                    /* use of [2] for third column.  Leave blank - columns() - for all.
                    Multiples? Use columns[0,1]) for first and second, e.g. */
                    var column = this;
                    var select = $('<select><option value=""/></select>')
                        .appendTo($('.datatable .dropdown .fifth').empty()) /* for multiples use .appendTo( $(column.header()).empty() ) or .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>')
                    });
                }); // this.api function
            } //initComplete function

        });
    });
    $(window).resize(function () {
        $('.datatable').removeAttr('style');
    });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

minhal

You can use this code as an example and hope this is what you are looking for. In this way you can have your filter feature plus pagination and search features while using the ajax source.