tablesorter/docs/example-pager-ajax.html
2012-09-27 14:57:19 -05:00

327 lines
11 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.7/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.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']
})
// initialize the pager plugin
// ****************************
.tablesorterPager({
// **********************************
// Description of ALL pager options
// **********************************
// target the pager markup - see the HTML block below
container: $(".pager"),
// use this url format "http:/mydatabase.com?page={page}&size={size}"
ajaxUrl : 'assets/City{page}.json',
// 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.cols,
// 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
// 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">
<p class="tip">
<em>NOTE!</em>:
<ul>
<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>) and block size (<code>{size}</code>).</li>
<li>The <code>ajaxProcessing</code> function must* return the data in the following format <code>[ total, rows, headers ]</code> - <span class="tip"><em>Modified</em></span> in 2.1.3:
<pre class="js"><code>[
// total # rows contained in the database
100,
// row data: array of arrays; each internal array has the table cell data for that row
[
[ "row1cell1", "row1cell2", ... "row1cellN" ], // first row
[ "row2cell1", "row2cell2", ... "row2cellN" ], // second row
...
[ "rowNcell1", "rowNcell2", ... "rowNcellN" ] // last row
],
// header text (optional)
[ "Header1", "Header2", ... "HeaderN" ]
] </code></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 in Chrome due to restrictions with browser and desktop interaction.</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">StackOverflow</a> or message me directly (gmail; wowmotty). Please don't open an issue for help with code.</p>
</p>
<h1>Demo</h1>
<table class="tablesorter">
<thead>
<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>
<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="js"></pre>
</div>
<h1>CSS</h1>
<div>
<pre class="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="html">&lt;table class=&quot;tablesorter&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;td class=&quot;pager&quot; colspan=&quot;5&quot;&gt;
&lt;img src=&quot;../addons/pager/icons/first.png&quot; class=&quot;first&quot;/&gt;
&lt;img src=&quot;../addons/pager/icons/prev.png&quot; class=&quot;prev&quot;/&gt;
&lt;span class=&quot;pagedisplay&quot;&gt;&lt;/span&gt; &lt;!-- this can be any element, including an input --&gt;
&lt;img src=&quot;../addons/pager/icons/next.png&quot; class=&quot;next&quot;/&gt;
&lt;img src=&quot;../addons/pager/icons/last.png&quot; class=&quot;last&quot;/&gt;
&lt;select class=&quot;pagesize&quot;&gt;
&lt;option value=&quot;25&quot;&gt;25&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th&gt;1&lt;/th&gt; &lt;!-- thead text will be updated from the JSON; make sure the number of columns matches the JSON data --&gt;
&lt;th&gt;2&lt;/th&gt;
&lt;th&gt;3&lt;/th&gt;
&lt;th&gt;4&lt;/th&gt;
&lt;th&gt;5&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;th&gt;1&lt;/th&gt; &lt;!-- tfoot text will be updated at the same time as the thead --&gt;
&lt;th&gt;2&lt;/th&gt;
&lt;th&gt;3&lt;/th&gt;
&lt;th&gt;4&lt;/th&gt;
&lt;th&gt;5&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;pager&quot; colspan=&quot;5&quot;&gt;
&lt;img src=&quot;../addons/pager/icons/first.png&quot; class=&quot;first&quot;/&gt;
&lt;img src=&quot;../addons/pager/icons/prev.png&quot; class=&quot;prev&quot;/&gt;
&lt;span class=&quot;pagedisplay&quot;&gt;&lt;/span&gt; &lt;!-- this can be any element, including an input --&gt;
&lt;img src=&quot;../addons/pager/icons/next.png&quot; class=&quot;next&quot;/&gt;
&lt;img src=&quot;../addons/pager/icons/last.png&quot; class=&quot;last&quot;/&gt;
&lt;select class=&quot;pagesize&quot;&gt;
&lt;option value=&quot;25&quot;&gt;25&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;tbody&gt; &lt;!-- tbody will be loaded via JSON --&gt;
&lt;/tbody&gt;
&lt;/table&gt;</pre>
</div>
<div class="next-up">
<hr />
Next up: <a href="example-pager-filtered.html">Pager plugin + filter widget &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>