Issues with sDom after Customization of Pagination

shaji_vk

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.

allan

Please post a link to a test case as noted int he forum rules. If there is a problem with your custom pagination control, we will need to be able to see it to be able to offer any help.

Allan

shaji_vk

Hi 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 */

shaji_vk

Full Customization Code:
================

(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);

shaji_vk

and Below is the Javascript code for Initialization of DataTable:
========================================

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

That's a lot of code! I'll try to look at it in the next few days, but can't promise anything as its busy at the moment. It would be helpful if you could link to a test page showing the issue.

Allan