Data table styling and options

admin/actions/wp-enqueue-scripts.php

@@ -3,8 +3,6 @@ function sportspress_enqueue_scripts() {
 	// Styles
 	wp_register_style( 'sportspress', SPORTSPRESS_PLUGIN_URL . 'assets/css/sportspress.css', array(), time() );
 	wp_enqueue_style( 'sportspress');
-	wp_register_style( 'jquery-datatables', SPORTSPRESS_PLUGIN_URL . 'assets/css/jquery.dataTables.css', array(), '1.9.4' );
-	wp_enqueue_style( 'jquery-datatables');
 
 	// Scripts
 	wp_enqueue_script( 'jquery' );

admin/filters/the-content.php

@@ -7,14 +7,14 @@ function sportspress_the_content( $content ) {
     	global $post;
 
         // Display league table
-        $content .= '<p>' . sportspress_league_table( $post->ID  ) . '</p>';
+        $content .= sportspress_league_table( $post->ID  );
     
     elseif ( is_singular( 'sp_list' ) && in_the_loop() ):
 
     	global $post;
 
         // Display player list
-        $content .= '<p>' . sportspress_player_list( $post->ID  ) . '</p>';
+        $content .= sportspress_player_list( $post->ID  );
 
     endif;
 

assets/css/jquery.dataTables.css

@@ -1,221 +0,0 @@
-
-/*
- * Table
- */
-table.dataTable {
-	margin: 0 auto;
-	clear: both;
-	width: 100%;
-}
-
-table.dataTable thead th {
-	padding: 3px 18px 3px 10px;
-	border-bottom: 1px solid black;
-	font-weight: bold;
-	cursor: pointer;
-	*cursor: hand;
-}
-
-table.dataTable tfoot th {
-	padding: 3px 18px 3px 10px;
-	border-top: 1px solid black;
-	font-weight: bold;
-}
-
-table.dataTable td {
-	padding: 3px 10px;
-}
-
-table.dataTable td.center,
-table.dataTable td.dataTables_empty {
-	text-align: center;
-}
-
-table.dataTable tr.odd { background-color: #E2E4FF; }
-table.dataTable tr.even { background-color: white; }
-
-table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
-table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
-table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
-table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
-table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
-table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }
-
-
-/*
- * Table wrapper
- */
-.dataTables_wrapper {
-	position: relative;
-	clear: both;
-	*zoom: 1;
-}
-
-
-/*
- * Page length menu
- */
-.dataTables_length {
-	float: left;
-}
-
-
-/*
- * Filter
- */
-.dataTables_filter {
-	float: right;
-	text-align: right;
-}
-
-
-/*
- * Table information
- */
-.dataTables_info {
-	clear: both;
-	float: left;
-}
-
-
-/*
- * Pagination
- */
-.dataTables_paginate {
-	float: right;
-	text-align: right;
-}
-
-/* Two button pagination - previous / next */
-.paginate_disabled_previous,
-.paginate_enabled_previous,
-.paginate_disabled_next,
-.paginate_enabled_next {
-	height: 19px;
-	float: left;
-	cursor: pointer;
-	*cursor: hand;
-	color: #111 !important;
-}
-.paginate_disabled_previous:hover,
-.paginate_enabled_previous:hover,
-.paginate_disabled_next:hover,
-.paginate_enabled_next:hover {
-	text-decoration: none !important;
-}
-.paginate_disabled_previous:active,
-.paginate_enabled_previous:active,
-.paginate_disabled_next:active,
-.paginate_enabled_next:active {
-	outline: none;
-}
-
-.paginate_disabled_previous,
-.paginate_disabled_next {
-	color: #666 !important;
-}
-.paginate_disabled_previous,
-.paginate_enabled_previous {
-	padding-left: 23px;
-}
-.paginate_disabled_next,
-.paginate_enabled_next {
-	padding-right: 23px;
-	margin-left: 10px;
-}
-
-.paginate_enabled_previous { background: url('../images/back_enabled.png') no-repeat top left; }
-.paginate_enabled_previous:hover { background: url('../images/back_enabled_hover.png') no-repeat top left; }
-.paginate_disabled_previous { background: url('../images/back_disabled.png') no-repeat top left; }
-
-.paginate_enabled_next { background: url('../images/forward_enabled.png') no-repeat top right; }
-.paginate_enabled_next:hover { background: url('../images/forward_enabled_hover.png') no-repeat top right; }
-.paginate_disabled_next { background: url('../images/forward_disabled.png') no-repeat top right; }
-
-/* Full number pagination */
-.paging_full_numbers {
-	height: 22px;
-	line-height: 22px;
-}
-.paging_full_numbers a:active {
-	outline: none
-}
-.paging_full_numbers a:hover {
-	text-decoration: none;
-}
-
-.paging_full_numbers a.paginate_button,
-.paging_full_numbers a.paginate_active {
-	border: 1px solid #aaa;
-	-webkit-border-radius: 5px;
-	-moz-border-radius: 5px;
-	border-radius: 5px;
-	padding: 2px 5px;
-	margin: 0 3px;
-	cursor: pointer;
-	*cursor: hand;
-	color: #333 !important;
-}
-
-.paging_full_numbers a.paginate_button {
-	background-color: #ddd;
-}
-
-.paging_full_numbers a.paginate_button:hover {
-	background-color: #ccc;
-	text-decoration: none !important;
-}
-
-.paging_full_numbers a.paginate_active {
-	background-color: #99B3FF;
-}
-
-
-/*
- * Processing indicator
- */
-.dataTables_processing {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	width: 250px;
-	height: 30px;
-	margin-left: -125px;
-	margin-top: -15px;
-	padding: 14px 0 2px 0;
-	border: 1px solid #ddd;
-	text-align: center;
-	color: #999;
-	font-size: 14px;
-	background-color: white;
-}
-
-
-/*
- * Sorting
- */
-.sorting { background: url('../images/sort_both.png') no-repeat center right; }
-.sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
-.sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }
-
-.sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
-.sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }
- 
-table.dataTable thead th:active,
-table.dataTable thead td:active {
-	outline: none;
-}
-
-
-/*
- * Scrolling
- */
-.dataTables_scroll {
-	clear: both;
-}
-
-.dataTables_scrollBody {
-	*margin-top: -1px;
-	-webkit-overflow-scrolling: touch;
-}
-

assets/css/sportspress.css

@@ -1 +1,12 @@
 /* SportsPress */
+
+/* Data Tables */
+.sp-data-table thead .sorting {
+	cursor: pointer;
+}
+.sp-data-table .sorting_asc:after {
+	content: ' \25B2';
+}
+.sp-data-table .sorting_desc:after {
+	content: ' \25BC';
+}

assets/js/sportspress.js

@@ -1,8 +1,21 @@
 (function($) {
 
-	console.log('hello');
-
 	// Data tables
-	$('.sp-data-table').dataTable();
+	$('.sp-data-table').dataTable({
+		'aaSorting': [],
+		'bFilter': false,
+		'bInfo': false,
+		'bPaginate': false,
+		'bSort': true,
+	    'oLanguage': {
+	      'oAria': {
+	        'sSortAscending': '',
+	        'sSortDescending': ''
+	      }
+	    },
+		'aoColumnDefs': [
+			{ 'bSortable': false, 'aTargets': [ 0 ] }
+		]
+	});
 
 })(jQuery);

functions.php

@@ -12,8 +12,8 @@ if ( !function_exists( 'sportspress_league_table' ) ) {
 		// Remove the first row to leave us with the actual data
 		unset( $data[0] );
 
-		foreach( $labels as $label ):
-			$output .= '<th>' . $label . '</th>';
+		foreach( $labels as $key => $label ):
+			$output .= '<th class="column-' . ( $key ? $key : 'name' ) . '">' . $label . '</th>';
 		endforeach;
 
 		$output .= '</tr>' . '</th>' . '</thead>' . '<tbody>';
@@ -27,12 +27,13 @@ if ( !function_exists( 'sportspress_league_table' ) ) {
 			// Thumbnail and name as link
 			$permalink = get_post_permalink( $team_id );
 			$thumbnail = get_the_post_thumbnail( $team_id, 'sp_icon' );
-			$output .= '<td>' . $i . '. ' . ( $thumbnail ? $thumbnail . ' ' : '' ) . '<a href="' . $permalink . '">' . sportspress_array_value( $row, 'name', '&nbsp;' ) . '</a></td>';
+			$name = sportspress_array_value( $row, 'name', '&nbsp;' );
+			$output .= '<td class="column-name">' . $i . '. ' . ( $thumbnail ? $thumbnail . ' ' : '' ) . '<a href="' . $permalink . '">' . $name . '</a></td>';
 
 			foreach( $labels as $key => $value ):
 				if ( $key == 'name' )
 					continue;
-				$output .= '<td>' . sportspress_array_value( $row, $key, '—' ) . '</td>';
+				$output .= '<td class="column-' . $key . '">' . sportspress_array_value( $row, $key, '—' ) . '</td>';
 			endforeach;
 
 			$output .= '</tr>';