Jquery.Datatable.js is taking time to render the records

Question

I have a MVC application and I am fetching 5000 records from the database and returns in the JSOn format format in the action and rendering a Jquery.DataTable.js version 1.9.0 grid. The application is returning the data with no delay but it is taking time to render in the grid. Below is the code

   $.ajax({
        url:   "http://locationhost/Mycontroller/myacton", type: "Get", contentType: "application/json; charset=utf-8",
        data: { 'param': param1, 'param2': param2,  },
        dataType: "json",

        success: function (data) {
            $('#DisableDiv').html("");
            var items = '';
            var rows = '';

                $('#divGrid').DataTable().fnClearTable();
                $('#divGrid').DataTable().fnDestroy();
                if (data.length > 0) {
                    $.each(data, function (i, item) {

                        rows = "<tr>........records......</tr>"

                        $('#divGrid tbody').append(rows);
                    });
                    table = $('#divGrid').DataTable({
                        "aoColumnDefs": [
                         {
                             'bSortable': false,
                             'aTargets': [0, 8],
                         }],
                        "aoColumns": [{ "bSortable": false }, null, null, null, null, null, { "sType": "currency" }, null, { "bSortable": false }],
                        "bPaginate": true,
                        "bInfo": true,
                        "bFilter": false,
                        "bLengthChange": true,
                        "sPaginationType": "full_numbers",
                        "iDisplayLength": 10
                    });
                    table.fnSort([[7, 'desc']]);
                }
                else {
                    $('#DisableDiv').html("No data available.");
                    $("#btnDownload").attr("href", "#");
                }


            }
        },
        error: function (data) {
            $('#DisableDiv').html("");
        }
    });

Your each loop is slow, you are calling append(), requestiong DOM at each iteration. Instead, concate a string inside each loop and use it as HTML markup once (outside the each loop). Or use `documentFragment` ([see](http://stackoverflow.com/questions/14203196/does-using-a-document-fragment-really-improve-performance)) to build table HTML markup. But the best would be to just send from server only relevant data to be displayed regarding current table pagination. This would imply to change server side code to handle any filtering parameter — A. Wolff, May 16 '16 at 11:29

score 0 · Answer 1 · answered May 16 '16 at 11:31

Server-side processing is best because when you render a large no of data set records client side it makes it slow if you want to see please follow below links in that case

http://datatables.net/usage/server-side

example (http://datatables.net/release-datatables/examples/data_sources/server_side.html).

Jquery.Datatable.js is taking time to render the records

1 Answers1