library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

merge in improved ajax support

Browse Source
This commit is contained in:
Mottie 2012-12-18 15:50:42 -06:00
parent 363eb7ea1b
commit 954065df89
10 changed files with 105 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
addons/pager/jquery.tablesorter.pager.js
View File

@ -1,11 +1,12 @@
/*!
* tablesorter pager plugin
* updated 11/27/2012
* updated 12/18/2012
*/
/*jshint browser:true, jquery:true, unused:false */
;(function($) {
"use strict";
$.extend({tablesorterPager: new function() {
/*jshint supernew:true */
$.extend({ tablesorterPager: new function() {
this.defaults = {
// target the pager markup
@ -63,6 +64,7 @@
cssGoto: '.gotoPage', // go to page selector - select dropdown that sets the current page
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
@ -71,8 +73,7 @@
totalRows: 0,
totalPages: 0,
filteredRows: 0,
filteredPages: 0,
cssErrorRow: 'tablesorter-errorRow'
filteredPages: 0
};
@ -189,7 +190,7 @@
tc = table.config,
$b = $(table.tBodies).filter(':not(.' + tc.cssInfoBlock + ')'),
hl = $t.find('thead th').length, tds = '',
err = '<tr class="' + c.cssErrorRow + '"><td style="text-align: center;" colspan="' + hl + '">' +
err = '<tr class="' + c.cssErrorRow + ' ' + tc.selectorRemove + '"><td style="text-align: center;" colspan="' + hl + '">' +
(exception ? exception.message + ' (' + exception.name + ')' : 'No rows found') + '</td></tr>',
result = c.ajaxProcessing(data) || [ 0, [] ],
d = result[1] || [],
@ -228,7 +229,7 @@
});
}
$t.find('thead tr.' + c.cssErrorRow).remove(); //Clean up any previous error.
$t.find('thead tr.' + c.cssErrorRow).remove(); // Clean up any previous error.
if ( exception ) {
// add error row to thead instead of tbody, or clicking on the header will result in a parser error
$t.find('thead').append(err);
@ -259,7 +260,7 @@
$.tablesorter.isProcessing(table, true); // show loading icon
}
$(document).bind('ajaxError.pager', function(e, xhr, settings, exception) {
if (settings.url == url) {
if (settings.url === url) {
renderAjax(null, table, c, exception);
$(document).unbind('ajaxError.pager');
}
@ -284,7 +285,7 @@
arry.push(sortCol + '[' + v[0] + ']=' + v[1]);
});
// if the arry is empty, just add the col parameter... "&{sortList:col}" becomes "&col"
url = url.replace(/\{sortList[\s+]?:[\s+]?([^}]*)\}/g, arry.length ? arry.join('&') : sortCol );
url = url.replace(/\{sortList[\s+]?:[\s+]?([^\}]*)\}/g, arry.length ? arry.join('&') : sortCol );
}
if (filterCol) {
filterCol = filterCol[1];
@ -294,7 +295,7 @@
}
});
// if the arry is empty, just add the fcol parameter... "&{filterList:fcol}" becomes "&fcol"
url = url.replace(/\{filterList[\s+]?:[\s+]?([^}]*)\}/g, arry.length ? arry.join('&') : filterCol );
url = url.replace(/\{filterList[\s+]?:[\s+]?([^\}]*)\}/g, arry.length ? arry.join('&') : filterCol );
}
return url;

4
addons/pager/jquery.tablesorter.pager.min.js vendored
View File

File diff suppressed because one or more lines are too long

23
docs/example-pager-ajax.html
View File

@ -48,9 +48,11 @@
container: $(".pager"),
// use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
// where {page} is replaced by the page number and {size} is replaced by the number of records to show
// {sortList:col} adds the sortList to the url into a "col" array.
// where {page} is replaced by the page number, {size} is replaced by the number of records to show,
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
// the filterList to the url into an "fcol" array.
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
ajaxUrl : 'assets/City{page}.json',
// process ajax so that the following information is returned:
@ -114,15 +116,16 @@
removeRows: 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
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
cssNext : '.next', // next page arrow
cssPrev : '.prev', // previous page arrow
cssFirst : '.first', // go to first page arrow
cssLast : '.last', // go to last page arrow
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
cssDisabled : 'disabled' // Note there is no period "." in front of this class name
});
@ -141,6 +144,8 @@
<p class="tip">
<em>NOTE!</em>:
<ul>
<li><code>{sortList:col}</code> was added to the <code>ajaxUrl</code> in version 2.6.</li>
<li><code>{filterList:fcol}</code> was added to the <code>ajaxUrl</code> in version 2.4.5.</li>
<li>This update to the pager plugin that interacts with a database via ajax was added in version 2.0.32 and can be applied to the original tablesorter.</li>
<li>The <code>ajaxUrl</code> and <code>ajaxProcessing</code> function are both required options for this interaction to work properly.</li>
<li>The <code>ajaxUrl</code> contains a replaceable string to sent the requested page (<code>{page}</code>), block size (<code>{size}</code>) or sort order (<code>{sortList:name}</code>).</li>

40
docs/example-pager-filtered.html
View File

@ -23,6 +23,23 @@
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script id="js">$(function(){
// define pager options
var pagerOptions = {
// target the pager markup - see the HTML block below
container: $(".pager"),
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
// 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,
// 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.
removeRows: false,
// go to page selector - select dropdown that sets the current page
cssGoto: '.gotoPage'
};
// Initialize tablesorter
// ***********************
$("table")
@ -34,20 +51,7 @@
// initialize the pager plugin
// ****************************
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".pager"),
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
// 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,
// 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.
removeRows: false,
// go to page selector - select dropdown that sets the current page
cssGoto: '.gotoPage'
});
.tablesorterPager(pagerOptions);
// Add two new rows using the "addRows" method
// the "update" method doesn't work here because not all rows are
@ -91,11 +95,15 @@
// Disable / Enable
// **************
$('button:contains(Disable)').click(function(){
$('.toggle').click(function(){
var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
});
$('table').bind('pagerChange', function(){
// pager automatically enables when table is sorted.
$('.toggle').text('Disable');
});
});</script>
</head>
@ -120,7 +128,7 @@
<h1>Demo</h1>
<br>
<button>Add Rows</button> <button>Disable Pager</button> <button>Destroy Pager</button>
<button>Add Rows</button> <button class="toggle">Disable Pager</button> <button>Destroy Pager</button>
<br><br>
<div class="pager">
Page: <select class="gotoPage"></select>

139
docs/example-pager.html
View File

@ -157,11 +157,15 @@
// Disable / Enable
// **************
$('button:contains(Disable)').click(function(){
$('.toggle').click(function(){
var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
});
$('table').bind('pagerChange', function(){
// pager automatically enables when table is sorted.
$('.toggle').text('Disable Pager');
});
});</script>
</head>
@ -192,7 +196,7 @@
<h1>Demo</h1>
<br>
<button>Add Rows</button> <button>Disable Pager</button> <button>Destroy Pager</button>
<button>Add Rows</button> <button class="toggle">Disable Pager</button> <button>Destroy Pager</button>
<br><br>
<div class="pager">
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
@ -578,134 +582,9 @@ td.tablesorter-pager {
<a id="change-log"></a>
<h1>Pager Change Log</h1>
<div class="accordion">
<h3><a href="#">Changes</a></h3>
<div class="inner">
<div class="accordion">
<h3><a href="#">Version 2.4.2 (10/17/2012)</a></h3>
<div>
<ul>
<li>Ajax loaded tables will no longer hide pages other than the first. Fixes <a href="https://github.com/Mottie/tablesorter/issues/151">issue #151</a>.</li>
<li>Ajax header data now properly replaces the header text.</li>
<li>The error message row is now added with the class name from the <code>selectorRemove</code> option.</li>
</ul>
</div>
<h3><a href="#">Version 2.4 (8/19/2012)</a></h3>
<div>
<ul>
<li>The pager plugin now plays nice with the filter widget. Fixes <a href="https://github.com/Mottie/tablesorter/issues/6">issue #6</a>.</li>
<li>Added <code>cssGoto</code> option which contains a jQuery selector pointing to a page select dropdown. Updated the pager demo with an example.</li>
<li>Updated pager addong to now work with the filter and advanced filter widgets.</li>
<li>Added <code>{filteredRows}</code> and <code>{filteredPages}</code> parameters to the <code>output</code> option. They contain the number of rows and pages that result from the filter widget search.</li>
</ul>
</div>
<h3><a href="#">Version 2.2.1 (5/4/2012)</a></h3>
<div>
<ul>
<li>Widgets should now apply properly while the pager is active. Fix for <a href="https://github.com/Mottie/tablesorter/issues/60">issue #60</a>.</li>
</ul>
</div>
<h3><a href="#">Version 2.1.20 (4/28/2012)</a></h3>
<div>
<ul>
<li>Optimized pager table rebuilding to also use document fragments, and by removing two extra calls that reapplied the current widgets.</li>
</ul>
</div>
<h3><a href="#">Version 2.1.6 (3/22/2012)</a></h3>
<div>
<ul>
<li>Updated pager css. It wasn't targeting the pager block correctly.</li>
<li>Moved pager into the thead and/or tfoot in the <a href="example-pager-ajax.html">pager ajax demo</a>.</li>
<li>The pager plugin ajax method should now only target the header column text (not the pager) and first footer row when updating the header text.</li>
</ul>
</div>
<h3><a href="#">Version 2.1.3.1 (3/17/2012)</a></h3>
<div>
<ul>
<li><a href="https://github.com/rozwell">Rozwell</a> contributed some <a href="https://github.com/Mottie/tablesorter/pull/35">bug fixes</a> that occur when <code>cssPageSize</code> is not set. Thanks for sharing!</li>
</ul>
</div>
<h3><a href="#">Version 2.1</a></h3>
<div>
<ul>
<li>Ajax:
<ul>
<li>The pager plugin will now interact with a database via JSON. See <a href="example-pager-ajax.html">demo</a> here.</li>
<li>Added <code>ajaxUrl</code> option which contains the variables <code>{page}</code> and <code>{size}</code> which will be replaced by the plugin to obtain that data.
<pre class="js"><code>ajaxUrl : "http:/mydatabase.com?page={page}&size={size}"</code></pre>
</li>
<li>Another option named <code>ajaxProcessing</code> was included to process the data before returning it to the pager plugin. Basically the JSON needs to contain the data to match the example below. An additional required variable is the total number of records or rows needs to be returned.
<pre class="js"><code>// 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.data, ajax.total_rows ];
}
}</code></pre>
</li>
<li>I tried to make the plugin interact with a database as flexible as possible, but I'm sure I haven't covered every situation. So any and all feedback is welcome!</li>
<li>Also, much thanks to <a href="https://github.com/kachar">kachar</a> for the <a href="https://github.com/Mottie/tablesorter/issues/31">enhancement request</a> and willingness to help test it!</li>
</ul>
</li>
<li>Removed <code>positionFixed</code> and <code>offset</code> options.</li>
<li>Added <code>fixedHeight</code> option which replaces the <code>positionFixed</code> and <code>offset</code> options.
<ul>
<li>If true, it should maintain the height of the table, even when viewing fewer than the set number of records (go to the last page to see this in action).</li>
<li>It works by adding an empty row to make up the differences in height.</li>
<li>There were some <strong>issues</strong> of the height being incorrect when this option is true. The problems occurred if you add/remove rows + change pager size, or just destroy/enable the pager. I think I fixed it, but if you should find a problem, please <a href="https://github.com/Mottie/tablesorter/issues">report the issue</a> and steps on how to duplicate it.</li>
</ul>
</li>
<li>The pager <code>container</code> option will now accept class names. So you can add multiple container blocks to control the pager, just as this page now has two, one above and one below.</li>
<li>The pager now adds all of its options to the table configuration options within an object named "pager". Basically what this means is that instead of add all of the pager options to be mixed in with the tablesorter options, the pager options have been isolated and can be found by typing this into the browser console: <code>$('table')[0].config.pager</code>.</li>
</ul>
</div>
<h3><a href="#">Version 2.0.21.2</a></h3>
<div>
<ul>
<li>Added <code>"disable.pager"</code> and <code>"enable.pager"</code> methods added to make it easier to add or delete rows from the table.</li>
</ul>
</div>
<h3><a href="#">Version 2.0.16</a></h3>
<div>
<ul>
<li>Reduced the number of rows in the demo from 1022 to 50, so you don't have to scroll forever (when the pager is destroyed) to see the code below the table.</li>
<li>Added <code>"destroy.pager"</code> method will reveal the entire table, remove the pager functionality, and hide the actual pager.</li>
<li>Added a new <code>addRows</code> method to allow adding new rows while the pager is applied to a table. Using <code>"update"</code> would remove all non-visible rows.</li>
</ul>
</div>
<h3><a href="#">Version 2.0.9</a></h3>
<div>
<ul>
<li>Added <code>cssDisabled</code> and <code>pagerArrows</code> options which controls the look of the pager and arrows when the pager is on the first or last page.</li>
<li>Updated pager functions, removed "separator" option, and added output string formatting (e.g. "1 to 10 (50)").</li>
</ul>
</div>
<h3><a href="#">Version 2.0.7</a></h3>
<div>
<ul>
<li>Added <code>"pagerChange"</code> and <code>"pagerComplete"</code> events in version 2.0.7.</li>
</ul>
</div>
</div>
</div>
</div>
<ul>
<li>Moved to <a href="https://github.com/Mottie/tablesorter/wiki/Change2">wiki pages</a>.</li>
</ul>
<div class="next-up">
<hr />

35
docs/index.html
View File

@ -819,6 +819,14 @@
<td><a href="example-option-selectorsort.html">Example</a></td>
</tr>
<tr id="serversidesorting">
<td><span class="permalink">serverSideSorting</span></td>
<td>Boolean</td>
<td>false</td>
<td>Set to <code>true</code> if the server is performing the sorting. The ui and events will still be used. <span class="tip"><em>New!</em></span> v2.5.3.</td>
<td></td>
</tr>
<tr id="showprocessing">
<td><span class="permalink">showProcessing</span></td>
<td>Boolean</td>
@ -1202,6 +1210,8 @@ $(function(){
filter_startsWith : false,
// filter all data using parsed content.
filter_useParsedData : false,
// Set to true for server-side filtering
filter_serversideFiltering : false,
// *** stickyHeaders widget ***
// css class name applied to the sticky header
@ -1742,6 +1752,27 @@ $('table').trigger('search', false);</pre></div>
<td></td>
</tr>
<tr id="widget-filter-serversidefiltering">
<td><a href="#" class="toggle2">filter_serversideFiltering</a></td>
<td>Boolean</td>
<td>false</td>
<td>
Filter widget: Set this option to <code>true</code> if filtering is performed on the server-side. <span class="tip"><em>New!</em></span> v2.5.3.
<div class="collapsible">
<br>
Use the <a href="#widget-filter-serversidefiltering"><code>filter_serversideFiltering</code></a> option as follows:
<pre class="js">$(function(){
$("table").tablesorter({
widgets: ["filter"],
widgetOptions : {
filter_serversideFiltering : true
}
});
});</pre></div>
</td>
<td></td>
</tr>
<tr id="widget-filter-startswith">
<td><a href="#" class="toggle2">filter_startsWith</a></td>
<td>Boolean</td>
@ -2535,6 +2566,8 @@ or, directly add the search string to the filter input as follows:<pre class="js
<p>If you would like to contribute, <a href="https://github.com/Mottie/tablesorter">fork a copy on github</a>.</p>
<p>Some basic <a href="../test.html">unit testing</a> has been added. If you would like to add more or report a problem, please use the appropriate link above. <span class="tip"><em>New!</em></span> v2.6.</p>
<p>Support is also available through the <a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</a> or <a class="external" href="http://stackoverflow.com/questions/tagged/tablesorter">StackOverflow</a>.</p>
<p>Access to the jQuery Mailing List is also available through <a class="external" href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.</p>
@ -2545,7 +2578,7 @@ or, directly add the search string to the filter input as follows:<pre class="js
<p>
Documentation written by <a class="external" href="http://www.ghidinelli.com">Brian Ghidinelli</a>,
based on <a class="external" href="http://malsup.com/jquery/">Mike Alsup's</a> great documention.<br>
Additional &amp; Missing documentation, alphanumeric sort, numerous widgets and other changes added by <a class="external" href="https://github.com/Mottie/tablesorter">Mottie</a>.
Additional &amp; Missing documentation, alphanumeric sort, numerous widgets, unit testing and other changes added by <a class="external" href="https://github.com/Mottie/tablesorter">Mottie</a>.
</p>
<p>
<a class="external" href="http://ejohn.org">John Resig</a> for the fantastic <a class="external" href="http://jquery.com">jQuery</a>

2
js/jquery.tablesorter.js
View File

@ -1,5 +1,5 @@
/*!
* TableSorter 2.5.2 - Client-side table sorting with ease!
* TableSorter 2.6 - Client-side table sorting with ease!
* @requires jQuery v1.2.6+
*
* Copyright (c) 2007 Christian Bach

4
js/jquery.tablesorter.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/jquery.tablesorter.widgets.js
View File

@ -1,4 +1,4 @@
/*! tableSorter 2.4+ widgets - updated 11/22/2012
/*! tableSorter 2.4+ widgets - updated 12/18/2012
*
* Column Styles
* Column Filters

16
js/jquery.tablesorter.widgets.min.js vendored
View File

File diff suppressed because one or more lines are too long