8

DataTables jQuery プラグインのチェックボックス フィールドを並べ替えて、チェックとチェックを外そうとしています。

次のように、テーブル内に入力 (チェックボックス) を作成しています。

'<input type="checkbox" '+ check +' />'

check には、「checked」または「」というテキストが含まれています。

これまでのところ、次のように、ソートの DOM チェックボックス タイプを追加しようとしました。

{ "sSortDataType": "dom-checkbox" }

プラグインのAPI ドキュメントのコード全体を使用すると、次のエラーが発生します。

Uncaught TypeError: コンソール内で未定義のプロパティ 'afnSortData' を読み取ることができません。


問題: 列ヘッダーを押しても、オンまたはオフのチェックボックスで列が並べ替えられません。

上記のエラーを修正する方法や、jQuery とプラグインのメソッドのみを使用してソートする別の方法を提案してもらいたいと思います。

ありがとう。

編集

固定コードで試してみました-エラーはありません。しかし、並べ替えはめちゃくちゃです。並べ替えではなく、互いに置き換えているだけです。例: 1 つのチェックボックスがオンで 9 つのチェックボックスがオフの場合、オンになっているチェックボックスは 3 番目から 6 番目に、また 3 番目に、というように切り替わります。

4

10 に答える 10

10

私がしたことは、非表示の P に bool var を作成することで、チェックボックスと同じ場所に配置されるようにすることです。チェックボックスの値を変更するオプションを無効にすると、並べ替えが機能するようになりました。

于 2013-04-13T07:54:13.190 に答える
4

によって提供された答えを少し調整する必要がありましたMoby's Stunt Double。追加のソートプラグインは必要ありません! ほんの少しのカスタムコーディング。

アイデアをありがとう、みんな！何らかの理由で、テーブルに対して一般的な解決策ではない特別な処理を行う必要がありました。それは私にとっては大丈夫でした。

チェックボックスが無効になり、プログラムでチェックされたため、 を呼び出すことができませんでし.checkedた。iColumn に基づく呼び出しも問題を引き起こしました。おそらく、0番目の列が隠されていたためです。

これは私のために働いたものです：

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn ) {
    var aData = [];
    $(oSettings.oApi._fnGetTrNodes(oSettings)).each( function () {
        var checker = $(this).find('.classOnSurroundingSpan input');
        aData.push( checker.prop("checked")==true ? "1" : "0" );
    } );
    return aData;
}

私のマークアップは次のようになりました (周囲のスパンは、無効なチェックボックスのクリックを追跡できるようにするためのソリューションの一部でした):

<span class='classOnSurroundingSpan'><input type='checkbox' disabled='disabled'/></span>

私のテーブル定義は（一部）：

"aoColumnDefs": [
    {"sSortDataType": "dom-checkbox",
    "aTargets":[1],
    "asSorting": ["desc"]}
]
于 2015-05-21T13:12:12.073 に答える
3

このソリューションは私にとってはうまくいったので、ブログ投稿を書きました。

http://blog.josephmisiti.com/sorting-booleans-in-jquery-datatables

于 2014-11-05T02:13:04.593 に答える
2

これは私のために働く：

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "orderDataType": "dom-text", type: 'string' },
        ]
    } );
} );
于 2016-02-01T18:52:42.880 に答える
0

チェックボックス要素にある種の一意の識別子がある場合、以下の例のように非常にきれいなことを行うことができます (これはプラグインの構文を並べ替えるデータテーブルであることに注意してください) 。

入力が次のようになっている場合:

<input data-app-id="1" class="migrateCheck" type="checkbox">

プラグインは次のようになります。

function checkboxCompare(a, b) {
    var aId = $(a).data('app-id'),
        bId = $(b).data('app-id'),
        aChecked = $('.migrateCheck[data-app-id=' + aId + ']:checked').length,
        bChecked = $('.migrateCheck[data-app-id=' + bId + ']:checked').length;

    if (aChecked && !bChecked) return -1;
    else if (!aChecked && bChecked) return 1;

    return 0;
}

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "checkbox-pre": function (a) {
        return a;
    },

    "checkbox-asc": function (a, b) {
        return checkboxCompare(a, b);
    },

    "checkbox-desc": function (a, b) {
        return checkboxCompare(b, a);
    }
});

次に、チェックボックスを含む列sType: "checkbox"の属性を指定するだけです。aoColumnDefs

于 2014-09-15T18:54:14.823 に答える