在进行搜索或过滤到特定名称时,如果有多个结果,表格会失真,请参阅过滤前和过滤后显示表格的图像:
以下是我正在使用的代码:
<div class="pager">
<img src="../assets/images/first.png" class="first" alt="First" />
<img src="../assets/images/previous.png" class="prev" alt="Prev" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="../assets/images/next.png" class="next" alt="Next" />
<img src="../assets/images/last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<select class="gotoPage" title="Select page number"></select>
</div>
<table class="tablesorter">
<colgroup>
<col width="85" />
<col width="155" />
<col width="155" />
<col width="100" />
<col width="100" />
</colgroup>
这是javascript:
$(function() {
$(".tablesorter")
.tablesorter({
theme: 'blue',
// this is the default setting
cssChildRow: "tablesorter-childRow",
// initialize zebra and filter widgets
widgets: ["zebra", "filter", "pager"],
widgetOptions: {
// output default: '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
pager_removeRows: false,
// include child row content while filtering, if true
filter_childRows: true,
// class name applied to filter row and each input
filter_cssFilter: 'tablesorter-filter',
// search from beginning
filter_startsWith: false,
// Set this option to false to make the searches case sensitive
filter_ignoreCase: true
}
});
// hide child rows
$('.tablesorter-childRow td').hide();
// Toggle child row content (td), not hiding the row since we are using rowspan
// Using delegate because the pager plugin rebuilds the table after each page change
// "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
$('.tablesorter').delegate('.toggle', 'click', function() {
// use "nextUntil" to toggle multiple child rows
// toggle table cells instead of the row
$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();
return false;
});
// Toggle widgetFilterChildRows option
$('button.toggle-option').click(function() {
var c = $('.tablesorter')[0].config.widgetOptions,
o = !c.filter_childRows;
c.filter_childRows = o;
$('.state').html(o.toString());
// update filter; include false parameter to force a new search
$('table').trigger('search', false);
return false;
});
});
&#13;
表格HTML
<tr>
<td rowspan="5"> <!-- rowspan="5" makes the table look nicer -->
<a href="#" class="toggle">[[+id]] - More info</a> <!-- link to toggle view of the child row -->
</td>
<td>[[+deptown]]</td>
<td>[[+arrtown]]</td>
<td>[[+freightdate]]</td>
<td>[[+cubmt]]</td>
</tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Vehicle Type</div><div>[[+vehicletype]]<br></div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Job Details</div><div>[[+freightvehicledetail]]<br></div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Contact Details</div><div>[[+freightvehiclecontact]]<br></div></td></tr>
<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Expected Rate in RM</div><div>[[+returnrate]]<br></div></td></tr>
我有两个问题:
我只想添加,当表首次加载时,它只显示20个结果。
答案 0 :(得分:1)
看来问题是colspan
设置为4时应该设置为5
<td colspan="5">...</td>
我将HTML复制到this demo,它似乎没有任何问题。
要默认显示100个结果,请设置窗口小部件选项(因为您正在使用寻呼机窗口小部件)pager_size
option到100
。
// set number of rows to show; make sure to include this
// value in the select options
pager_size: 100,
此外,在寻呼机HTML
中的选择中包含此选项<select class="pagesize" title="Select page size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
提醒:默认情况下pager_savePages
option设置为true
,因此会将页面大小的最后设置保存到本地/会话存储,
因此,在您手动将页面大小选择为100
之前,将默认设置更改为100
似乎无法正常工作!或者清除本地/会话存储。