Question

对于我的表格，我有一个固定的标题和可滚动的数据。这是通过使用两个表并将数据包装在具有溢出自动的div中来实现的（这是因为<tbody>不能将可滚动的数据附加到它上。）

<div class="uiGrid">
    <div class="uiGridHeader">
        <table>
            <colgroup>
                <col style="width:29px;text-align:center" />
                <col />
                <col style="width:100px" />
                <col style="width:100px" />
                <col style="width:150px" />
                <col style="width:46px" />
                <col style="width:62px" />
            </colgroup>
            <thead>
                <tr>
                    <th scope="col"><input type="checkbox" id="checkall" /></th>
                    <th scope="col"><a href="#">Name</a></th>
                    <th scope="col">Post Code</th>
                    <th scope="col"><a href="#">SIC Code</a></th>
                    <th scope="col"><a href="#">&#8470; of Employees</a></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="uiGridContent">
        <table class="sortable">
            <colgroup>
                <col style="width:29px;text-align:center" />
                <col />
                <col style="width:100px" />
                <col style="width:100px" />
                <col style="width:150px" />
                <col style="width:46px" />
                <col style="width:62px" />
            </colgroup>
            <tbody>
                <!-- DATA ROWS GO HERE -->
            </tbody>
        </table>
     </div>

我想使用类似jQuery TableSorter插件的东西：http://tablesorter.com/但是因为我有两个表它不起作用......我怎么能让它工作？

$("table.sortable").tablesorter({
            headers: {
                0: { sorter: false },
                5: { sorter: false },
                6: { sorter: false }
            }
        });

相反，我一直试图使用以下方法绑定两者：

$('table').tablesorter().bind('sortEnd', function ()
        {
            var $cloneTH = $('.uiGridHeader th');
            var $trueTH = $('uiGridContent th');
            $cloneTH.each(function (index) {
                $(this).attr('class', $($trueTH[index]).attr('class'));
            });
        });

        $('.uiGridHeader th').each(function (index) {
            var $cloneTH = $(this);
            var $trueTH = $($('.uiGridContent th')[index]);
            $cloneTH.attr('class', $trueTH.attr('class'));
            $cloneTH.click(function () {
                $trueTH.click();
            });
        });

但仍然没有工作......

编辑：

根据下面的答案，我试图让它随时更新HTML：

var copyThead = $(".uiGridContent thead").html();
    copyThead = '<table><thead>' + copyThead + '</thead></table>';

    $(".uiGridHeader").html(copyThead);
    $(".uiGridContent table").tablesorter();
    $(".uiGridContent table thead").hide();

    $(".uiGridHeader th").click(function () {

        // Get updated HTML
        var FindcopyThead = $(".uiGridContent thead").html();
        var NewcopyThead = '<table><thead>' + FindcopyThead + '</thead></table>';

        $(".uiGridHeader").html(NewcopyThead);

        var index = $(".uiGridHeader th").index(this);
        var sorting = [[index, 0]];
        $(".uiGridContent table").trigger("sorton", [sorting]);
        return false;
    });

但是我在点击时遇到错误：Uncaught TypeError: Cannot set property 'count' of undefined

Answer 1

在我看来，你应该创建一个REAL结构化表（在数据表内部。

然后我会使用jQuery复制thead并使用内容复制到#uiGridHeader，并隐藏“原始”，然后你可以使用tablesorters外部排序来做这个技巧 http://tablesorter.com/docs/example-trigger-sort.html

这可能是一个解决方案吗？我试试小提琴：）

有所作为：

http://jsfiddle.net/cARZz/

两个表上的jQuery Tablesorter

1 个答案: