Сортировка нескольких таблиц с таблицей сортировки - PullRequest
Новая
       14

Сортировка нескольких таблиц с таблицей сортировки

3 голосов
/ 16 ноября 2011

Я использую плагин jQuery tablesorter, чтобы пользователи могли сортировать таблицы данных на нашем сайте. Недавно я наткнулся на область, где несколько таблиц, использующих сортировщик таблиц, должны были отображаться на одной странице, у меня не было никаких проблем с этим, и плагин tableorter работал отлично. Несколько пользователей обратились к нам с просьбой иметь возможность сортировать все таблицы одновременно, и это хорошо, поскольку все таблицы имеют одинаковую структуру, просто разные данные в них. Вот пример для таблицы 1: 

<table>
    <thead>
       <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Age</th>
       </tr>
    </thead>
    <tbody>
       <tr>
           <td>1</td>
           <td>Bob</td>
           <td>24</td>
       </tr>
       <tr>
           <td>1</td>
           <td>James</td>
           <td>33</td>
       </tr>
    </tbody>
</table>

Пример для таблицы 2: 

<table>
    <thead>
       <tr>
           <th>ID</th>
           <th>Name</th>
           <th>Age</th>
       </tr>
    </thead>
    <tbody>
       <tr>
           <td>5</td>
           <td>PJ</td>
           <td>28</td>
       </tr>
       <tr>
           <td>1</td>
           <td>Sue</td>
           <td>39</td>
       </tr>
    </tbody>
</table>

Итак, как вы можете видеть, таблицы похожи, но отображают разные данные. Проблема заключалась в том, как разрешить пользователям сортировать все таблицы одновременно, но позволить им по-прежнему сортировать таблицы по отдельности, поскольку они могут захотеть это сделать. Мы пришли к мысли, что если они отсортируют первую таблицу на странице, мы хотели бы использовать это событие в качестве нашего указания, что они хотят отсортировать все таблицы на странице в той же структуре сортировки, что и первая. Мой главный вопрос: как бы кто-то это сделал? Я думаю, что нашел лучшее место для этой работы, виджеты табличного сортировщика, но, похоже, не могу получить последний кусок головоломки на месте.

Вот то, что у меня сейчас есть для моего виджета и регистрационного кода виджета: 

$(function() {

    $("table:not(:first)").tablesorter();

    $.tablesorter.addWidget({
        id: "tableForceSort",
        format: function (table) {
            if (table.config.sortList.length > 0) {
                $('table:not(:first)').trigger("sorton", table.config.sortList);
            }
        }
    });

    $("table:first").tablesorter({
        widgets: ['tableForceSort']
    });
});

Как вы можете видеть, я добавляю сортировщик таблиц ко всем таблицам на странице, но делаю отдельную регистрацию для первой таблицы, чтобы я мог добавить специальный виджет в эту таблицу для принудительной сортировки остальных таблиц. на странице. Это все работает, проблема возникает для меня, когда я на самом деле пытаюсь отсортировать таблицу, и она запускает событие триггера, это приводит к разрыву страницы, и я не могу понять, почему. Если у кого-то есть какой-то способ исправить это или некоторые другие идеи о том, как решить эту проблему, пожалуйста, дайте мне знать.

Спасибо

1 Ответ

2 голосов
/ 16 ноября 2011

Попробуйте использовать событие "sortEnd" ... Мне пришлось добавить флаг, чтобы предотвратить рекурсию.Надеюсь, я добавил достаточно комментариев, чтобы все это имело смысл ( demo ). 

$('table').tablesorter();

// using a flag that prevents recursion - repeatedly calling this same function,
// because it will trigger the "sortEnd" event after sorting the other tables.
var recursionFlag = false;

// bind to table sort end event on ALL tables
$("table").bind("sortEnd",function(e, table) {

    // ignore if the flag is set
    if (!recursionFlag) {
        recursionFlag = true;

        // find other tables to resort (but not the current one)
        // the current sort is stored in "table.config.sortList"
        $('table').not(this).trigger("sorton", [ table.config.sortList ]);

        // reset recursion flag after 1 second... so you can't sort faster
        // than that or it won't trigger the other tables
        // you can adjust this value; it all depends on how much data needs
        // to be sorted in the tables. Run the tablesorter with "debug:true"
        // to find out the times needed to sort (but do it in IE as it is
        // the slowest browser)
        setTimeout(function(){ recursionFlag = false; }, 1000);

    }
});
...