Question

您好我正在使用直接从Learning jQuery 1.3获取的表操作（排序）脚本，并且我运行了自己的脚本，该脚本最初将显示的表行限制为10：

的JavaScript

$(document).ready(function () {
$('#table_wrapper').removeClass('top_noround');
var numShown = 10; // Initial rows shown & index
var numRows = $('tbody').find('tr').length; // 7
var numLeft = numRows - numShown;

// Hide rows and add clickable div
$('#table_wrapper tbody').find('tr:gt(' + (numShown - 1) + ')').hide().end()
$('#table_wrapper').after('<div id="more"><a>Show all free bet offers <span>(' + numLeft + ' more)</span></a></div>');


$('#more').toggle(

function () {
    numShown = numShown + numRows;
    $('tbody').find('tr:lt(' + numShown + ')').show();
    $("#more a").html("Show top 10 offers");
}, function () {
    numShown = 10;
    $('tbody').find('tr:gt(' + (numShown - 1) + ')').hide();
    $('#more a').html('Show all free bet offers <span>(' + numLeft + ' more)</span>');
    $(window).scrollTop($('th').offset().top);
});

}）

HTML

<div id="table_wrapper" class="top_noround">
    <table class="sortable jquery-thead">
        <thead>
            <tr>
                <th>
<!--Empty, no sort on this column-->
                </th>
                <th>
<!--Empty, no sort on this column-->
                </th>
                <th class="sort-numeric ">
                    <a class="button blue small">
                        Column 3 
                    </a>
                </th>
                <th class="sort-numeric">
                    <a class="button green small">
                        Column 4 
                    </a>
                </th>
                <th class="sort-numeric">
                    <a class="button magneta small">
                        Column 5 
                    </a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Row 1 Column 1 Data
                </td>
                <td>
                    Row 1 Column 2 Data
                </td>
                <td>
                    Row 1 Column 3 Data
                </td>
                <td>
                    Row 1 Column 4 Data
                </td>
                <td>
                    Row 1 Column 5 Data
                </td>
            </tr>
            <!--MORE ROWS HERE (OVER 10) -->
        </tbody>
    </table>
</div>

我遇到的问题是，如果我点击列上的thead我要排序它只会显示10行显示，它不会考虑延伸到当前隐藏的10行以下的其他行由于我的脚本。如果我单击以显示表的所有行，然后排序正常工作。

由于

Answer 1

我建议您使用jQuery tablesorter和pages插件。那里有一个很好的例子webpage。您可以显示X许多行，但是当您对数据进行排序时，您将对所有数据进行排序，而不仅仅是可见的。

如果有超过10行的数据，我只显示寻呼机，为此，我在我的主要JavaScript文件中使用辅助函数，我在文档准备就绪。

function pager ($table, $pager) {
    if ($table.find('tbody tr').length > 10) {
        $table.tablesorterPager({ container: $pager });
        $pager.show();
    } else {
        $pager.hide();
    }
}

$(document).ready(function () {
    $("table.tablesorter").tablesorter();
    pager($("table.tablesorter"), $("#pagerId"));
});

度假村表包括隐藏的行

的JavaScript

HTML

1 个答案: