Сортиране на колони на Tablesorter по входна стойност

Използвам jQuery Tabelsorter и работи чудесно.

Но искам вътре във всяко -поле input-tag, където стойността за скрипта за сортиране се намира вътре в параметъра за входна стойност.

СЕГА: <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.its предоставя повече функции и лесен за използване kendoui

person Shivam    schedule 30.08.2013
comment
Това е хубава алтернатива, но защо предлагате нещо, което струва много пари, когато има също толкова добри безплатни продукти? - person Mottie; 31.08.2013

arrow_upward
0
arrow_downward

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

Ето демонстрация на целия код по-долу, събран заедно.

По принцип вместо да използвате 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