Issues with sDom after Customization of Pagination
Issues with sDom after Customization of Pagination
Hi All,
I am new to DataTable. After gone through samples(from DataTable site) and DT Forums, I am able to create my own Pagination. But the problem is I am not able to render the pagination at Top and bottom of the table. To render the Pagination, I am using the template as "sDom":"<'top'p>r<'bottom'p>". But still they are rendering side by at top right corner instead of one at top and another and bottom of the table. Please Help me in resolve this issue.
I am new to DataTable. After gone through samples(from DataTable site) and DT Forums, I am able to create my own Pagination. But the problem is I am not able to render the pagination at Top and bottom of the table. To render the Pagination, I am using the template as "sDom":"<'top'p>r<'bottom'p>". But still they are rendering side by at top right corner instead of one at top and another and bottom of the table. Please Help me in resolve this issue.
This discussion has been closed.
Replies
Allan
Below is the code for the customization of Pagination.
///* Customized Pagination - Start */
$.fn.dataTableExt.oPagination.cst_four_button = {
"fnInit": function (oSettings, nPaging, fnCallbackDraw) {
var fnClickHandler = function (e) {
if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
fnCallbackDraw(oSettings);
}
};
$(nPaging).append(' ');
$(nPaging).append('');
$(nPaging).append(' ');
var els = $('a', nPaging);
var prev = els[0], next = els[1];
oSettings.oApi._fnBindAction(prev, { action: "previous" }, fnClickHandler);
oSettings.oApi._fnBindAction(next, { action: "next" }, fnClickHandler);
if (!oSettings.aanFeatures.p) {
nPaging.id = 'cst_' + oSettings.sTableId + '_pagenate';
prev.id = 'cst_' + oSettings.sTableId + '_previous';
next.id = 'cst_' + oSettings.sTableId + '_next';
}
},
"fnUpdate": function (oSettings, fnCallbackDraw) {
if (!oSettings.aanFeatures.p) {
return;
}
var an = oSettings.aanFeatures.p;
var sList = '';
var sTotalRecCount = oSettings.fnFormatNumber(oSettings.fnRecordsDisplay()) + ' results ';
var iPageCountHalf = Math.floor(iPageCount / 2);
var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
var iStartButton, iEndButton, iPageCount = 5;
var iLen = 0;
var fnBind = function (j) {
oSettings.oApi._fnBindAction(this, { "page": j + 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();
});
};
iPageCountHalf = Math.floor(iPageCount / 2);
iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
//Calculate the pages and correponding buttons
if (oSettings._iDisplayLength === -1) {
iStartButton = 1;
iEndButton = 1;
iCurrentPage = 1;
}
else 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;
}
//Generate the Buttons
for (i = iStartButton; i <= iEndButton; i++) {
sList += (i == iCurrentPage) ? '' + oSettings.fnFormatNumber(i) + '' : '' + oSettings.fnFormatNumber(i) + ''
}
//Update the spans
for (i = 0, iLen = an.length; i < iLen; i++) {
var nNode = an[i];
if (!nNode.hasChildNodes()) {
continue;
}
$('span:eq(1)', nNode).html(sList).children('a').each(fnBind);
$('span:eq(0)', nNode).html(sTotalRecCount);
}
}
};
///* Customized Pagination - End */
================
(function (window, document, $, undefined) {
$.fn.dataTableExt.oApi.fnLengthChange = function (oSettings, iDisplay) {
oSettings._iDisplayLength = iDisplay;
oSettings.oApi._fnCalculateEnd(oSettings);
/* If we have space to show extra rows (backing up from the end point - then do so */
if (oSettings._iDisplayEnd == oSettings.aiDisplay.length) {
oSettings._iDisplayStart = oSettings._iDisplayEnd - oSettings._iDisplayLength;
if (oSettings._iDisplayStart < 0) {
oSettings._iDisplayStart = 0;
}
}
if (oSettings._iDisplayLength == -1) {
oSettings._iDisplayStart = 0;
}
oSettings.oApi._fnDraw(oSettings);
};
$.fn.dataTable.LengthLinks = function (oSettings) {
var container = $('').addClass(oSettings.oClasses.sLength);
var lastLength = -1;
var draw = function () {
// No point in updating - nothing has changed
if (oSettings._iDisplayLength === lastLength) {
return;
}
var menu = oSettings.aLengthMenu;
var lang = menu.length === 2 && $.isArray(menu[0]) ? menu[1] : menu;
var lens = menu.length === 2 && $.isArray(menu[0]) ? menu[0] : menu;
var out = $.map(lens, function (el, i) {
return el == oSettings._iDisplayLength ?
'' + lang[i] + '' :
'' + lang[i] + '';
});
if (menu[0].length == 0) {
$(container).css('display', 'none');
}
else
container.html(oSettings.oLanguage.sLengthMenu.replace('_MENU_', out.join(' ')));
lastLength = oSettings._iDisplayLength;
};
// API, so the feature wrapper can return the node to insert
this.container = container;
// Update on each draw
oSettings.aoDrawCallback.push({
"fn": function () {
draw();
},
"sName": "PagingControl"
});
// Listen for events to change the page length
container.on('click', 'a', function (e) {
e.preventDefault();
$(this).siblings('a').removeClass('selected').end().addClass('selected');
oSettings.oInstance.fnLengthChange(parseInt($(this).attr('data-length'), 10));
});
};
// Subscribe the feature plug-in to DataTables, ready for use
$.fn.dataTableExt.aoFeatures.push({
"fnInit": function (oSettings) {
var l = new $.fn.dataTable.LengthLinks(oSettings);
return l.container[0];
},
"cFeature": "L",
"sFeature": "LengthLinks"
});
$.fn.dataTableExt.oJUIClasses.sLength = 'pagerDetail';
/* Customized Pagination - Start */
$.fn.dataTableExt.oPagination.hp_four_button = {
"fnInit": function (oSettings, nPaging, fnCallbackDraw) {
var fnClickHandler = function (e) {
if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
fnCallbackDraw(oSettings);
}
};
$(nPaging).append(' ');
$(nPaging).append('');
$(nPaging).append(' ');
var els = $('a', nPaging);
var prev = els[0], next = els[1];
oSettings.oApi._fnBindAction(prev, { action: "previous" }, fnClickHandler);
oSettings.oApi._fnBindAction(next, { action: "next" }, fnClickHandler);
if (!oSettings.aanFeatures.p) {
nPaging.id = 'cst_' + oSettings.sTableId + '_pagenate';
prev.id = 'cst_' + oSettings.sTableId + '_previous';
next.id = 'cst_' + oSettings.sTableId + '_next';
}
},
"fnUpdate": function (oSettings, fnCallbackDraw) {
if (!oSettings.aanFeatures.p) {
return;
}
var an = oSettings.aanFeatures.p;
var sList = '';
var sTotalRecCount = oSettings.fnFormatNumber(oSettings.fnRecordsDisplay()) + ' results ';
var iPageCountHalf = Math.floor(iPageCount / 2);
var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
var iStartButton, iEndButton, iPageCount = 5;
var iLen = 0;
var fnBind = function (j) {
oSettings.oApi._fnBindAction(this, { "page": j + 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();
});
};
iPageCountHalf = Math.floor(iPageCount / 2);
iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
//Calculate the pages and correponding buttons
if (oSettings._iDisplayLength === -1) {
iStartButton = 1;
iEndButton = 1;
iCurrentPage = 1;
}
else 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;
}
//Generate the Buttons
for (i = iStartButton; i <= iEndButton; i++) {
sList += (i == iCurrentPage) ? '' + oSettings.fnFormatNumber(i) + '' : '' + oSettings.fnFormatNumber(i) + ''
}
//Update the spans
for (i = 0, iLen = an.length; i < iLen; i++) {
var nNode = an[i];
if (!nNode.hasChildNodes()) {
continue;
}
$('span:eq(1)', nNode).html(sList).children('a').each(fnBind);
$('span:eq(0)', nNode).html(sTotalRecCount);
}
}
};
///* Customized Pagination - End */
})(window, document, jQuery);
========================================
jQuery('div#ResultPanel table.dataTable').dataTable({
"bProcessing":true,
"bFilter": false,
"oLanguage": {
"sLengthMenu": "Results per page: _MENU_",
"sProcessing": "Please wait - loading..."
},
"bSort":true,
"bSortClasses": true,
"sDom": '<"top"Lp> r <"bottom"p>',
"sPaginationType": "hp_four_button",
"aLengthMenu": data, /* We have created this varibale from back-end and inject into javascript */
"iDisplayLength": displayLength, /* We have created this varibale from back-end and inject into javascript */
"bPaginate": true,
"bJQueryUI": true,
"bServerSide": true,
"bDestroy": true,
"sAjaxSource": "DataServices.asmx/GetData",
"bDeferRender": true,
"fnServerParams": function (aoData) {
aoData.push({ "name": "iParticipant", "value": "All" },
{ "name": "sPageType", "value": "doctype" },
{"name":"typeColumnRequired","value":typeColumnRequired},
{"name":"lang","value":lang},
{"name":"reg","value":reg}
);
},
"fnServerData": function (sSource, aoData, fnCallback) {
jQuery.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success":
function (msg) {
var json = msg.d;
fnCallback(json);
jQuery('div#ResultPanel table.dataTable').show();
}
});
},
"aaSorting": [[0, "desc"], [1, "desc"], [2, "desc"]],
"aoColumns": aoColumns,
"fnPreDrawCallback": function () {
$('div#ResultPanel table.dataTable').hide();
},
"fnDrawCallback": function () {
$('div#ResultPanel table.dataTable').show();
},
"fnInitComplete": function () {
}
}
Allan