Сортировка столбцов Tablesorter по входному значению

Я использую jQuery Tabelsorter, и он отлично работает.

Но я хочу, чтобы внутри каждого поля был входной тег, где значение для сценария сортировки находится внутри параметра входного значения.

СЕЙЧАС: <td><?php echo $value; ?></td>

ЦЕЛЬ: <td><input value="<?php echo $value; ?>"></td>

Как я могу сообщить jQuery Tablesorter новое местоположение «значения»?

Найдено в примерах Tablesorter 2.0 http://tablesorter.com/docs/example-option-text-extraction.html

Пример:

textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].childNodes[0].innerHTML; 
}

Моя попытка, но не работает:

textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].val();
}

javascript jquery tablesorter
person Mike    schedule 30.08.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вместо сортировщика таблиц используйте kendoui. Он предоставляет больше возможностей и прост в использовании kendoui

person Shivam    schedule 30.08.2013
comment
Это хорошая альтернатива, но зачем предлагать что-то, что стоит больших денег, когда есть такие же бесплатные продукты? - person Mottie; 31.08.2013

arrow_upward
0
arrow_downward

В исходном плагине tablesorter есть проблема с использованием метода updateCell, поэтому этот метод не будет работать при обновлении входных значений. Но вы можете попробовать мой форк сортировщика таблиц, в котором этой проблемы нет.

Вот демонстрация всего приведенного ниже кода.

По сути, вместо использования textExtraction, которое применяется ко ВСЕМ ячейкам таблицы, вам просто нужно добавить синтаксический анализатор:

$.tablesorter.addParser({
    id: "inputs",
    is: function () {
        return false;
    },
    format: function (s, table, cell) {
        return $(cell).find('input').val() || s;
    },
    type: "text"
});

затем сообщите tablesorter, к какому столбцу его применить (индекс с отсчетом от нуля):

$('table').tablesorter({
    headers: {
        0: { sorter: "inputs" } // zero-based index (first column = column 0)
    }
});

Затем убедитесь, что любые изменения во входных данных (если вы не сделаете их доступными только для чтения) распознаются tablesorter и отправляются на ваш сервер.

var resort = true, // resort table after update

// update all input types within the tablesorter cache when the change event fires.
// This method only works with jQuery 1.7+
// you can change it to use delegate (v1.4.3+) or live (v1.3+) as desired
// if this code interferes somehow, target the specific table $('#mytable'),
// instead of $('table')
$(window).load(function () {
    // this flag prevents the updateCell event from being spammed
    // it happens when you modify input text and hit enter
    var alreadyUpdating = false;
    $('table').find('tbody').on('change', 'input', function (e) {
        if (!alreadyUpdating) {
            var $tar = $(e.target),
                $table = $tar.closest('table');
            alreadyUpdating = true;
            $table.trigger('updateCell', [ $tar.closest('td'), resort ]);

            // *** update your server here ***

            setTimeout(function () {
                alreadyUpdating = false;
            }, 10);
        }
    });
});
person Mottie    schedule 31.08.2013