Tablesorter 过滤器函数扭曲了 Table 结果

Question

当搜索或过滤特定名称时，如果有多个结果，table 会失真，请查看显示 table 过滤前和过滤后的图像：

这是我使用的代码：

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

Table 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 个问题：

如何让搜索显示清晰、未失真的结果，只需单击 'more info' 即可显示子数据？
要默认显示 100 个结果，我需要做哪些更改？

我只想补充一点，table 第一次加载时它只显示 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 中包含此选项

<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，所以将最后一次设置的页面大小保存为[=37] =] 存储，因此，将默认设置更改为 100 似乎不起作用 ，直到您手动将页面大小 select 设置为 100！或者清除 local/session 存储。

Tablesorter 过滤器函数扭曲了 Table 结果

Tablesorter filter Function Distorts Table Results

javascript

jquery

tablesorter