1

jQueryDataTablesプラグインを使用しています。

テキストフィールドを含む列のカスタムフィルターを作成したいと思います。

列の入力フィールドのvalue属性に基づいてフィルタリングしたいと思います。

これを行う必要があるのは、フィルターがhtmlを検索パターンに一致させないようにするためです。

たとえば、すべての行を検索せずにidまたはformを検索することはできません（テキストフォームはテキストフィールドのid属性にあります）。

mDataが私の問題の答えであると言う多くの質問やフォーラムを見つけました。

何をしようとしても、動かせません。

列を定義する方法は次のとおりです。

prefColumns:  [ { bSortable: true,  bSearchable: false, sSortDataType: 'dom-checkbox' },
                { bSortable: true,  bSearchable: true  },
                { bSortable: true,  bSearchable: true,  sSortDataType: 'dom-text' },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false } 
              ]

上記の配列を次のようにaoColumnsプロパティに割り当てます。

// Find all the pref tables we want to turn into DataTables

var $categoryTables = $('table[id$="cat-table"]');

// Create a jQuery dataTable for each pref category

$categoryTables.dataTable( { 
    sScrollY:    "350px",
    bPaginate:   false,
    bAutoWidth:  false,
    sDom:        '<"prefsFilter"f>t',
    aoColumns:   prefColumns,
    aaSorting:   [[ 1, 'asc' ]]
});

すべてが正常に動作します。

上記で使用したカスタムソート関数は次のとおりです（念のため）。

$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) {
    var aData = [];
    $('td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each(function () {
        aData.push( this.value );
    } );
    return aData;
};

// Add a custom sort function for columns that might contain checkbox fields.

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn ) {
    var aData = [];
    $('td:eq('+iColumn+')', oSettings.oApi._fnGetTrNodes(oSettings) ).each(function () {
        var $box = $(':checkbox', $(this));
        if ($box.length === 0) {
            aData.push("1");
        }
        else {
            aData.push( $box.is(':checked') ? "2" : "3" );
        }
    } );
    return aData;
};

// Add a custom sort function for columns with slider buttons

$.fn.dataTableExt.afnSortData['slider'] = function (oSettings, iColumn) {
    var aData = [];
    var s = 'input:hidden[id$="State"]';
    $('td:eq('+iColumn+') ' + s, oSettings.oApi._fnGetTrNodes(oSettings) ).each(function () {
        aData.push( this.value );
    } );
    return aData;
};

私のテーブルの3番目の列は、テキストフィールドを含む列です。

mDataプロパティを使用するために、次のようなもので列定義を変更しています。

prefColumns:  [ { bSortable: true,  bSearchable: false, sSortDataType: 'dom-checkbox' },
                { bSortable: true,  bSearchable: true  },

                // add a mData property to the third column

                { bSortable: true,  bSearchable: true,  sSortDataType: 'dom-text', 
                  mData: function (src, type, val) { return type === 'filter' ? $(src).attr('value') : src; } },

                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false, sSortDataType: 'slider'   },
                { bSortable: true,  bSearchable: false } 
              ]

私は上記のようなものをたくさん試しましたが、ドキュメントやオンラインの例のように機能しているものはないようです。

フォーラムやその他の質問で私が見つけたものは何も機能していません。

誰かが私が誤解していることについての手がかりを私に与えることができれば、私はそれを本当に感謝します。

4

2 に答える 2

2

テキスト列にこれを試してください：

{ "bSortable": true ,  "bSearchable" : true,
   "mData": function ( source, type, val ) {
       if (type === 'set') {
            source.disp = val
            source.filter = $(val).attr('value');
            return;
        }
        else if (type === 'filter') {
            return source.filter;
        }

        return source.disp; 
     }

  }

唯一の欠点は、フィールドを変更してからもう一度検索しようとすると、変更が考慮されないことです。したがって、mDataメソッドをオンザフライで再度呼び出す方法がわかれば、すべてが正常に機能します。

于 2012-10-24T14:52:28.513 に答える
0

aoColumnsのmRender属性を使用して、フィルタリングする選択ボックスの選択された値を指定できます。

"mRender": function ( data, type, full ) {
    if (type === "filter")
    {
          node = $.parseHTML(data);
          var val = $(node).find("select option:selected").text();                     
              return val;
    }
    return data;
}

このメソッドを使用する場合は、その列でSortDataType='dom-select'を使用しないでください。

于 2013-11-07T13:14:19.660 に答える