Bootstrap Datatable is not loading even after 10 minutes for 20000 rows

ujjwal29

Hi All,

I have implemented Bootstrap Datatable in every page in my application. I cannot move to Jquery Datatable right now. But One page having issue with Bootstrap datatable loading. If 100 rows coming it is loading less than 1 min But if data is coming 18000 for same method it is loading around 9-10 minute which is not acceptable from my client. Production data is huge , we faced this issue after delivery to production. Please help me out.

Please find below code.

var passdata = {
        SelectedWarrantyTypeID: $('#drpWarrantyType').val(),
    };

    $.ajax({
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        url: '../WarrantyProductRemoval/GetProductMappingList/',
        data: JSON.stringify(passdata),
        success: function (response) {
            $("#divProdData").show();
            $('#divbtnDelete').show();
            $("#tblProdMappingData").DataTable().destroy();
            $("#tblProdMappingData").find('tbody').empty();
           
            var data = response.lstProdMappingData;
            for (var i = 0; i < data.length; i++) {
                var row = "<tr>";
                row += "<td> <input id=ProdId" + data[i].ProdUniqueID + " type='checkbox' name='ProductId' class='check-all-child'  onchange=\"fnGetSelectedProdId('" + data[i].ProdUniqueID + "','" + data[i].ProdHierarchy + "')\"/>";
                row += "</td>";
                row += "<td>";
                row += data[i].ProdHierarchy;
                row += "</td>";
                row += "<td>";
                row += data[i].DepartmentDescription;
                row += "</td>";
                row += "<td>";
                row += data[i].SubDepartmentDescription;
                row += "</td>";
                row += "<td>";
                row += data[i].ClassDescription;
                row += "</td>";
                row += "</td>";
                row += "<td>";
                row += data[i].SubClassDescription;
                row += "</td>";
                row += "<td>";
                row += data[i].StyleDescription;
                row += "</td>";
                row += "</td>";
                row += "<td>";
                row += data[i].InsertedOn;
                row += "</td>";
                row += "<td>";
                row += data[i].CreatedOn;
                row += "</td>";
                row += "<td>";
                row += data[i].EffectiveDate;
                row += "</td>";
                row += "<td>";
                row += data[i].SalesPrice;
                row += "</td>";               
                row += "<td>";
                row += data[i].QtyOnHand;
                row += "</td>";
                row += "<td>";
                row += data[i].Vendor;
                row += "</td>";
                row += "<td>";
                row += data[i].Brand;
                row += "</td>";
                row += "<td>";
                row += data[i].UPC;
                row += "</td>";
                row += "<td>";
                row += data[i].Status;
                row += "</td>";
                row += "<td>";
                row += data[i].InsertType;
                row += "</td>";
                row += "</tr>";
                $('#tblProdMappingData tbody').append(row);
                //$('#tblProdMappingData tbody').css('background-color', 'red');
            }

            $("#tblProdMappingData").DataTable({
                "lengthMenu": [[100,200,500, 1000, -1], [100, 200, 500, 1000, "All"]],
                "sort": false,
                "deferRender": true,                
                "searching": false,
                'searchable': false,
                'orderable': false,
                scrollY:        "300px",
                scrollX:        true,
                scrollCollapse: true,
                paging:         true,
                columnDefs: [
                    { width: 350 }
                ],

                fixedColumns: true,
                //columnDefs: [{
                //    orderable: false
                //}],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [[1, 'asc']]
            });

        },
        error: function (data) {
            //$("#lblmsg").html("Error in data add")
            $(document.body).html(data.responseText);
        }
    });

kthorngren

I wonder if deferRender is actually working since Datatables is not performing the AJAX request. It seems to me the problem is you are building the table then initializing Datatables. I suspect deferRender would work if Datatables was performing the AJAX request.

Kevin

ujjwal29

Not getting you properly. Is there anyway to reduce rendering time to show 16k+ data into UI using Bootstrap data table. My team members are pushing me to use Jqdatatable while I am fan of Bootstrap data table. Please help me.

tangerine

I have implemented Bootstrap Datatable in every page in my application. I cannot move to Jquery Datatable right now.

Please explain what you think is the difference between "Bootstrap Datatable"
and "Jquery Datatable".

ujjwal29

Both are same but implemetation way it is different.

julija

With 20000 rows you shold definitely use server side and limit the set to whatever number you want.

kthorngren

Your code is performing an AJAX request then looping through the data to populate the table. Then it is initializing Datatable.

Take a look at the deferRender examples. You will see that Datatable is performing the AJAX request with deferRender. If you let Datatable build the table with deferRender then the table should be displayed faster.

Kevin

rduncecb

If you are actually using jQuery DataTable but with bootstrap styling; The amount of DOM modification going on there is most likely the cause of the slowness.
You are adding all the html for all rows and adding it to the DOM, you are then telling datatable to take the table and modify it for its needs which will then modify the DOM again.

You would be far better off defining the columns in the datatable config columns and supplying your raw json using (which appears to be in a usable format) with the ajax option. You will then be able to use deferRender. With the amount of rows you have creating the table will be very fast once the ajax call is finished. DataTables does all of the DOM creation/manipulation for you, all you supply is the JS to define/control the table and the data source.