2012-03-07 17:59:39 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > jQuery plugin: Tablesorter 2.0 - Pager plugin - Ajax< / title >
<!-- jQuery -->
2012-10-17 14:27:33 +00:00
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" > < / script >
2012-03-07 17:59:39 +00:00
<!-- 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 -->
2012-09-27 19:57:19 +00:00
< link rel = "stylesheet" href = "../css/theme.blue.css" >
2012-03-07 17:59:39 +00:00
< script src = "../js/jquery.tablesorter.js" > < / script >
2012-03-17 04:13:22 +00:00
<!-- Tablesorter pager: required -->
2012-03-07 17:59:39 +00:00
< link rel = "stylesheet" href = "../addons/pager/jquery.tablesorter.pager.css" >
< script src = "../addons/pager/jquery.tablesorter.pager.js" > < / script >
2012-03-17 04:13:22 +00:00
<!-- Tablesorter: optional -->
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
2012-03-07 17:59:39 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
// Initialize tablesorter
// ***********************
$("table")
.tablesorter({
2012-09-27 19:57:19 +00:00
theme: 'blue',
2012-03-07 17:59:39 +00:00
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"),
2012-10-17 14:27:33 +00:00
// 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.
// So a sortList = [[2,0],[3,0]] becomes "& col[2]=0& col[3]=0" in the url
2012-03-07 17:59:39 +00:00
ajaxUrl : 'assets/City{page}.json',
2012-03-17 04:13:22 +00:00
// 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 ];
2012-03-07 17:59:39 +00:00
}
},
// 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 >
2012-09-27 19:57:19 +00:00
< li > The < code > ajaxUrl< / code > and < code > ajaxProcessing< / code > function are both required options for this interaction to work properly.< / li >
2012-10-17 15:15:54 +00:00
< 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 >
2012-09-27 19:57:19 +00:00
< 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:
2012-03-17 04:13:22 +00:00
< 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
2012-03-07 17:59:39 +00:00
],
2012-03-17 04:13:22 +00:00
// header text (optional)
[ "Header1", "Header2", ... "HeaderN" ]
] < / code > < / pre > < / li >
2012-03-07 17:59:39 +00:00
< 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 >
2012-03-22 14:50:17 +00:00
< tr >
2012-10-17 14:27:33 +00:00
< td class = "pager sorter-false" colspan = "5" >
2012-05-04 21:21:43 +00:00
< img src = "../addons/pager/icons/first.png" class = "first" alt = "First" / >
< img src = "../addons/pager/icons/prev.png" class = "prev" alt = "Prev" / >
2012-03-22 14:50:17 +00:00
< span class = "pagedisplay" > < / span > <!-- this can be any element, including an input -->
2012-05-04 21:21:43 +00:00
< img src = "../addons/pager/icons/next.png" class = "next" alt = "Next" / >
< img src = "../addons/pager/icons/last.png" class = "last" alt = "Last" / >
2012-03-22 14:50:17 +00:00
< select class = "pagesize" >
< option value = "25" > 25< / option >
< / select >
< / td >
< / tr >
2012-03-07 17:59:39 +00:00
< 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 >
2012-03-22 14:50:17 +00:00
< tr >
< td class = "pager" colspan = "5" >
2012-05-04 21:21:43 +00:00
< img src = "../addons/pager/icons/first.png" class = "first" alt = "First" / >
< img src = "../addons/pager/icons/prev.png" class = "prev" alt = "Prev" / >
2012-03-22 14:50:17 +00:00
< span class = "pagedisplay" > < / span > <!-- this can be any element, including an input -->
2012-05-04 21:21:43 +00:00
< img src = "../addons/pager/icons/next.png" class = "next" alt = "Next" / >
< img src = "../addons/pager/icons/last.png" class = "last" alt = "Last" / >
2012-03-22 14:50:17 +00:00
< select class = "pagesize" >
< option value = "25" > 25< / option >
< / select >
< / td >
< / tr >
2012-03-07 17:59:39 +00:00
< / tfoot >
< tbody >
< / tbody >
< / table >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "js" > < / pre >
< / div >
< h1 > CSS< / h1 >
2012-03-17 04:13:22 +00:00
< div >
2012-03-22 14:50:17 +00:00
< pre class = "css" > /* pager wrapper, div */
.pager {
padding: 5px;
2012-03-17 04:13:22 +00:00
}
2012-03-22 14:50:17 +00:00
/* pager wrapper, in thead/tfoot */
td.pager {
background-color: #e6eeee;
2012-03-17 04:13:22 +00:00
}
2012-03-22 14:50:17 +00:00
/* pager navigation arrows */
.pager img {
vertical-align: middle;
margin-right: 2px;
2012-03-17 04:13:22 +00:00
}
2012-03-22 14:50:17 +00:00
/* pager output text */
.pager .pagedisplay {
font-size: 11px;
padding: 0 5px 0 5px;
2012-03-17 04:13:22 +00:00
width: 50px;
text-align: center;
}
2012-03-22 14:50:17 +00:00
/*** loading ajax indeterminate progress indicator ***/
2012-03-17 04:13:22 +00:00
#tablesorterPagerLoading {
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
position: absolute;
z-index: 1000;
}
2012-03-22 14:50:17 +00:00
2012-03-17 04:13:22 +00:00
/*** 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 >
2012-03-07 17:59:39 +00:00
< / div >
< h1 > HTML< / h1 >
< div id = "html" >
2012-03-22 14:50:17 +00:00
< pre class = "html" > < table class=" tablesorter" >
2012-03-07 17:59:39 +00:00
< thead>
2012-03-22 14:50:17 +00:00
< 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>
2012-03-07 17:59:39 +00:00
< 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>
2012-03-22 14:50:17 +00:00
< 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>
2012-03-07 17:59:39 +00:00
< /tfoot>
< tbody> < !-- tbody will be loaded via JSON -->
< /tbody>
2012-03-22 14:50:17 +00:00
< /table> < / pre >
2012-03-07 17:59:39 +00:00
< / div >
< div class = "next-up" >
< hr / >
2012-09-27 19:57:19 +00:00
Next up: < a href = "example-pager-filtered.html" > Pager plugin + filter widget › › < / a >
2012-03-07 17:59:39 +00:00
< / div >
< / div >
< / body >
< / html >
