alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
98 lines (95 loc) • 3.57 kB
JavaScript
/**
* This pagination plug-in provides a `dt-tag select` menu with the list of the page
* numbers that are available for viewing.
*
* @name Select list
* @summary Show a `dt-tag select` list of pages the user can pick from.
* @author _jneilliii_
*
* @example
* $(document).ready(function() {
* $('#example').dataTable( {
* "sPaginationType": "listbox"
* } );
* } );
*/
$.fn.dataTableExt.oPagination.listbox = {
/*
* Function: oPagination.listbox.fnInit
* Purpose: Initalise dom elements required for pagination with listbox input
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* node:nPaging - the DIV which contains this pagination control
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnInit": function (oSettings, nPaging, fnCallbackDraw) {
var nInput = document.createElement('select');
var nPage = document.createElement('span');
var nOf = document.createElement('span');
nOf.className = "paginate_of";
nPage.className = "paginate_page";
if (oSettings.sTableId !== '') {
nPaging.setAttribute('id', oSettings.sTableId + '_paginate');
}
nInput.style.display = "inline";
nPage.innerHTML = "Page ";
nPaging.appendChild(nPage);
nPaging.appendChild(nInput);
nPaging.appendChild(nOf);
$(nInput).change(function (e) { // Set DataTables page property and redraw the grid on listbox change event.
window.scroll(0,0); //scroll to top of page
if (this.value === "" || this.value.match(/[^0-9]/)) { /* Nothing entered or non-numeric character */
return;
}
var iNewStart = oSettings._iDisplayLength * (this.value - 1);
if (iNewStart > oSettings.fnRecordsDisplay()) { /* Display overrun */
oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay() - 1) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;
fnCallbackDraw(oSettings);
return;
}
oSettings._iDisplayStart = iNewStart;
fnCallbackDraw(oSettings);
}); /* Take the brutal approach to cancelling text selection */
$('span', nPaging).bind('mousedown', function () {
return false;
});
$('span', nPaging).bind('selectstart', function () {
return false;
});
},
/*
* Function: oPagination.listbox.fnUpdate
* Purpose: Update the listbox element
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnUpdate": function (oSettings, fnCallbackDraw) {
if (!oSettings.aanFeatures.p) {
return;
}
var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; /* Loop over each instance of the pager */
var an = oSettings.aanFeatures.p;
for (var i = 0, iLen = an.length; i < iLen; i++) {
var spans = an[i].getElementsByTagName('span');
var inputs = an[i].getElementsByTagName('select');
var elSel = inputs[0];
if(elSel.options.length != iPages) {
elSel.options.length = 0; //clear the listbox contents
for (var j = 0; j < iPages; j++) { //add the pages
var oOption = document.createElement('option');
oOption.text = j + 1;
oOption.value = j + 1;
try {
elSel.add(oOption, null); // standards compliant; doesn't work in IE
} catch (ex) {
elSel.add(oOption); // IE only
}
}
spans[1].innerHTML = " of " + iPages;
}
elSel.value = iCurrentPage;
}
}
};