table 数据未出现在使用 tablesorter 加载的页面上
table data not appering on page load using tablesorter
使用 table 中的 ajax 加载 table 数据，我遵循 https://mottie.github.io/tablesorter/docs/example-pager-ajax.html
Load table data using ajax & mysql in tablesorter plugin
I would prefer to load first 25 record in table when page load . Does the tablesorter pager plugin support this? If so, what am I missing, because the documentation shows this example:i will try to load table data using table sorter.how i will set url
for page load event when i click on next button table record get
successfully.here i need to more setting for load table data when page
load.how i will set total rows ,how to set ajax url it`s not working properly
<?php echo $header; ?>
<script id="js">
$( document ).ready(function() {
// Initialize tablesorter
// ***********************
$("table")
.tablesorter({
theme: 'blue',
widthFixed: false,
sortLocaleCompare: true, // needed for accented characters in the data
sortList: [ [0,1] ],
widgets: ['zebra', 'resizable','filter']
})
// initialize the pager plugin
// ****************************
.tablesorterPager({
// **********************************
// Description of ALL pager options
// **********************************
// target the pager markup - see the HTML block below
container: $(".pager"),
ajaxUrl : '<?php echo SITE_URL."admin/index.php?route=technology/products/get_pro/"?>{page}?{filterList:filter}&{sortList:column}',
// use this option to manipulate and/or add additional parameters to the ajax url
customAjaxUrl: function(table, url) {
// manipulate the url string as you desire
// url += '&currPage=' + window.location.pathname;
// trigger a custom event; if you want
$(table).trigger('changingUrl', url);
// send the server the current page
return url;
},
ajaxError: null,
// add more ajax settings here
// see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
ajaxObject: {
type: 'GET', // default setting
dataType: 'json'
},
ajaxProcessing: function(data){
alert();
if (data && data.hasOwnProperty('rows')) {
var indx, r, row, c, d = data.rows,
// total number of rows (required)
total = data.total_rows,
// array of header names (optional)
headers = data.headers,
// cross-reference to match JSON key within data (no spaces)
headerXref = headers.join(',').replace(/\s+/g,'').split(','),
// 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") {
// match the key with the header to get the proper column index
indx = $.inArray( c, headerXref );
// add each table cell data to row array
if (indx >= 0) {
row[indx] = d[r][c];
}
}
}
rows.push(row); // add new row array to rows array
}
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
return [ total, rows, headers ];
}
},
// 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: {size}, {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} to {endRow} ({totalRows})',
// call
initialRows: {
total: 100,
filtered: 1
},
// 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)
page: 0,
// Number of visible rows - default is 10
size: 25,
// 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.
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
// 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
});
});
</script>
<section class="page-content">
<breadcrumbs-panel page-title="" class="breadcrumbs" id="menu"></breadcrumbs-panel>
<div class="module">
<div class="width100 gold-border-bottom">
<div class="floatleft">
<h1>View Products</h1>
</div>
</div>
<div class="margin-top10">
<table id="campanion-product" class="tablesorter display responsive">
<thead>
<tr>
<th>Product Name</th>
<th>Part Number</th>
<th>Product ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr >
<td data-value=">25"> 1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<style>
.pager input.ts-startRow {
min-width: 30px;
}
</style>
<!--Pagination!-->
<div class="pager width100">
<img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-first.png" class="first" alt="First" />
<img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-prev.png" class="prev" alt="Prev" />
<!-- the "pagedisplay" can be any element, including an input -->
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
<img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-next.png" class="next" alt="Next" />
<img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="25" selected="selected">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option id="allRowsTablePaginationOption" value="all">All Rows</option>
</select>
<!--<select class="gotoPage" title="Select page number"></select>-->
</div>
</div>
</div>
</section>
<?php echo $footer; ?>
我可能错了，但从截图中的 URL 来看，还有第二个 ? 如果解析不正确可能会造成一些麻烦：
index.php?route=technology/products/get_pro/0?filter&column[0]=1
↑ ↑
下一页按钮可能未激活（未在屏幕截图中显示），因为服务器返回 25 的 total_rows 值，等于 size 设置。寻呼机代码假设所有行都在显示；将此设置为数据库中的条目总数。
its because of widget i will set those are not working currently I need to kept only zebra widget which is the default & i also set wrong url prams i solved url issue using this url : whosebug.com/a/15303766/8064611
One More demo http://jsfiddle.net/Mottie/uwZc2/44/
$("table")
.tablesorter({
theme: 'blue',
widthFixed: false,
sortLocaleCompare: true, // needed for accented characters in the data
sortList: [ [0,1] ],
widgets: ['zebra']
})
使用 table 中的 ajax 加载 table 数据，我遵循 https://mottie.github.io/tablesorter/docs/example-pager-ajax.html
Load table data using ajax & mysql in tablesorter plugin
I would prefer to load first 25 record in table when page load . Does the tablesorter pager plugin support this? If so, what am I missing, because the documentation shows this example:i will try to load table data using table sorter.how i will set url for page load event when i click on next button table record get successfully.here i need to more setting for load table data when page load.how i will set total rows ,how to set ajax url it`s not working properly
<?php echo $header; ?>
<script id="js">
$( document ).ready(function() {
// Initialize tablesorter
// ***********************
$("table")
.tablesorter({
theme: 'blue',
widthFixed: false,
sortLocaleCompare: true, // needed for accented characters in the data
sortList: [ [0,1] ],
widgets: ['zebra', 'resizable','filter']
})
// initialize the pager plugin
// ****************************
.tablesorterPager({
// **********************************
// Description of ALL pager options
// **********************************
// target the pager markup - see the HTML block below
container: $(".pager"),
ajaxUrl : '<?php echo SITE_URL."admin/index.php?route=technology/products/get_pro/"?>{page}?{filterList:filter}&{sortList:column}',
// use this option to manipulate and/or add additional parameters to the ajax url
customAjaxUrl: function(table, url) {
// manipulate the url string as you desire
// url += '&currPage=' + window.location.pathname;
// trigger a custom event; if you want
$(table).trigger('changingUrl', url);
// send the server the current page
return url;
},
ajaxError: null,
// add more ajax settings here
// see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
ajaxObject: {
type: 'GET', // default setting
dataType: 'json'
},
ajaxProcessing: function(data){
alert();
if (data && data.hasOwnProperty('rows')) {
var indx, r, row, c, d = data.rows,
// total number of rows (required)
total = data.total_rows,
// array of header names (optional)
headers = data.headers,
// cross-reference to match JSON key within data (no spaces)
headerXref = headers.join(',').replace(/\s+/g,'').split(','),
// 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") {
// match the key with the header to get the proper column index
indx = $.inArray( c, headerXref );
// add each table cell data to row array
if (indx >= 0) {
row[indx] = d[r][c];
}
}
}
rows.push(row); // add new row array to rows array
}
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
return [ total, rows, headers ];
}
},
// 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: {size}, {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} to {endRow} ({totalRows})',
// call
initialRows: {
total: 100,
filtered: 1
},
// 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)
page: 0,
// Number of visible rows - default is 10
size: 25,
// 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.
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
// 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
});
});
</script>
<section class="page-content">
<breadcrumbs-panel page-title="" class="breadcrumbs" id="menu"></breadcrumbs-panel>
<div class="module">
<div class="width100 gold-border-bottom">
<div class="floatleft">
<h1>View Products</h1>
</div>
</div>
<div class="margin-top10">
<table id="campanion-product" class="tablesorter display responsive">
<thead>
<tr>
<th>Product Name</th>
<th>Part Number</th>
<th>Product ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr >
<td data-value=">25"> 1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<style>
.pager input.ts-startRow {
min-width: 30px;
}
</style>
<!--Pagination!-->
<div class="pager width100">
<img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-first.png" class="first" alt="First" />
<img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-prev.png" class="prev" alt="Prev" />
<!-- the "pagedisplay" can be any element, including an input -->
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
<img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-next.png" class="next" alt="Next" />
<img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="25" selected="selected">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option id="allRowsTablePaginationOption" value="all">All Rows</option>
</select>
<!--<select class="gotoPage" title="Select page number"></select>-->
</div>
</div>
</div>
</section>
<?php echo $footer; ?>
我可能错了，但从截图中的 URL 来看，还有第二个 ? 如果解析不正确可能会造成一些麻烦：
index.php?route=technology/products/get_pro/0?filter&column[0]=1
↑ ↑
下一页按钮可能未激活（未在屏幕截图中显示），因为服务器返回 25 的 total_rows 值，等于 size 设置。寻呼机代码假设所有行都在显示；将此设置为数据库中的条目总数。
its because of widget i will set those are not working currently I need to kept only zebra widget which is the default & i also set wrong url prams i solved url issue using this url : whosebug.com/a/15303766/8064611
One More demo http://jsfiddle.net/Mottie/uwZc2/44/
$("table")
.tablesorter({
theme: 'blue',
widthFixed: false,
sortLocaleCompare: true, // needed for accented characters in the data
sortList: [ [0,1] ],
widgets: ['zebra']
})