的tablesorter濾波器功能歪曲表結果

Question

做當搜索或過濾器，以特定的名稱，如果有多個結果表變得失真，見圖像，顯示錶濾波器之前和過濾後：

這裏是我使用的代碼：

<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; 
 
    }); 
 
});

表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> 

我有2個問題：

1. 如何讓搜索顯示乾淨無失真的結果，其中只需要點擊 '更多信息'會揭露兒童數據？
2. 我做了哪些改變以獲得默認顯示的100個結果？

我只是想添加，當表第一次加載時，它只顯示20個結果。

Answer 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！或清除本地/會話存儲。