jQuery Tablesorter на две таблицы - PullRequest
Новая
       3

jQuery Tablesorter на две таблицы

3 голосов
/ 10 октября 2011

Для моих таблиц у меня есть фиксированный заголовок и прокручиваемые данные.Это достигается с помощью двух таблиц и оборачивания данных в 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 наfly: 

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

1 Ответ

3 голосов
/ 10 октября 2011

По моему мнению, вы должны создать РЕАЛЬНУЮ структурированную таблицу (иметь внутреннюю часть таблицы данных.

Тогда я бы использовал jQuery, чтобы скопировать thead и сделать копию #uiGridHeader с содержимым, и скрыть«оригинал», а затем вы можете использовать внешнюю сортировку таблиц, чтобы выполнить трюк http://tablesorter.com/docs/example-trigger-sort.html

Возможно ли это как решение? Я попробую это на скрипке:)

Естьчто-то работает:

http://jsfiddle.net/cARZz/

...