Add paginate option to tables close #18
This commit is contained in:
Brian Miyaji
@@ -9,8 +9,9 @@ function viewport() {
|
||||
|
||||
(function($) {
|
||||
|
||||
/* Countdown */
|
||||
var sp_responsive_activated = false;
|
||||
|
||||
/* Countdown */
|
||||
$("[data-countdown]").each(function() {
|
||||
var $this = $(this), finalDate = $(this).data('countdown');
|
||||
$this.countdown(finalDate, function(event) {
|
||||
@@ -21,29 +22,135 @@ function viewport() {
|
||||
});
|
||||
});
|
||||
|
||||
/* Data Tables */
|
||||
/* API method to get paging information */
|
||||
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
|
||||
{
|
||||
return {
|
||||
"iStart": oSettings._iDisplayStart,
|
||||
"iEnd": oSettings.fnDisplayEnd(),
|
||||
"iLength": oSettings._iDisplayLength,
|
||||
"iTotal": oSettings.fnRecordsTotal(),
|
||||
"iFilteredTotal": oSettings.fnRecordsDisplay(),
|
||||
"iPage": oSettings._iDisplayLength === -1 ?
|
||||
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
|
||||
"iTotalPages": oSettings._iDisplayLength === -1 ?
|
||||
0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
|
||||
};
|
||||
}
|
||||
|
||||
if (viewport().width > 640) {
|
||||
$(".sp-sortable-table").each(function() {
|
||||
/* Style pagination control */
|
||||
$.extend( $.fn.dataTableExt.oPagination, {
|
||||
"sportspress": {
|
||||
"fnInit": function( oSettings, nPaging, fnDraw ) {
|
||||
var oLang = oSettings.oLanguage.oPaginate;
|
||||
var fnClickHandler = function ( e ) {
|
||||
e.preventDefault();
|
||||
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
|
||||
fnDraw( oSettings );
|
||||
}
|
||||
};
|
||||
|
||||
$(nPaging).addClass('pagination').append(
|
||||
'<table class="sp-data-table sp-pagination" role="navigation">'+
|
||||
'<tfoot><tr>' +
|
||||
'<td class="prev disabled"><a href="#">« '+oLang.sPrevious+'</a></td>'+
|
||||
'<td class="next disabled"><a href="#">'+oLang.sNext+' » </a></td>'+
|
||||
'</tr></tfoot>' +
|
||||
'</table>'
|
||||
);
|
||||
var els = $('a', nPaging);
|
||||
$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
|
||||
$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
|
||||
},
|
||||
|
||||
"fnUpdate": function ( oSettings, fnDraw ) {
|
||||
var iListLength = 5;
|
||||
var oPaging = oSettings.oInstance.fnPagingInfo();
|
||||
var an = oSettings.aanFeatures.p;
|
||||
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
|
||||
|
||||
if ( oPaging.iTotalPages < iListLength) {
|
||||
iStart = 1;
|
||||
iEnd = oPaging.iTotalPages;
|
||||
}
|
||||
else if ( oPaging.iPage <= iHalf ) {
|
||||
iStart = 1;
|
||||
iEnd = iListLength;
|
||||
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
|
||||
iStart = oPaging.iTotalPages - iListLength + 1;
|
||||
iEnd = oPaging.iTotalPages;
|
||||
} else {
|
||||
iStart = oPaging.iPage - iHalf + 1;
|
||||
iEnd = iStart + iListLength - 1;
|
||||
}
|
||||
|
||||
for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
|
||||
// Remove the middle elements
|
||||
$('td:gt(0)', an[i]).filter(':not(:last)').remove();
|
||||
|
||||
// Add the new cells and their event handlers
|
||||
for ( j=iStart ; j<=iEnd ; j++ ) {
|
||||
sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
|
||||
$('<td '+sClass+'><a href="#">'+j+'</a></td>')
|
||||
.insertBefore( $('td:last', an[i])[0] )
|
||||
.bind('click', function (e) {
|
||||
e.preventDefault();
|
||||
oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
|
||||
fnDraw( oSettings );
|
||||
});
|
||||
}
|
||||
|
||||
// Add / remove disabled classes from the static elements
|
||||
if ( oPaging.iPage === 0 ) {
|
||||
$('td:first', an[i]).addClass("disabled");
|
||||
} else {
|
||||
$('td:first', an[i]).removeClass("disabled");
|
||||
}
|
||||
|
||||
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
|
||||
$('td:last', an[i]).addClass("disabled");
|
||||
} else {
|
||||
$('td:last', an[i]).removeClass("disabled");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
/* Data Tables */
|
||||
$(".sp-data-table").each(function() {
|
||||
sortable = viewport().width > 640 && $(this).hasClass("sp-sortable-table");
|
||||
paginated = $(this).hasClass("sp-paginated-table");
|
||||
display_length = parseInt($(this).attr("data-sp-rows"));
|
||||
if ( display_length == undefined || isNaN( display_length ) ) display_length = 10;
|
||||
if ( $(this).find("tbody tr").length <= display_length ) paginated = false;
|
||||
if ( sortable || paginated ) {
|
||||
$(this).dataTable({
|
||||
"aaSorting": [],
|
||||
"bAutoWidth": false,
|
||||
"bFilter": false,
|
||||
"bInfo": false,
|
||||
"bPaginate": false,
|
||||
"bSort": true,
|
||||
"bPaginate": paginated,
|
||||
"bLengthChange": false,
|
||||
"sPaginationType": "sportspress",
|
||||
"iDisplayLength": display_length,
|
||||
"bSort": sortable,
|
||||
"oLanguage": {
|
||||
"oAria": {
|
||||
"sSortAscending": "",
|
||||
"sSortDescending": ""
|
||||
},
|
||||
"oPaginate": {
|
||||
"sPrevious": localized_strings.previous,
|
||||
"sNext": localized_strings.next,
|
||||
}
|
||||
},
|
||||
"aoColumnDefs": [
|
||||
{ "sType": "numeric", "aTargets": [ 0 ] },
|
||||
]
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
@@ -54,30 +161,30 @@ function viewport() {
|
||||
* Credit: ZURB
|
||||
* Original: https://github.com/zurb/responsive-tables
|
||||
*/
|
||||
|
||||
var switched = false;
|
||||
var updateTables = function() {
|
||||
if ((viewport().width <= 640) && !switched ){
|
||||
switched = true;
|
||||
var sp_responsive_activated = true;
|
||||
var sp_responsive_switched = false;
|
||||
var sp_update_tables = function() {
|
||||
if ((viewport().width <= 640) && !sp_responsive_switched ){
|
||||
sp_responsive_switched = true;
|
||||
$(".sp-responsive-table").each(function(i, element) {
|
||||
splitTable($(element));
|
||||
sp_split_table($(element));
|
||||
});
|
||||
return true;
|
||||
}
|
||||
else if (switched && (viewport().width > 640)) {
|
||||
switched = false;
|
||||
else if (sp_responsive_switched && (viewport().width > 640)) {
|
||||
sp_responsive_switched = false;
|
||||
$(".sp-responsive-table").each(function(i, element) {
|
||||
unsplitTable($(element));
|
||||
sp_unsplit_table($(element));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$(window).load(updateTables);
|
||||
$(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for
|
||||
$(window).on("resize", updateTables);
|
||||
$(window).load(sp_update_tables);
|
||||
$(window).on("redraw",function(){sp_responsive_switched=false;sp_update_tables();}); // An event to listen for
|
||||
$(window).on("resize", sp_update_tables);
|
||||
|
||||
|
||||
function splitTable(original)
|
||||
function sp_split_table(original)
|
||||
{
|
||||
original.wrap("<div class='sp-responsive-table-wrapper' />");
|
||||
|
||||
@@ -89,16 +196,16 @@ function viewport() {
|
||||
copy.wrap("<div class='sp-pinned-table' />");
|
||||
original.wrap("<div class='scrollable' />");
|
||||
|
||||
setCellHeights(original, copy);
|
||||
sp_set_cell_heights(original, copy);
|
||||
}
|
||||
|
||||
function unsplitTable(original) {
|
||||
function sp_unsplit_table(original) {
|
||||
original.closest(".sp-responsive-table-wrapper").find(".sp-pinned-table").remove();
|
||||
original.unwrap();
|
||||
original.unwrap();
|
||||
}
|
||||
|
||||
function setCellHeights(original, copy) {
|
||||
function sp_set_cell_heights(original, copy) {
|
||||
var tr = original.find('tr'),
|
||||
tr_copy = copy.find('tr'),
|
||||
heights = [];
|
||||
@@ -122,7 +229,6 @@ function viewport() {
|
||||
|
||||
|
||||
/* Google Maps */
|
||||
|
||||
function initialize_google_maps() {
|
||||
$maps = $('.sp-google-map');
|
||||
$maps.each(function() {
|
||||
|
||||
Reference in New Issue
Block a user