jqueryのTablesorter - <入力>要素を有する列を並び替え

Question

私はこのようなテーブルを持っています

|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        | 

ここで、更新列は、チェックボックスの<input type='checkbox' />が含まれています。

チェックボックスの初期状態は、テーブルをレンダリングする前に決定されるが、行がデータベースからフェッチされた後（これは、サーバー側で、条件のセットに基づいています）。

チェックボックスは、デフォルトまたは無効（disabled='disabled'属性としてinput）によってチェックされない、デフォルトでチェックすることができます。

私は jQueryのTablesorterが私のテーブルをソートするを使用しています。そして私は、チェックボックスを含む列でソートできるようにしたいと思います。どのようにそれは（それが助けになるならば、私は、多分私のinput要素にいくつかの追加の属性を渡すことができます...）可能ですか？
私はそれを処理するために、自分のパーサを書くべきですか？

Answer 1

（つまり、列をソートするために使用されます）だけ入力する前に隠されたスパンを追加し、その中にいくつかのテキストが含まれています。ような何かます：

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

：必要な場合はチェックを外す/チェックされている場合、それは前の兄弟（スパン）の内容を変更するように、

は、チェックボックスにイベントを添付することができます

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

注：それはエラーがあるかもしれないので、私は、コードをチェックしていません。

。

Answer 2

これは、HAARTの答えのより完全な/正しいバージョンがあります。

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

}); 

Answer 3

私は新機能をサポート/フォークjQueryのTableSorterライブラリを使用していますので、

私はこの応答を追加しています。入力/選択フィールド用のオプションのパーサライブラリが含まれています。

http://mottie.github.io/tablesorter/docs/する

ここでは例です： http://mottie.github.io/tablesorter/docs/example-widget -grouping.htmlする そしてそれは、入力/選択パーサライブラリ「パーサ入力-select.js」を含むヘッダオブジェクトを追加すると列と解析タイプを宣言することで行われます。

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

付属

追加パーサは以下のとおりです。日付（W /シュガー＆DateJS）の解析、ISO8601の日付、月、2桁の年、平日、距離（フィート/インチ＆メトリック）とタイトルフォーマットは（ "A" ＆ "ザ・" を削除します） 。

Answer 4

あなたはtablesorter jQueryプラグインを使用すると、すべてのチェックボックスの列をソートすることができますカスタムパーサーを追加することができます：

$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length > 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length > 0 ? 0 : 1;
        },
        type: "numeric"
    });

Answer 5

あなたはこのようになめらか、TableSorterにカスタムパーサーを追加することができます：

 $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

そして、あなたのテーブルにそれを使用する

$("table").tablesorter(headers:{0:{sorter:input}});

Answer 6

ちょうど1最後の仕上げは、アーロンの答えは完全なものとスタックオーバーフローエラーを回避します。だから、上記のように$.tablesorter.parser()機能を使用することに加えて、私はそれが実行時に更新され、チェックボックスの値を使用して動作させるために、私のページに以下を追加する必要がありました。

    var checkboxCahnged = false;

    $('input[type="checkbox"]').change(function(){
        checkboxChanged = true;
    });

    // sorterOptions is a variables that uses the parser and disables
    // sorting when needed
    $('#myTable').tablesorter(sorterOptions);
    // assign the sortStart event
    $('#myTable')..bind("sortStart",function() {
        if (checkboxChanged) {
            checkboxChanged = false;
            // force an update event for the table
            // so the sorter works with the updated check box values
            $('#myTable')..trigger('update');
        }
    });

Answer 7

    <td align="center">
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
    <input type="checkbox" value="YOUR DATA BASE VALUE"/>
    </td>

//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});