timbles - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

package.json

 {
   "name": "timbles",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "an p chill jQuery table plugin, made by someone who literally did not invent tables",
@@ -5,0 +5,0 @@ "main": "timbles",

readme.md

 timbles.js
 ==========
 
-*timbles* is a very lightweight jQuery plugin (lol is that an oxymoron) that allows you to add sorting to an existing `<table>`. That's it. Actually, it can also create the table for you with some JSON data and minimal configuration. It's p easy. I think it would make for a great base for table functionality you'd want to build into your apps.
+*timbles* is a very lightweight jQuery plugin (lol is that an oxymoron) that allows you to add sorting and pagination to an existing `<table>`. That's it. Actually, it can also create the table for you with some JSON data and minimal configuration. It's p easy. I think it would make for a great base for table functionality you'd want to build into your apps.
 
@@ -105,3 +105,3 @@ ## Install
 // call timbles with sorting property
-$table.timbles(
+$table.timbles({
   sorting: {
@@ -222,2 +222,18 @@ order: 'asc', // 'asc' for ascending sort, 'desc' for descending
 
+## Pagination
+
+If you want to have your table split into pages, COOL YOU CAN DO THAT. Just add the `pagination` property to your `timbles` call, just like you do for data and/or sorting.
+
+<pre><code>// get your table
+var $table = $('table');
+
+// call timbles with sorting property
+$table.timbles(
+  pagination: {
+    recordsPerPage: 5, // an integer value for how many records per page, for example 5
+  }
+});</code></pre>
+
+It will add a very simple first/prev/next/last pagination navigation on the bottom of the table. In the very near future I'll have more options for this.
+
 ## C.S.S.
@@ -231,2 +247,2 @@
 
-**MOST IMPORTANTLY: HAVE FUN.**
+**MOST IMPORTANTLY: HAVE FUN.**

timbles.js

@@ -10,3 +10,3 @@ /**
 
-  'use strict'; 
+  'use strict';
 
@@ -25,5 +25,13 @@ var pluginName = 'timbles';
     sortDESC : 'sorted-desc',
-    noSort : 'no-sort'
+    noSort : 'no-sort',
+    paginationTools : 'pagination',
   };
-  
+
+  var copy = {
+    firstPage : ' [«] ',
+    prevPage : ' < ',
+    nextPage : ' > ',
+    lastPage : ' [&raquo;] '
+  };
+
   var methods = {
@@ -40,41 +48,24 @@
           sorting: options.sorting,
+          pagination: options.pagination,
         };
         $this.data(pluginName, data);
 
-         // generate table from JSON
         if ( data.dataConfig ) {
+          // generate table from JSON
           methods.generateTableFromJson.call($this);
-          var tableSetup = true;
         }
+        else {
+          // set up existing html table
+          data.$allRows = $this.find('tr');
+          data.$headerRow = $this.find('thead tr').eq(0).addClass(classes.headerRow);
+          data.$records = data.$allRows.not('.' + classes.headerRow);
 
-        // save all rows to data
-        data.$allRows = $this.find('tr');
-        data.$headerRow = $this.find('thead tr').eq(0).addClass(classes.headerRow);
-        data.$records = $this.find('tr').not('.'+classes.headerRow);
-        
-        // if existing markup is used instead of generateTableFromJson, set it up
-        if ( !tableSetup ) {
+          // save all this great new data wowowow
+          $this.data(pluginName, data);
+
           methods.setupExistingTable.call($this);
         }
-
-        // save all this great new data wowowow
-        $this.data(pluginName, data);
-        
-        // if pagination set to true, set pagination
-        if ( data.pagination ) {
-          methods.enablePagination.call($this);
-        }
-
-        // if sorting set to true, allow sorting
-        if ( data.sorting ) {
-          methods.enableSorting.call($this);
-        }
-
-        // if sorting is given, sort table by it and order
-        if ( data.sorting.keyId ) {
-          methods.sortColumn.call($this, data.sorting.keyId, data.sorting.order);
-        }
       });
     },
-    
+
     setupExistingTable : function() {
@@ -84,3 +75,3 @@ var $this = $(this);
       if (!data) { return; }
-      
+
       // for each header cell, get ID and set the records cells to have it as a class for sorting
@@ -90,3 +81,6 @@ data.$headerRow.find('th').each(function(i){
         data.$records.find('td:nth-child(' + (i + 1) + ')').addClass(headerId);
-      })
+      });
+
+      // start enabling any given features
+      methods.enableFeaturesSetup.call($this);
     },
@@ -98,3 +92,3 @@
       if (!data) { return; }
-      
+
       $this.append('<thead><tr class="' + classes.headerRow + '"></tr></thead>');
@@ -104,3 +98,3 @@
       $.each(data.dataConfig.columns, function(index, value){
-        
+
         // if noSorting is set for this column, add the no-sort class to it
@@ -111,3 +105,3 @@ var noSortClassString = '';
         }
-        
+
         var $cell = $('<th id="' + value.id + '"' + noSortClassString +'>' + value.label + '</th>');
@@ -119,6 +113,6 @@ $this.find('tr.' + classes.headerRow).append($cell);
       var rows;
-      
+
       if ( data.dataConfig.dataType === 'array' ) {
         // no need for ajax call if data is local array
-        methods.generateRowsFromData.call($this, data.dataConfig.data, data.dataConfig.columns, $this)
+        methods.generateRowsFromData.call($this, data.dataConfig.data, data.dataConfig.columns, $this);
       }
@@ -128,16 +122,30 @@ else {
         $.getJSON( data.dataConfig.data, function(json) {
-          methods.generateRowsFromData.call($this, json, data.dataConfig.columns, $this)
+          methods.generateRowsFromData.call($this, json, data.dataConfig.columns, $this);
+        }).then(function(){
+          // set up existing html table
+          data.$allRows = $this.find('tr');
+          data.$headerRow = $this.find('thead tr').eq(0).addClass(classes.headerRow);
+          data.$records = data.$allRows.not('.' + classes.headerRow);
+
+          // save all this great new data wowowow
+          $this.data(pluginName, data);
+
+          // start enabling any given features
+          methods.enableFeaturesSetup.call($this);
         });
       }
-      
     },
-    
-    generateRowsFromData : function(data, columnConfig, thisTable) {
-      $.each(data, function(index, row){
+
+    generateRowsFromData : function(rowData, columnConfig, thisTable) {
+      var $this = $(this);
+      var data = $this.data(pluginName);
+      if (!data) { return; }
+
+      $.each(rowData, function(index, row){
         var $currentRow = $('<tr>');
-        $.each(columnConfig, function(property, value){    
-          
-          // if there is a dataFilter function given, apply it to the value to display      
+        $.each(columnConfig, function(property, value){
+
+          // if there is a dataFilter function given, apply it to the value to display
           var displayValue = ( value.dataFilter ) ? value.dataFilter(row[value.id]) : row[value.id];
-          
+
           // append new cell to the row
@@ -149,4 +157,31 @@ $currentRow.append('<td class="' + value.id + '" data-value="' + row[value.id] + '">' + displayValue + '</td>');
 
+      data.$allRows = $this.find('tr');
+      data.$headerRow = $this.find('thead tr').eq(0).addClass(classes.headerRow);
+      data.$records = data.$allRows.not('.' + classes.headerRow);
+
+      $this.data(pluginName, data);
     },
 
+    enableFeaturesSetup : function() {
+      var $this = $(this);
+      var data = $this.data(pluginName);
+      if (!data) { return; }
+
+     // if sorting set to true, allow sorting
+      if ( data.sorting ) {
+        methods.enableSorting.call($this);
+
+        // if sorting is given, sort table by it and order
+        if ( data.sorting.keyId ) {
+          methods.sortColumn.call($this, data.sorting.keyId, data.sorting.order);
+        }
+      }
+
+      // if pagination set to true, set pagination
+      if ( data.pagination && data.$records ) {
+        methods.enablePagination.call($this);
+      }
+
+    },
+
     enableSorting : function() {
@@ -165,3 +200,3 @@ var $this = $(this);
 
-    sortColumn : function( key, order) {
+    sortColumn : function(key, order) {
       var $this = $(this);
@@ -181,19 +216,23 @@ var data = $this.data(pluginName);
       // literally sort non-header-row records
-      var $recordsToSort = $this.find('tr').not('.' + classes.headerRow);
+      var $recordsToSort = data.$records;
       var $sortedRecords;
 
       if (order === 'asc') {
-        $sortHeader.addClass(classes.sortASC); 
+        $sortHeader.addClass(classes.sortASC);
 
-        var alpha, beta; 
+        var alpha, beta;
         $sortedRecords = $recordsToSort.sort( function(a, b) {
           alpha = $(a).find('td.' + key).data('value');
           beta = $(b).find('td.' + key).data('value');
-          if ( alpha < beta ) { 
+
+          alpha = (alpha) ? alpha : $(a).find('td.' + key).text();
+          beta = (beta) ? beta : $(b).find('td.' + key).text();
+
+          if ( alpha < beta ) {
             return -1;
-          } 
+          }
           else {
-            if ( alpha > beta ) { 
+            if ( alpha > beta ) {
               return 1;
-            } 
+            }
             else {
@@ -210,9 +249,13 @@ return 0;
           beta = $(b).find('td.' + key).data('value');
-          if ( beta < alpha ) { 
+
+          alpha = (alpha) ? alpha : $(a).find('td.' + key).text();
+          beta = (beta) ? beta : $(b).find('td.' + key).text();
+
+          if ( beta < alpha ) {
             return -1;
-          } 
+          }
           else {
-            if ( beta > alpha ) { 
+            if ( beta > alpha ) {
               return 1;
-            } 
+            }
             else {
@@ -222,3 +265,3 @@ return 0;
           }
-        });    
+        });
       }
@@ -233,3 +276,130 @@
       $this.append($sortedRecords);
-    }
+
+      // if table was paginated, reenable
+      if ( data.pagination ) {
+        data.pagination.currentPage = 1;
+        $this.data(pluginName, data);
+
+        methods.enablePagination.call($this);
+      }
+    },
+
+    enablePagination : function() {
+      var $this = $(this);
+			var data = $this.data(pluginName);
+			// don't paginate if there are no records
+			if (!data || !data.$records || data.$records.length === 0 ) { return; }
+
+			var $recordsToPaginate = data.$records;
+			var paginatedRecordsArray = [];
+
+			for ( var i = 0; i < data.pagination.recordsPerPage; i++ ) {
+				if ( data.$records[i] ) {
+					paginatedRecordsArray.push(data.$records[i]);
+				}
+			}
+
+			// remove records if they exist
+			if ( $recordsToPaginate ) {
+				$recordsToPaginate.remove();
+			}
+
+			// show first page
+			$this.append(paginatedRecordsArray);
+
+			// create footer to hold tools
+			data.$footerRow = $this.find('tfoot');
+
+			if ( data.$footerRow.length === 0 ) {
+        var $footer = $('<tfoot>');
+        data.$footerRow = $footer;
+      }
+
+			// create tools if they don't exist already
+			if ( !data.$paginationToolsContainer ) {
+        methods.generatePaginationTools.call($this);
+			}
+
+			// save it all
+      $this.data(pluginName, data);
+    },
+
+    generatePaginationTools : function() {
+      var $this = $(this);
+      var data = $this.data(pluginName);
+      if (!data) { return; }
+
+      data.$paginationToolsContainer = $('<div class="' + classes.paginationTools + '">');
+      data.$linkFirstPage = $('<a href="#">' + copy.firstPage + '</a>');
+      data.$linkPrevPage = $('<a href="#">' + copy.prevPage + '</a>');
+      data.$linkNextPage = $('<a href="#">' + copy.nextPage + '</a>');
+      data.$linkLastPage = $('<a href="#">' + copy.lastPage + '</a>');
+
+      data.$paginationToolsContainer
+        .append(data.$linkFirstPage)
+        .append(data.$linkPrevPage)
+        .append(data.$linkNextPage)
+        .append(data.$linkLastPage);
+
+      // event listeners
+      data.$linkFirstPage.click(function(){
+        methods.goToPage.call($this, 1);
+      });
+
+      data.$linkPrevPage.click(function(){
+        methods.goToPage.call($this, data.pagination.currentPage - 1);
+      });
+
+      data.$linkNextPage.click(function(){
+        methods.goToPage.call($this, data.pagination.currentPage + 1);
+      });
+
+      data.$linkLastPage.click(function(){
+        methods.goToPage.call($this, Math.ceil(data.$records.length / data.pagination.recordsPerPage));
+      });
+
+      $this.after(data.$paginationToolsContainer);
+
+      // save it all
+      $this.data(pluginName, data);
+    },
+
+    goToPage : function(page) {
+      var $this = $(this);
+      var data = $this.data(pluginName);
+      if (!data) { return; }
+
+			// check for valid page number
+			var pageCount = Math.ceil(data.$records.length / data.pagination.recordsPerPage);
+			if ( page < 1 || page > pageCount ) {
+				return;
+			}
+
+      // move to next page
+			data.pagination.currentPage = page;
+
+			$this.find('tr').not('.'+classes.headerRow).remove();
+
+			var paginatedRecordsArray = [];
+      var newFirstRowNum = (page - 1) * (data.pagination.recordsPerPage) + 1,
+          newLastRowNum = page * data.pagination.recordsPerPage;
+
+			if ( newLastRowNum > data.$records.length ) {
+				newLastRowNum = data.$records.length;
+			}
+
+			// get new page's records
+			for ( var i = newFirstRowNum - 1; i < newLastRowNum; i++ ) {
+				if ( data.$records[i] ) {
+					paginatedRecordsArray.push(data.$records[i]);
+				}
+			}
+
+			// add rows to table
+			data.$headerRow.after(paginatedRecordsArray);
+
+			// update data
+			$this.data(pluginName, data);
+    },
+
   };
@@ -241,7 +411,7 @@
       return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-    } 
-    else { 
+    }
+    else {
       if ( typeof method === 'object' || !method ) {
         return methods.init.apply(this, arguments);
-      } 
+      }
       else {
@@ -248,0 +418,0 @@ $.error('The method ' + method + ' literally does not exist. Good job.');

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

198205

increased by4.65%

Number of package files

22

increased by15.79%

Lines of code

3084

increased by5.08%

Number of lines in readme file

246

increased by7.42%

No dependency changes