Performance issue about 'full_numbers' pagination

xioxu

I'm using datatables 1.9.0, It is very well, and saved many time of my team.
But we encountered a issue during performance testing, the table loading very slow if the records count is big.
I debugged the source code and found 'fnUpdate' method raised this issue, since this method need to generate 'a' link for pagination, but there are some bad code, this method will generate many hidden 'a' link if there are a lot of data , it means the DOM will dynamically load many html tag during loading table.
So I changed this method to fix the bug, I just added a data attribute to 'a' link, and use it to indicate the pagenumber.

xioxu

The full code shows in below:

/*
* Function: oPagination.full_numbers.fnUpdate
* Purpose: Update the list of page buttons shows
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* function:fnCallbackDraw - draw function to call on page change
*/
"fnUpdate": function (oSettings, fnCallbackDraw) {
if (!oSettings.aanFeatures.p) {
return;
}

var iPageCount = DataTable.ext.oPagination.iFullNumbersShowPages;
var iPageCountHalf = Math.floor(iPageCount / 2);
var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
var sList = "";
var iStartButton, iEndButton, i, iLen;
var oClasses = oSettings.oClasses;
var anButtons, anStatic, nPaginateList;
var an = oSettings.aanFeatures.p;
var pList = new Array();
var fnBind = function (j) {
oSettings.oApi._fnBindAction(this, { "page": $(this).data('startindex') + iStartButton - 1 }, function (e) {
/* Use the information in the element to jump to the required page */
oSettings.oApi._fnPageChange(oSettings, e.data.page);
fnCallbackDraw(oSettings);
e.preventDefault();
});
};

/* Pages calculation */
if (iPages < iPageCount) {
iStartButton = 1;
iEndButton = iPages;
}
else if (iCurrentPage <= iPageCountHalf) {
iStartButton = 1;
iEndButton = iPageCount;
}
else if (iCurrentPage >= (iPages - iPageCountHalf)) {
iStartButton = iPages - iPageCount + 1;
iEndButton = iPages;
}
else {
iStartButton = iCurrentPage - Math.ceil(iPageCount / 2) + 1;
iEndButton = iStartButton + iPageCount - 1;
}

if (iPages == 0) {
$('#' + oSettings.sTableId + '_paginate').css("display", "none");
}
else {
$('#' + oSettings.sTableId + '_paginate').css("display", "");
}

$('#' + oSettings.sTableId + '_previous').attr('disabled', iCurrentPage <= 1);
$('#' + oSettings.sTableId + '_previous').attr('class', oClasses.sPageButton + " " + (iCurrentPage <= 1 ? 'previousDisabled' : oClasses.sPagePrevious));
$('#' + oSettings.sTableId + '_next').attr('disabled', iCurrentPage >= iPages);
$('#' + oSettings.sTableId + '_next').attr('class', oClasses.sPageButton + " " + (iCurrentPage >= iPages ? 'previousDisabled' : oClasses.sPageNext));

/* Build the dynamic list */
for (i = iStartButton; i <= iEndButton; i++) {
pList.push(i);
}

for (var i = 0; i < pList.length; i++) {
if (pList.length >= 7 && iPages > 7) {
iStartButton = 1;
iEndButton = iPages;
if (i == 0) {
sList += (iCurrentPage !== pList[i]) ?
'1' :
'1';
continue;
}

if (i == 1) {
// for (var j = 2; j < pList[i]; j++) {
// sList += '' + j + '';
// }

if (pList[i] - 1 > 1) {
sList += '...';
continue;
}
}

if (i == 5) {
if (iPages - pList[i] > 1) {
sList += '...';
continue;
}
}

if (i == 6) {
// if (iPages > pList[i]) {
// for (var j = pList[i]; j < iPages; j++) {
// sList += '' + j + '';
// }
// }

sList += (iCurrentPage !== pList[i]) ?
'' + iPages + '' :
'' + iPages + '';
continue;
}
}

sList += (iCurrentPage !== pList[i]) ?
'' + oSettings.fnFormatNumber(pList[i]) + '' :
'' + oSettings.fnFormatNumber(pList[i]) + '';
}

/* Loop over each instance of the pager */
for (i = 0, iLen = an.length; i < iLen; i++) {
if (an[i].childNodes.length === 0) {
continue;
}

/* Build up the dynamic list forst - html and listeners */
$('span:eq(0)', an[i])
.html(sList)
.children('a').each(fnBind);

/* Update the premanent botton's classes */
anButtons = an[i].getElementsByTagName('a');
anStatic = [
anButtons[0], anButtons[1],
anButtons[anButtons.length - 2], anButtons[anButtons.length - 1]
];

$(anStatic).removeClass(oClasses.sPageButton + " " + oClasses.sPageButtonActive + " " + oClasses.sPageButtonStaticDisabled);
$([anStatic[0], anStatic[1]]).addClass(
(iCurrentPage == 1) ?
oClasses.sPageButtonStaticDisabled :
oClasses.sPageButton
);
$([anStatic[2], anStatic[3]]).addClass(
(iPages === 0 || iCurrentPage === iPages || oSettings._iDisplayLength === -1) ?
oClasses.sPageButtonStaticDisabled :
oClasses.sPageButton
);
}
}