Datatable is not processing just over 12k entries on the client side

rp

I am using datatable and got the server returned just over 12k, but it is not getting populated in the client.

allan

Have you read the FAQ about this?

Can you link to the page, as per the forum rules, so we can try to debug it.

Allan

rp

var circuitsTable;
var availableCircuits;
$(document).ready(function() {
document.title = 'Circuit Report';

availableCircuits = [];
<c:forEach var="circuit" items="${circuitList}">
     availableCircuits.push('<c:out value="${circuit}"/>');
</c:forEach>

$( "#circuitIdSearchString" ).autocomplete({
    source: availableCircuits,
    minLength: 0,
    minChars: 0,
    max: 12,
    autoFill: true,
    mustMatch: true,
    matchContains: false,
    scrollHeight: 220
    }).on('focus', function(event) {
    var self = this;
    if ($("#circuitIdSearchString").val() === "" ) {
        $(self).autocomplete( "search", "");
    }   
  });


circuitsTable = $('#circuitsTable').dataTable({
    "bJQueryUI": true,
    "iDisplayLength": 25,
    "aaSorting": [[ 0, "asc" ]],
    "oLanguage": {"sSearch": "Filter: "},
    "sPaginationType": "full_numbers",
    "sDom": 'RT<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
    "oTableTools": {
        "aButtons": [  {"sExtends": "print", "fnClick": function ( nButton, oConfig, oFlash ) {
                    printFunction();
                }}, "xls", {"sExtends": "pdf", "sPdfOrientation": "landscape", "sPdfMessage": "Circuit Report"}],
        "sSwfPath": "/webclient/common/swf/copy_csv_xls_pdf.swf"
    }
});

$("#circuitReportForm").submit(function() {
    getCircuits();
    return false;
});

});

function printFunction ()
{
$("#circuitsTableWrapper").printThis();
}

function processGetCircuitTypesResult(ctypes) {
$.each(ctypes, function(i, ctype) {
$('#circuitTypeId').append($("<option/>", {value: ctype.circuitTypeId, text: ctype.circuitTypeName}));
});
document.body.style.cursor = 'auto';

}

function validateCircuitReportForm() {
return true;
}

function getCircuits() {
if (validateCircuitReportForm()) {
var formVars = $("#circuitReportForm").serialize();
formVars = formVars.substring(0, formVars.indexOf("&circuitsTable_length"));
var uri = "/topo/CircuitReportManageAction.do?method=getCircuits&" + formVars;
$.getJSON(uri, function(data) {processGetCircuitsResult(data);});

    document.body.style.cursor = 'wait';

}

}

function processGetCircuitsResult(circuits) {
circuitsTable.fnClearTable();

$("#circuitsTableWrapper").show();

$.each(circuits, function(i, circuit) {
    var plink = '<a target="_blank" href="/config/InvokeModifyProjectForm.do?method=modifyProjectFrmPreLoad&selectedProjectID=' + circuit.projectID + '">' + circuit.projectID + '</a>';

    var waveArray = circuit.wavelengthNames.split(",");
    var wlink = "";
    if (waveArray.length > 0) {
        $.each(waveArray, function(j, wave) {
            wlink += '<a style="margin-left:5px;" target="_blank" href="/topo/azWavelengthViewAction.do?method=filterWavelengthsWithPreloadedCriteria&isFilterView=true&wavelengthName=' + wave + '">&nbsp;' + wave + '</a>';
            wlink +=  '<br>';               
        });                      
    }

    var routesHtml = "";
    if (circuit.routeNames != "") {
        var wavRouteArray = circuit.routeNames.split("-");

        if (wavRouteArray.length > 0) {
            $.each(wavRouteArray, function(j, waveRoute) {
                var routeArray = waveRoute.split(",");
                if (routeArray.length > 0) {
                    routesHtml += '<div class="routesAccordion"><h4>' + routeArray[0] + '...' + routeArray[routeArray.length - 1] + '</h4>';
                    routesHtml += '<div><p>';
                    $.each(routeArray, function(j, route) {
                        routesHtml += '<a style="margin-left:5px;" target="_blank" href="/config/routeDetailTable.do?routeName=' + route + '">&nbsp;' + route + '</a>';
                    });            
                    routesHtml += '</p></div>';
                    routesHtml += '</div>';
                }
            });
        }
    }


     circuitsTable.dataTable().fnAddData([circuit.circuitName,
                                         circuit.aendSite,
                                         circuit.zendSite,
                                         circuit.circuitType,
                                         circuit.aendMux,
                                         circuit.aendMuxCircuitType,
                                         circuit.aendMux2,
                                         circuit.aendMux2CircuitType,
                                         circuit.aendRing,
                                         circuit.aendSequence,
                                         circuit.circuitRate,
                                         circuit.fiberType,
                                         circuit.circuitState,
                                         plink,
                                         circuit.notes,
                                         wlink,                                               
                                         routesHtml]);
});

// init the accordions
$( ".routesAccordion" ).accordion({ header: "h4",
                                    heightStyle: "content",
                                    active: false,
                                    collapsible: true
});

// required because table was initially hidden by wrapper div
var ttInstances = TableTools.fnGetMasters();
for (i in ttInstances) {
    if (ttInstances[i].fnResizeRequired()) 
        ttInstances[i].fnResizeButtons();
}
document.body.style.cursor = 'auto';

}

</script>
</head>

<body>

allan

It looks like you are using the legacy fnAddData method inside a loop. That is going to be terrible for performance as it will redraw the table on every loop. I would suggest using the row.add() method and then calling draw() once your loop has finished.

Allan

p.s. the guide for highlighting code is linked at the bottom of the reply box

rp

Thank you, so much. It worked.