2009-12-23 3 views
10

Я только начинаю использовать отличный плагин TableSorter от Christian Bach, и мне нужно получить текущее направление сортировки столбца. У меня есть несколько столбцов:Как получить текущий порядок сортировки от платного плагина?

  • ID
  • Имя
  • Категория

ID и имя устанавливаются без сортируется с помощью

headers: { 0: {sorter: false}, 1: {sorter: false} } 

Я добавляю обработчик щелчка on Name, чтобы он запускал событие сортировки в столбце Категория. Используя пример «Sort table using a link outside the table», я могу получить заголовок Name, чтобы запустить сортировку категории, но он жестко закодирован для сортировки в одном направлении.

Как я могу получить его, чтобы посмотреть на текущее направление, которое сортируется в столбце Категория, и сортировать в противоположном направлении? (Я могу справиться с переворачиванием значений, так как порядок сортировки равен 0 или 1, я могу XOR значение, чтобы получить противоположное значение, например var sort; sort ^= sort; - мой вопрос в том, как получить текущее значение.

Вот код, который в настоящее время устанавливает обработчик щелчка на столбце Имя:

$("#nameCol").click(function() { 
    var sorting = [[2, 0]];  /* sort 3rd col (Category) descending */ 
    $("#SearchResults").trigger("sorton", [sorting]); /* SearchResults is the ID of the sortable table */ 
    return false;    /* cancel default link action on a#nameCol */ 
}); 

Благодаря

ответ

1

заголовки таблицы все должны называть то же событие щелчка:

$('th').click(function() { 
    handleHeaderClick(this); 
}); 

Тогда кли Обработчик ck должен добавлять/удалять соответствующие классы.

function handleHeaderClick(hdr) { 
    if ($(hdr).hasClass('headerSortDown') == true) { 
     $(hdr).removeClass('headerSortDown'); 
     $(hdr).addClass('headerSortUp'); 
    } else if ($(hdr).hasClass('headerSortUp') == true) { 
     $(hdr).removeClass('headerSortUp'); 
     $(hdr).addClass('headerSortDown'); 
    } else { 
     $('th', myTable).removeClass('headerSortUp headerSortDown'); 
     $(hdr).addClass('headerSortDown'); 
    } 
    doSomething(); 
}; 

Надеюсь, это поможет.

+0

d'oh, конечно! Я был сосредоточен на получении состояния через некоторый вызов API, но он выражается в атрибуте class ... просто проверьте это. Очень RESTy. Благодаря! – Val

3

Я написал функцию для сохранения текущего порядка сортировки. Это помогло мне в ситуации, когда стол был перестроен с нуля.

function SaveSortOrder(tablename) { 
//returns an array of a tablesorter sort order 
var hdrorder = new Array(); 
var hdrs = $("#" + tablename + " th"); 
var arrayindex = 0; 
hdrs.each(function (index) { 
    if ($(this).hasClass('headerSortDown')) { 
     hdrorder[arrayindex] = [index, 0]; 
     arrayindex++; 
    } 
    else if ($(this).hasClass('headerSortUp')) { 
     hdrorder[arrayindex] = [index, 1]; 
     arrayindex++; 
    }  
}); 

return hdrorder; 
} 
22

Вы можете использовать встроенный в sortEnd случае, чтобы получить SortOrder, как описано здесь: https://stackoverflow.com/a/4150187/363155

$("#yourtableId").on("sortEnd", function(event) { 
    // prints the current sort order to the console 
    console.log(event.target.config.sortList); 
}); 
9

Вы также можете захватить его пределами, в другом месте (например, в функции, запуск Аякса, ..), и только в случае необходимости, а не на каждый клик, с немного меньшими затратами, как это:

lastSortList=$("#mytable")[0].config.sortList; 

и пример для сортировки его обратно после Ajax обновления:

$("#mytable").trigger("sorton", [lastSortList]); 

Помните, что сначала объявить первую строку в правом объеме.

+1

Это решение намного лучше, чем принятый ответ. –