Add paginate option to tables close #18

assets/css/sportspress.css

@@ -32,6 +32,40 @@
 	width: auto;
 }
 
+/* Pagination */
+.sp-paginated-table {
+	margin-bottom: 0 !important;
+}
+.sp-pagination {
+	margin-top: 0 !important;
+}
+.sp-pagination tfoot tr td {
+	text-align: center;
+	cursor: pointer;
+	opacity: 0.5;
+}
+.sp-pagination tfoot tr td.prev {
+	text-align: left;
+}
+.sp-pagination tfoot tr td.next {
+	text-align: right;
+}
+.sp-pagination tfoot tr td a {
+	cursor: inherit;
+}
+.sp-pagination tfoot tr td.active {
+	opacity: 1;
+	cursor: default;
+}
+.sp-pagination tfoot tr td.disabled {
+	opacity: 0;
+	cursor: default;
+}
+.widget .sp-pagination tfoot tr td.prev,
+.widget .sp-pagination tfoot tr td.next {
+	text-align: center;
+}
+
 /* Events Calendar */
 .sp-event-calendar tbody td, .sp-event-calendar thead th {
 	text-align: center;

assets/js/sportspress.js

@@ -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) {
+	/* Style pagination control */
-		$(".sp-sortable-table").each(function() {
+	$.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="#">&laquo; '+oLang.sPrevious+'</a></td>'+
+		                    '<td class="next disabled"><a href="#">'+oLang.sNext+' &raquo; </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,
+				"bPaginate": paginated,
-				"bSort": true,
+				"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 sp_responsive_activated = true;
-	var switched = false;
+	var sp_responsive_switched = false;
-	var updateTables = function() {
+	var sp_update_tables = function() {
-	if ((viewport().width <= 640) && !switched ){
+	if ((viewport().width <= 640) && !sp_responsive_switched ){
-	  switched = true;
+	  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)) {
+	else if (sp_responsive_switched && (viewport().width > 640)) {
-	  switched = false;
+	  sp_responsive_switched = false;
 	  $(".sp-responsive-table").each(function(i, element) {
-	    unsplitTable($(element));
+	    sp_unsplit_table($(element));
 	  });
 	}
 	};
 
-	$(window).load(updateTables);
+	$(window).load(sp_update_tables);
-	$(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for
+	$(window).on("redraw",function(){sp_responsive_switched=false;sp_update_tables();}); // An event to listen for
-	$(window).on("resize", updateTables);
+	$(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() {

includes/admin/settings/class-sp-settings-events.php

@@ -44,7 +44,7 @@ class SP_Settings_Events extends SP_Settings_Page {
 			array(
 				'title' => __( 'Number of Teams', 'sportspress' ),
 				'id' 		=> 'sportspress_event_num_teams',
-				'css' 		=> 'width:50px;',
+				'class' 	=> 'small-text',
 				'default'	=> '2',
 				'type' 		=> 'number',
 				'custom_attributes' => array(
@@ -82,6 +82,31 @@ class SP_Settings_Events extends SP_Settings_Page {
 
 			array( 'type' => 'sectionend', 'id' => 'event_options' ),
 
+			array( 'title' => __( 'Calendars', 'sportspress' ), 'type' => 'title', 'id' => 'calendar_options' ),
+
+			array(
+				'title'     => __( 'Pagination', 'sportspress' ),
+				'desc' 		=> __( 'Paginate', 'sportspress' ),
+				'id' 		=> 'sportspress_calendar_paginated',
+				'default'	=> 'yes',
+				'type' 		=> 'checkbox',
+			),
+			
+			array(
+				'title' 	=> __( 'Limit', 'sportspress' ),
+				'id' 		=> 'sportspress_calendar_rows',
+				'class' 	=> 'small-text',
+				'default'	=> '10',
+				'desc' 		=> __( 'events', 'sportspress' ),
+				'type' 		=> 'number',
+				'custom_attributes' => array(
+					'min' 	=> 1,
+					'step' 	=> 1
+				),
+			),
+
+			array( 'type' => 'sectionend', 'id' => 'calendar_options' ),
+
 			array( 'title' => __( 'Text', 'sportspress' ), 'type' => 'title', 'desc' => __( 'The following options affect how words are displayed on the frontend.', 'sportspress' ), 'id' => 'text_options' ),
 
 		);

includes/admin/settings/class-sp-settings-players.php

@@ -48,15 +48,40 @@ class SP_Settings_Players extends SP_Settings_Page {
 				'type' 		=> 'checkbox',
 			),
 
+			array( 'type' => 'sectionend', 'id' => 'player_options' ),
+
+			array( 'title' => __( 'Player Lists', 'sportspress' ), 'type' => 'title', 'id' => 'list_options' ),
+
 			array(
-				'title'     => __( 'Player Lists', 'sportspress' ),
+				'title'     => __( 'Players', 'sportspress' ),
 				'desc' 		=> __( 'Link players', 'sportspress' ),
 				'id' 		=> 'sportspress_list_link_players',
 				'default'	=> 'yes',
 				'type' 		=> 'checkbox',
 			),
 
-			array( 'type' => 'sectionend', 'id' => 'player_options' ),
+			array(
+				'title'     => __( 'Pagination', 'sportspress' ),
+				'desc' 		=> __( 'Paginate', 'sportspress' ),
+				'id' 		=> 'sportspress_list_paginated',
+				'default'	=> 'yes',
+				'type' 		=> 'checkbox',
+			),
+			
+			array(
+				'title' 	=> __( 'Limit', 'sportspress' ),
+				'id' 		=> 'sportspress_list_rows',
+				'class' 	=> 'small-text',
+				'default'	=> '10',
+				'desc' 		=> __( 'players', 'sportspress' ),
+				'type' 		=> 'number',
+				'custom_attributes' => array(
+					'min' 	=> 1,
+					'step' 	=> 1
+				),
+			),
+
+			array( 'type' => 'sectionend', 'id' => 'list_options' ),
 
 			array( 'title' => __( 'Text', 'sportspress' ), 'type' => 'title', 'desc' => __( 'The following options affect how words are displayed on the frontend.', 'sportspress' ), 'id' => 'text_options' ),
 

includes/admin/settings/class-sp-settings-teams.php

@@ -40,8 +40,12 @@ class SP_Settings_Teams extends SP_Settings_Page {
 
 			array(	'title' => __( 'Team Options', 'sportspress' ), 'type' => 'title','desc' => '', 'id' => 'team_options' ),
 
+			array( 'type' => 'sectionend', 'id' => 'team_options' ),
+
+			array( 'title' => __( 'League Tables', 'sportspress' ), 'type' => 'title', 'id' => 'table_options' ),
+			
 			array(
-				'title'     => __( 'League Tables', 'sportspress' ),
+				'title'     => __( 'Teams', 'sportspress' ),
 				'desc' 		=> __( 'Display logos', 'sportspress' ),
 				'id' 		=> 'sportspress_table_show_logos',
 				'default'	=> 'yes',
@@ -57,7 +61,28 @@ class SP_Settings_Teams extends SP_Settings_Page {
 				'checkboxgroup'		=> 'end',
 			),
 
-			array( 'type' => 'sectionend', 'id' => 'team_options' ),
+			array(
+				'title'     => __( 'Pagination', 'sportspress' ),
+				'desc' 		=> __( 'Paginate', 'sportspress' ),
+				'id' 		=> 'sportspress_table_paginated',
+				'default'	=> 'yes',
+				'type' 		=> 'checkbox',
+			),
+			
+			array(
+				'title' 	=> __( 'Limit', 'sportspress' ),
+				'id' 		=> 'sportspress_table_rows',
+				'class' 	=> 'small-text',
+				'default'	=> '10',
+				'desc' 		=> __( 'teams', 'sportspress' ),
+				'type' 		=> 'number',
+				'custom_attributes' => array(
+					'min' 	=> 1,
+					'step' 	=> 1
+				),
+			),
+
+			array( 'type' => 'sectionend', 'id' => 'table_options' ),
 
 			array( 'title' => __( 'Text', 'sportspress' ), 'type' => 'title', 'desc' => __( 'The following options affect how words are displayed on the frontend.', 'sportspress' ), 'id' => 'text_options' ),
 

includes/class-sp-frontend-scripts.php

@@ -37,7 +37,7 @@ class SP_Frontend_Scripts {
 		wp_enqueue_script( 'sportspress', plugin_dir_url( SP_PLUGIN_FILE ) .'assets/js/sportspress.js', array( 'jquery' ), time(), true );
 
 		// Localize scripts.
-		wp_localize_script( 'sportspress', 'localized_strings', array( 'days' => __( 'days', 'sportspress' ), 'hrs' => __( 'hrs', 'sportspress' ), 'mins' => __( 'mins', 'sportspress' ), 'secs' => __( 'secs', 'sportspress' ) ) );
+		wp_localize_script( 'sportspress', 'localized_strings', array( 'days' => __( 'days', 'sportspress' ), 'hrs' => __( 'hrs', 'sportspress' ), 'mins' => __( 'mins', 'sportspress' ), 'secs' => __( 'secs', 'sportspress' ), 'previous' => __( 'Previous', 'sportspress' ), 'next' => __( 'Next', 'sportspress' ) ) );
 	}
 
 	/**

license.txt

@@ -19,6 +19,9 @@ Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 This program incorporates work covered by the following copyright and
 permission notices:
 
+  The SportsPress code has been inspired by and partly adapted from the
+  beautifully coded WooCommerce plugin by WooThemes.
+
   Wherever third party code has been used, credit has been given in the code's
   comments.
 

templates/event-list.php

@@ -3,13 +3,17 @@ $primary_result = get_option( 'sportspress_primary_result', null );
 
 $defaults = array(
 	'number' => -1,
+	'sortable' => get_option( 'sportspress_enable_sortable_tables', 'yes' ) == 'yes' ? true : false,
+	'responsive' => get_option( 'sportspress_enable_responsive_tables', 'yes' ) == 'yes' ? true : false,
+	'paginated' => get_option( 'sportspress_calendar_paginated', 'yes' ) == 'yes' ? true : false,
+	'rows' => get_option( 'sportspress_calendar_rows', 10 ),
 	'show_all_events_link' => false,
 );
 
 extract( $defaults, EXTR_SKIP );
 ?>
 <div class="sp-table-wrapper">
-	<table class="sp-event-list sp-data-table sp-responsive-table">
+	<table class="sp-event-list sp-data-table<?php if ( $responsive ) { ?> sp-responsive-table<?php } if ( $paginated ) { ?> sp-paginated-table<?php } ?>" data-sp-rows="<?php echo $rows; ?>">
 		<thead>
 			<tr>
 				<?php

templates/league-table.php

@@ -8,12 +8,14 @@ $defaults = array(
 	'link_posts' => get_option( 'sportspress_table_link_teams', 'no' ) == 'yes' ? true : false,
 	'sortable' => get_option( 'sportspress_enable_sortable_tables', 'yes' ) == 'yes' ? true : false,
 	'responsive' => get_option( 'sportspress_enable_responsive_tables', 'yes' ) == 'yes' ? true : false,
+	'paginated' => get_option( 'sportspress_table_paginated', 'yes' ) == 'yes' ? true : false,
+	'rows' => get_option( 'sportspress_table_rows', 10 ),
 );
 
 extract( $defaults, EXTR_SKIP );
 
 $output = '<div class="sp-table-wrapper">' .
-	'<table class="sp-league-table sp-data-table' . ( $responsive ? ' sp-responsive-table' : '' ) . ( $sortable ? ' sp-sortable-table' : '' ) . '">' . '<thead>' . '<tr>';
+	'<table class="sp-league-table sp-data-table' . ( $responsive ? ' sp-responsive-table' : '' ) . ( $sortable ? ' sp-sortable-table' : '' ) . ( $paginated ? ' sp-paginated-table' : '' ) . '" data-sp-rows="' . $rows . '">' . '<thead>' . '<tr>';
 
 $data = sp_get_league_table_data( $id );
 

templates/player-list.php

@@ -9,12 +9,14 @@ $defaults = array(
 	'link_posts' => get_option( 'sportspress_list_link_players', 'yes' ) == 'yes' ? true : false,
 	'sortable' => get_option( 'sportspress_enable_sortable_tables', 'yes' ) == 'yes' ? true : false,
 	'responsive' => get_option( 'sportspress_enable_responsive_tables', 'yes' ) == 'yes' ? true : false,
+	'paginated' => get_option( 'sportspress_list_paginated', 'yes' ) == 'yes' ? true : false,
+	'rows' => get_option( 'sportspress_list_rows', 10 ),
 );
 
 extract( $defaults, EXTR_SKIP );
 
 $output = '<div class="sp-table-wrapper">' .
-	'<table class="sp-player-list sp-data-table' . ( $responsive ? ' sp-responsive-table' : '' ) . ( $sortable ? ' sp-sortable-table' : '' ) . '">' . '<thead>' . '<tr>';
+	'<table class="sp-player-list sp-data-table' . ( $responsive ? ' sp-responsive-table' : '' ) . ( $sortable ? ' sp-sortable-table' : '' ) . ( $paginated ? ' sp-paginated-table' : '' ) . '" data-sp-rows="' . $rows . '">' . '<thead>' . '<tr>';
 
 $data = sp_get_player_list_data( $id );