DataTables with 800 lines gets pretty slow when we delete or add line by Internet Explorer

honangurgel

Below is the initialization of the DataTables objects:

 function prepareDataTable() {
        oTableR = $('table.data-table-r').dataTable({
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "bAutoWidth": false,
            "aoColumns": [{ "sClass": "" }, { "sClass": "" }, { "sClass": "" }, { "sClass": "" }, { "sClass": "" },
            { "sClass": "align-text-center align-center" }, { "sClass": "" },
            { "sClass": "align-text-center align-center" }, { "sClass": "align-text-center" }, { "sClass": "align-text-center" }]
        });

        oTableS = $('table.data-table-s').dataTable({
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "bAutoWidth": false,
            "aoColumns": [{ "sClass": "" }, { "sClass": "" }, { "sClass": "" }, { "sClass": "" }, { "sClass": "" },
            { "sClass": "align-text-center align-center" }, { "sClass": "" },
            { "sClass": "align-text-center align-center" }, { "sClass": "align-text-center" }, { "sClass": "align-text-center" }]
        });
    }

Adding a row in DataTables:

 oTable.fnAddData([
            //Hiddens
            '<input id="BoxItems' + type + "_" + rowIndex + '__Type" type="hidden" value="' + type + '" name="BoxItems' + type + '[' + rowIndex + '].Type"/>' +
            '<input id="BoxItems' + type + "_" + rowIndex + '__BoxId" type="hidden" value="' + result.BoxId + '" name="BoxItems' + type + '[' + rowIndex + '].BoxId"/>' +
            '<input id="BoxItems' + type + "_" + rowIndex + '__Id" type="hidden" value="' + result.BoxItemId + '" name="BoxItems' + type + '[' + rowIndex + '].Id"/>' +
            '<input id="BoxItems' + type + "_" + rowIndex + '__PreAlertId" type="hidden" value="' + result.PreAlertId + '" name="BoxItems' + type + '[' + rowIndex + '].PreAlertId"/>' +
            '<input id="BoxItems' + type + "_" + rowIndex + '__Index" type="hidden" value="' + rowIndex + '" name="BoxItems' + type + '[' + rowIndex + '].Index"/>' +
            '<input id="BoxItems' + type + "_" + rowIndex + '__Tag" type="hidden" value="' + result.Tag + '" name="BoxItems' + type + '[' + rowIndex + '].Tag"/>' +
            //Serial Number
            '<input id="BoxItems' + type + "_" + rowIndex + '__SerialNumber" type="hidden" value="" name="BoxItems' + type + '[' + rowIndex + '].SerialNumber"/>',
            //UPS Code
            result.UpsCode +
            '<input id="BoxItems' + type + "_" + rowIndex + '__UpsCode" type="hidden" value="' + result.UpsCode + '" name="BoxItems' + type + '[' + rowIndex + '].UpsCode"/>',
            //Customer PN
            result.CustomerPn +
            '<input id="BoxItems' + type + "_" + rowIndex + '__CustomerPn" type="hidden" value="' + result.CustomerPn + '" name="BoxItems' + type + '[' + rowIndex + '].CustomerPn"/>',
            //PPID
            (type == "S" ? '<input id="BoxItems' + type + "_" + rowIndex + '__Ppid" class="ppidVerification" type="text" value="' + result.Ppid + '" name="BoxItems' + type + '[' + rowIndex + '].Ppid" maxlength="50" data-row="' + rowIndex + '"/>' : result.Ppid) +
            secondReturnTag +
            '<input id="BoxItems' + type + "_" + rowIndex + '__Ppid" type="hidden" value="' + result.Ppid + '" name="BoxItems' + type + '[' + rowIndex + '].Ppid"/>' +
            '<input id="BoxItems' + type + "_" + rowIndex + '__SecondReturn" type="hidden" value="' + result.SecondReturn + '" name="BoxItems' + type + '[' + rowIndex + '].SecondReturn"/>' + 
            (type == "S" ? '<span class="field-validation-valid ppidValidation" data-valmsg-replace="true" data-valmsg-for="BoxItemsS[' + rowIndex + '].Ppid"></span>' : ''),
            //TAG
            '<span id="BoxItems' + type + "_" + rowIndex + '__TagLabel">' + result.Tag + '</span>',
            //Added
            '<label for="Yes">Yes</label>' +
            '<input id="BoxItems' + type + "_" + rowIndex + '__Added" type="hidden" name="BoxItems' + type + '[' + rowIndex + '].Added" value="True"/>',
            //Price
            price +
            '<input id="BoxItems' + type + "_" + rowIndex + '__Price" type="hidden" value="' + price + '" name="BoxItems' + type + '[' + rowIndex + '].Price"/>',
            //Received
            '<div id="BoxItems' + type + "_" + rowIndex + '__Toggle" class="toggle toggle-modern"  data-toggle-click="false" data-toggle-on="true" name="BoxItems' + type + '[' + rowIndex + '].Toggle"></div>' +
            '<input id="BoxItems' + type + "_" + rowIndex + '__Received" type="hidden" class="recivedClass" value="True" name="BoxItems' + type + '[' + rowIndex + '].Received"/>',
            //Warranty Lost
            warrantyLostHtml + ' <input id="BoxItems' + type + "_" + rowIndex + '__WarrantyLostReasonId" type="hidden" value="' + isWarrantyLost + '" name="BoxItems' + type + '[' + rowIndex + '].WarrantyLostReasonId"  data-camewithwarranty="' + result.WarrantyLostReason + '"/> ' +
            '<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="BoxItems' + type + '[' + rowIndex + '].WarrantyLostReasonId"></span>' +
            '<input id="BoxItems' + type + "_" + rowIndex + '__CameWithWarranty" type="hidden" value="' + (isWarrantyLost ? 'true' : 'false') + '" name="BoxItems' + type + '[' + rowIndex +  '].CameWithWarranty"> ' ,

            //Actions
            '<a  id="BoxItems' + type + "_" + rowIndex + '__Delete"  class="iconTable icon-remove delete-boxItem" data-type="' + type + '" style="display: block; margin-top: 6px; text-align: center; cursor: pointer" title="Remove"></a>'
        ], true);

Delete a row in DataTables:

   function setDeleteItemButtonBehavior() {
        $(document).on('click', '.delete-boxItem', function (e) {
            e.preventDefault();
            var type = $(this).data('type');
            var oTable = type == "R" ? oTableR : oTableS;
            
            if (oTable.fnGetData().length > 0) {
                var nRow = $(this).closest("tr")[0];
                oTable.fnDeleteRow(nRow, null, true);
                //oTable.fnDeleteRow(nRow, null, false);
                //oTable.fnDraw();
                updateReceivedItemLabelWhenRemove();
                controlDeleteItem(type, oTable);
                var deleteIndex = parseInt($(nRow).find("input[name*='Index']").val());
                var tagRemove = parseInt($(nRow).find("input[name*='Tag']").val());
                updateTagItemOrder(type, deleteIndex, tagRemove, true);
            }
        });
    }

When we try to include a line or remove we have great loss of performance and the own browse reports that it has a script with great delay running. Could someone give me a suggestion of improvement? We cannot mount the table via JSON due to the customizations we have in the table.

honangurgel

The version used is the 1.9.4.

allan

1.9.4 is no longer supported. 1.10.18 is the current release version of DataTables.

Allan