Docs: cuwreck speling & add default pager options

This commit is contained in:
Mottie 2015-05-11 18:43:03 -05:00
parent 7d2acb883b
commit e8f0a07f60
6 changed files with 60 additions and 26 deletions

View File

@ -125,10 +125,15 @@
}
},
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
// Set this option to false if your table data is preloaded into the table, but you are still using ajax
processAjaxOnInit: true,
// output string - default is '{page}/{totalPages}';
// possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
// apply disabled classname (cssDisabled option) to the pager arrows when the rows
// are at either extreme is visible; default is true
updateArrows: true,
// starting page of the pager (zero based index)
@ -137,25 +142,43 @@
// Number of visible rows - default is 10
size: 25,
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
// Saves the current pager page size and number (requires storage widget)
savePages: true,
// Saves tablesorter paging to custom key if defined.
// Key parameter name used by the $.tablesorter.storage function.
// Useful if you have multiple tables defined
storageKey: 'tablesorter-pager',
// Reset pager to this page after filtering; set to desired page number (zero-based index),
// or false to not change page at filter start
pageReset: 0,
// if true, the table will remain the same height no matter how many records are displayed.
// The space is made up by an empty table row set to a height to compensate; default is false
fixedHeight: false,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
// setting this to false, only hides the non-visible rows; needed if you plan to
// add/remove rows with the pager enabled.
removeRows: false,
// If true, child rows will be counted towards the pager set size
countChildRows: false,
// css class names of pager arrows
cssNext : '.next', // next page arrow
cssPrev : '.prev', // previous page arrow
cssFirst : '.first', // go to first page arrow
cssLast : '.last', // go to last page arrow
cssGoto : '.gotoPage', // page select dropdown - select dropdown that set the "page" option
cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
cssPageSize : '.pagesize', // page size selector - select dropdown that sets the "size" option
cssErrorRow : 'tablesorter-errorRow', // error information row
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled : 'disabled' // Note there is no period "." in front of this class name
// class added to arrows when at the extremes; see the "updateArrows" option
// (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled : 'disabled', // Note there is no period "." in front of this class name
cssErrorRow : 'tablesorter-errorRow' // error information row
});

View File

@ -38,21 +38,23 @@
// modify the url after all processing has been applied
customAjaxUrl: function(table, url) { return url; },
// add more ajax settings here
// see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
ajaxObject: { dataType: 'json' },
// process ajax so that the data object is returned along with the total number of rows
// example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
ajaxProcessing: function(ajax){
if (ajax && ajax.hasOwnProperty('data')) {
// return [ "data", "total_rows" ];
return [ ajax.total_rows, ajax.data ];
}
},
ajaxProcessing: null,
// Set this option to false if your table data is preloaded into the table, but you are still using ajax
processAjaxOnInit: true,
// output string - default is '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
output: '{startRow:input} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
// apply disabled classname (cssDisabled option) to the pager arrows when the rows
// are at either extreme is visible; default is true
updateArrows: true,
// starting page of the pager (zero based index)
@ -64,9 +66,15 @@
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
savePages : true,
//defines custom storage key
// Saves tablesorter paging to custom key if defined.
// Key parameter name used by the $.tablesorter.storage function.
// Useful if you have multiple tables defined
storageKey:'tablesorter-pager',
// Reset pager to this page after filtering; set to desired page number (zero-based index),
// or false to not change page at filter start
pageReset: 0,
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: true,
@ -75,6 +83,9 @@
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// If true, child rows will be counted towards the pager set size
countChildRows: false,
// css class names of pager arrows
cssNext: '.next', // next page arrow
cssPrev: '.prev', // previous page arrow

View File

@ -153,7 +153,7 @@
txt = $t.data('filter-text') || $t.text(); // text to add to filter
filters[col] = txt;
// using "table.hasFilters" here to make sure we aren't targetting a sticky header
// using "table.hasFilters" here to make sure we aren't targeting a sticky header
$.tablesorter.setFilters( $('#table'), filters, true ); // new v2.9
/** old method (prior to tablsorter v2.9 ***

View File

@ -89,7 +89,7 @@
col = $t.data('filter-column'), // zero-based index
txt = $t.data('filter-text') || $t.text(); // text to add to filter
filters[col] = txt;
// using "table.hasFilters" here to make sure we aren't targetting a sticky header
// using "table.hasFilters" here to make sure we aren't targeting a sticky header
$.tablesorter.setFilters( $('table.hasFilters'), filters, true ); // new v2.9
return false;
});

View File

@ -177,7 +177,7 @@ resizable_widths : [ '10%', '10%', '40px', '10%', '100px' ]</pre>
<tr id="resizable-target-last">
<td><a href="#" class="permalink">resizable_targetLast</a></td>
<td>false</td>
<td>When <code>true</code>, the last column will be targetted for resizing.
<td>When <code>true</code>, the last column will be targeted for resizing.
<div class="collapsible">
<p>When <code>true</code>, resizing a column will change the size of the selected column, and the last column, not the selected column's neighbor.</p>
<p>When <code>false</code>, resizing a column will move the column border between it's neighbors.</p>

View File

@ -1201,7 +1201,7 @@ From the example function above, you'll end up with something similar to this HT
<td>jQuery selectors used to find cells in the header.
<div class="collapsible">
You can change this, but the table will still need the required thead and tbody before this plugin will work properly.
<br>Added <code>&gt;</code> to the selector in v2.3 to prevent targetting nested table headers. It was modified again in v2.4 to include <code>td</code> cells within the thead.
<br>Added <code>&gt;</code> to the selector in v2.3 to prevent targeting nested table headers. It was modified again in v2.4 to include <code>td</code> cells within the thead.
</div>
</td>
<td></td>
@ -3461,7 +3461,7 @@ $('table').trigger('search', false);</pre></div>
<td>Boolean</td>
<td>false</td>
<td>
Resizable widget: When <code>true</code>, the last column will be targetted for resizing (<span class="version">v2.21.3</span>).
Resizable widget: When <code>true</code>, the last column will be targeted for resizing (<span class="version">v2.21.3</span>).
<div class="collapsible">
<p>When <code>true</code>, resizing a column will change the size of the selected column, and the last column, not the selected column's neighbor.</p>
<p>When <code>false</code>, resizing a column will move the column border between it's neighbors.</p>
@ -6601,14 +6601,14 @@ textExtractionFunction = $.tablesorter.getColumnData( table, table.config.textEx
<ul>
<li><code>tbodyIndex</code> - the tbody zero-based index of the current cell.</li>
<li><code>rowIndex</code> - the row zero-based index of the current cell.</li>
<li><code>$row</code> - a jQuery object targetting the current row being processed.</li>
<li><code>$cell</code> - a jQuery object targetting the curretn cell being processed.</li>
<li><code>$row</code> - a jQuery object targeting the current row being processed.</li>
<li><code>$cell</code> - a jQuery object targeting the curretn cell being processed.</li>
<li><code>parsed</code> - parsed text of the current cell.</li>
<li><code>raw</code> - raw (unparsed) text of the current cell.</li>
</ul>
As an example, say you want to make the text of all cells with a value greater than 20 red (assuming the 'red' class name is defined in css). Do it as follows:
<pre class="prettyprint lang-js">var table = $('table')[0];
// targetting the 4th column (zero-based index)
// targeting the 4th column (zero-based index)
$.tablesorter.getColumnText( table, 3, function( data ) {
if ( data.parsed > 20 ) {
data.$cell.addClass('red');
@ -6629,7 +6629,7 @@ $.tablesorter.getColumnText( table, 3, function( data ) {
</pre>
If the callback isn't used, the function will return the cummulated data for the column (it does not include all of the parameters available within the callback function):
<pre class="prettyprint lang-js">var table = $('table')[0],
// targetting the 4th column (zero-based index)
// targeting the 4th column (zero-based index)
columnText = $.tablesorter.getColumnText( table, 3 );
// columnText = {
// raw : [ 'cell1', 'cell2', ..., 'celln' ],