Implement table pagination with jQuery

application/views/project/list.php

@@ -8,7 +8,7 @@
 
 	<div class="box">
 		<h3>Übersicht aller Projekte</h3>
-		<table>
+		<table class="tableList paginated">
 		<thead>
 		<tr>
 			<th scope="col">Projekt</th>
@@ -68,19 +68,6 @@
 		</tr>
 		</tbody>
 		</table>
-
-		<div class="pagination">
-			<ul>
-				<li class="pages">Seite:</li>
-				<li>1</li>
-				<li><a href="#">2</a></li>
-				<li><a href="#">3</a></li>
-				<li><a href="#">4</a></li>
-				<li><a href="#">5</a></li>
-				<li>...</li>
-				<li><a href="#">10</a></li>
-			</ul>
-		</div>
 	</div>
 
 </div>

assets/css/style.css

@@ -255,6 +255,16 @@ li { margin-left: 20px;}
 .pagination ul li a {
 }
 
+.pagination ul li.clickable {
+    color: #0088cc;
+    cursor: pointer;
+}
+
+.pagination ul li.active {
+    color: #222;
+    cursor: default;
+}
+
 /* Footer */
 
 #footer {
@@ -454,4 +464,4 @@ html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that th
 }
 .tab_content {
 	padding: 20px;
-}
+}

assets/css/table.css

@@ -34,5 +34,13 @@ table .odd {
 	background: #f6f6f6; 
 }
 
-table tbody tr:nth-child(even) {background: #fff}
-table tbody tr:nth-child(odd) {background: #f6f6f6}
+table .even {
+    background: #fff;
+}
+
+table .hover {
+    background: #f0f0f0;
+}
+/*table tbody tr:nth-child(even) {background: #fff}
+table tbody tr:nth-child(odd) {background: #f6f6f6}*/
+

assets/js/scattport.js

@@ -6,6 +6,12 @@ function get_notifications() {
 	});
 }
 
+$.fn.alternateRowColors = function() {
+    $('tbody tr:odd', this).removeClass('even').addClass('odd');
+    $('tbody tr:even', this).removeClass('odd').addClass('even');
+    return this;
+};
+
 $(document).ready(function() {
 
 	//When page loads...
@@ -29,3 +35,65 @@ $(document).ready(function() {
 	get_notifications();
 	setInterval('get_notifications()', '5000');
 });
+
+$(document).ready(function() {
+    var settings = $.extend( {
+        table_class : 'tableList'
+    }, settings);
+
+    $('.' + settings.table_class + ' tbody tr').hover(function() {
+        $(this).addClass("hover");
+    }, function() {
+        $(this).removeClass("hover");
+    });
+
+    $('.' + settings.table_class + ' tbody input:checkbox').click(function() {
+        if ($(this).attr('checked') == true) {
+            $(this).parent().parent().addClass('selected');
+        } else {
+            $(this).parent().parent().removeClass('selected');
+        }
+    });
+
+    $('.' + settings.table_class).each(function() {
+        var table = $(this);
+        table.alternateRowColors(table);
+    });
+});
+
+$(document).ready(function() {
+    $('.paginated').each(function() {
+        var currentPage = 0;
+        var numPerPage = 6;
+        var table = $(this);
+
+        table.bind('repaginate', function() {
+            var start = currentPage * numPerPage;
+            var end = (currentPage + 1) * numPerPage;
+            table.find('tbody tr').slice(start, end).show().end().slice(0, start).hide().end().slice(end).hide().end();
+        });
+
+        var numRows = table.find('tbody tr').length;
+        var numPages = Math.ceil(numRows / numPerPage);
+
+        var $pager = $('<div class="pagination"></div>');
+        var $pagelist = $('<ul></ul>');
+
+        $pagelist.append('<li class="pages">Seite:</li>');
+
+        for (var page = 0; page < numPages; page++) {
+            $('<li class="page-number">' + (page + 1) + '</li>').bind('click', {'newPage': page}, function(event) {
+                currentPage = event.data['newPage'];
+                table.trigger('repaginate');
+
+                $(this).addClass('active').siblings().removeClass('active');
+           }).appendTo($pagelist).addClass('clickable');
+        }
+
+        $pagelist.find('li.page-number:first').addClass('active');
+        $pager.append($pagelist)
+        $pager.insertAfter(table);
+
+        table.trigger('repaginate');
+    });
+});