mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
396 lines
14 KiB
HTML
396 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin - Ajax</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link href="css/jq.css" rel="stylesheet">
|
|
<link href="css/prettify.css" rel="stylesheet">
|
|
<script src="js/prettify.js"></script>
|
|
<script src="js/docs.js"></script>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
|
|
<!-- Tablesorter pager: required -->
|
|
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
|
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
|
|
|
<!-- Tablesorter: optional -->
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
|
|
|
<script id="js">$(function(){
|
|
|
|
// Initialize tablesorter
|
|
// ***********************
|
|
$("table")
|
|
.tablesorter({
|
|
theme: 'blue',
|
|
widthFixed: true,
|
|
sortLocaleCompare: true, // needed for accented characters in the data
|
|
widgets: ['zebra', 'filter']
|
|
})
|
|
|
|
// initialize the pager plugin
|
|
// ****************************
|
|
.tablesorterPager({
|
|
|
|
// **********************************
|
|
// Description of ALL pager options
|
|
// **********************************
|
|
|
|
// target the pager markup - see the HTML block below
|
|
container: $(".pager"),
|
|
|
|
// use this format: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
|
|
// where {page} is replaced by the page number (or use {page+1} to get a one-based index),
|
|
// {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#{filterList:filter}&{sortList:column}',
|
|
|
|
// modify the url after all processing has been applied
|
|
customAjaxUrl: function(table, url) {
|
|
// manipulate the url string as you desire
|
|
// url += '&cPage=' + window.location.pathname;
|
|
// trigger my custom event
|
|
$(table).trigger('changingUrl', url);
|
|
// send the server the current page
|
|
return url;
|
|
},
|
|
|
|
// process ajax so that the following information is returned:
|
|
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
|
|
// example:
|
|
// [
|
|
// 100, // total rows
|
|
// [
|
|
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
|
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
|
// ...
|
|
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
|
// ],
|
|
// [ "header1", "header2", ... "headerN" ] // optional
|
|
// ]
|
|
ajaxProcessing: function(data){
|
|
if (data && data.hasOwnProperty('rows')) {
|
|
var r, row, c, d = data.rows,
|
|
// total number of rows (required)
|
|
total = data.total_rows,
|
|
// array of header names (optional)
|
|
headers = data.headers,
|
|
// all rows: array of arrays; each internal array has the table cell data for that row
|
|
rows = [],
|
|
// len should match pager set size (c.size)
|
|
len = d.length;
|
|
// this will depend on how the json is set up - see City0.json
|
|
// rows
|
|
for ( r=0; r < len; r++ ) {
|
|
row = []; // new row array
|
|
// cells
|
|
for ( c in d[r] ) {
|
|
if (typeof(c) === "string") {
|
|
row.push(d[r][c]); // add each table cell data to row array
|
|
}
|
|
}
|
|
rows.push(row); // add new row array to rows array
|
|
}
|
|
return [ total, rows, headers ];
|
|
}
|
|
},
|
|
|
|
// 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
|
|
updateArrows: true,
|
|
|
|
// starting page of the pager (zero based index)
|
|
page: 0,
|
|
|
|
// 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
|
|
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.
|
|
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
|
|
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
|
|
|
|
});
|
|
|
|
});</script>
|
|
|
|
</head>
|
|
<body id="pager-demo">
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Pager plugin - Ajax</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="index.html">Back to documentation</a>
|
|
</div>
|
|
|
|
<div id="main">
|
|
|
|
<div class="tip">
|
|
<em>NOTE!</em>:
|
|
<ul>
|
|
<li><code>{filterList:fcol}</code> was added to the <code>ajaxUrl</code> in version 2.6.</li>
|
|
<li><code>{sortList:col}</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>
|
|
<li>The <code>ajaxProcessing</code> function is needed to convert your custom JSON format into an array usable by the pager plugin (modified in 2.1.3)<br>
|
|
<br>
|
|
So, given this custom JSON format (this is only an example):
|
|
<pre class="prettyprint lang-javascript">{
|
|
"total_rows": 80,
|
|
|
|
"headers" : [
|
|
"ID", "Name", "Country Code", "District", "Population"
|
|
],
|
|
|
|
"rows" : [{
|
|
"ID": 1,
|
|
"Name": "Kabul",
|
|
"CountryCode": "AFG",
|
|
"District": "Kabol",
|
|
"Population": 1780000
|
|
}, {
|
|
"ID": 2,
|
|
"Name": "Qandahar",
|
|
"CountryCode": "AFG",
|
|
"District": "Qandahar",
|
|
"Population": 237500
|
|
}, {
|
|
...
|
|
}, {
|
|
"ID": 25,
|
|
"Name": "Haarlemmermeer",
|
|
"CountryCode": "NLD",
|
|
"District": "Noord-Holland",
|
|
"Population": 110722
|
|
}]
|
|
}</pre>The <code>ajaxProcessing</code> function must* return the data in the following format <code>[ total, rows, headers (optional) ]</code>, or in version 2.9+ <code>[ rows, total, headers (optional) ]</code>:
|
|
<pre class="prettyprint lang-javascript">[
|
|
// total # rows contained in the database
|
|
80,
|
|
// row data: array of arrays; each internal array has the table cell data for that row
|
|
[
|
|
[ 1, "Kabul", "AFG", "Kabol", 1780000 ], // [ "row1cell1", "row1cell2", ... "row1cellN" ],
|
|
[ 2, "Qandahar", "AFG", "Qandahar", 237500 ], // [ "row2cell1", "row2cell2", ... "row2cellN" ],
|
|
...
|
|
[ 25, "Haarlemmermeer", "NLD", "Noord-Holland", 110722 ] // [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
|
|
],
|
|
[ "ID", "Name", "Country Code", "District", "Population" ] // [ "Header1", "Header2", ... "HeaderN" ] (optional)
|
|
]</pre></li>
|
|
<li>The table header and footer text will be updated to match the JSON "header column #" text; but there is an issue with the table rendering improperly if the number of columns in the HTML and the number of columns in the JSON don't match.</li>
|
|
<li>Limitations of this demo:
|
|
<ul>
|
|
<li>This demo will not work when viewing it locally due to communication restrictions between the browser and your desktop.</li>
|
|
<li>The record size is limited to 25 records because this demo is not interacting with an actual database, but with four JSON files containing 25 records each.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<p class="small">* If you have a different JSON format and need help with the processing code, please ask the question on <a href="http://stackoverflow.com/questions/tagged/tablesorter">StackOverflow</a> or message me directly (gmail; wowmotty). Please don't open an issue for help with code.</p>
|
|
</div>
|
|
|
|
<h1>Demo</h1>
|
|
Original Ajax url: <span id="origurl"></span><br>
|
|
Current Ajax url: <span id="url"></span>
|
|
<br>
|
|
<table class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<td class="pager sorter-false" colspan="5">
|
|
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
|
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
|
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
|
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
|
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
|
<select class="pagesize">
|
|
<option value="25">25</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>1</th>
|
|
<th>2</th>
|
|
<th>3</th>
|
|
<th>4</th>
|
|
<th>5</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th>1</th>
|
|
<th>2</th>
|
|
<th>3</th>
|
|
<th>4</th>
|
|
<th>5</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="pager" colspan="5">
|
|
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
|
|
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
|
|
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
|
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
|
|
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
|
|
<select class="pagesize">
|
|
<option value="25">25</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h1>Javascript</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-javascript"></pre>
|
|
</div>
|
|
|
|
<h1>CSS</h1>
|
|
<div>
|
|
<pre class="prettyprint lang-css">/* pager wrapper, div */
|
|
.pager {
|
|
padding: 5px;
|
|
}
|
|
/* pager wrapper, in thead/tfoot */
|
|
td.pager {
|
|
background-color: #e6eeee;
|
|
}
|
|
/* pager navigation arrows */
|
|
.pager img {
|
|
vertical-align: middle;
|
|
margin-right: 2px;
|
|
}
|
|
/* pager output text */
|
|
.pager .pagedisplay {
|
|
font-size: 11px;
|
|
padding: 0 5px 0 5px;
|
|
width: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
/*** loading ajax indeterminate progress indicator ***/
|
|
#tablesorterPagerLoading {
|
|
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
|
|
position: absolute;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/*** css used when "updateArrows" option is true ***/
|
|
/* the pager itself gets a disabled class when the number of rows is less than the size */
|
|
.pager.disabled {
|
|
display: none;
|
|
}
|
|
/* hide or fade out pager arrows when the first or last row is visible */
|
|
.pager img.disabled {
|
|
/* visibility: hidden */
|
|
opacity: 0.5;
|
|
filter: alpha(opacity=50);
|
|
}</pre>
|
|
</div>
|
|
|
|
<h1>HTML</h1>
|
|
<div id="html">
|
|
<pre class="prettyprint lang-html"><table class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<td class="pager" colspan="5">
|
|
<img src="../addons/pager/icons/first.png" class="first"/>
|
|
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
|
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
|
<img src="../addons/pager/icons/next.png" class="next"/>
|
|
<img src="../addons/pager/icons/last.png" class="last"/>
|
|
<select class="pagesize">
|
|
<option value="25">25</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>1</th> <!-- thead text will be updated from the JSON; make sure the number of columns matches the JSON data -->
|
|
<th>2</th>
|
|
<th>3</th>
|
|
<th>4</th>
|
|
<th>5</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th>1</th> <!-- tfoot text will be updated at the same time as the thead -->
|
|
<th>2</th>
|
|
<th>3</th>
|
|
<th>4</th>
|
|
<th>5</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="pager" colspan="5">
|
|
<img src="../addons/pager/icons/first.png" class="first"/>
|
|
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
|
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
|
<img src="../addons/pager/icons/next.png" class="next"/>
|
|
<img src="../addons/pager/icons/last.png" class="last"/>
|
|
<select class="pagesize">
|
|
<option value="25">25</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody> <!-- tbody will be loaded via JSON -->
|
|
</tbody>
|
|
</table></pre>
|
|
|
|
</div>
|
|
|
|
<div class="next-up">
|
|
<hr />
|
|
Next up: <a href="example-pager-filtered.html">Pager plugin + filter widget ››</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// allow THIS demo to sort the content; this variable is automatically set to true when ajax
|
|
// is used as there isn't any way to sort the server side data from the client side.
|
|
var $url = $('#url');
|
|
$('table')
|
|
|
|
// show current URL for the DEMO ONLY
|
|
.on('changingUrl', function(e, url){
|
|
$url.html(url);
|
|
})
|
|
|
|
// show original URL & updated URL in demo
|
|
.on('pagerInitialized', function(){
|
|
this.config.serverSideSorting = false;
|
|
$('#origurl').html( this.config.pager.ajaxUrl.replace(/(\{.*?\})/g, '<span class="results">$1</span>') );
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|