0

さて、私はかなり標準的な動的データテーブルを持っていますが、入力または選択ボックスの値に基づいて検索ボックスをフィルタリングするようには見えません。

oTable = $('#itemTable').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "sDom": '<""f>t<"F"lp>',
            "aoColumns": [
                { "sWidth": "45px", "bSearchable": false},
                { "sWidth": "150px"}, // <input type="text">
                { "sWidth": "150px"}, // <select>
                { "sWidth": "150px"}, // <select>
                { "sWidth": "125px"}, // <input type="text">
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false},
                { "sWidth": "75px", "bSearchable": false}
            ],

テキストボックスの値や選択ボックスの現在選択されている値に基づいて検索結果をフィルタリングするデータテーブルを取得するにはどうすればよいですか?

このjQuery DataTables - custom filter for column that contains text fieldを見つけましたが、それをうまく機能させることはできません

4

2 に答える 2

1

jqueryデータテーブル用のjquery-datatables-column-filterプラグインを使用して、これを機能させることができました

それを含めたら、データテーブルに追加.columnFilter()するだけです。このプラグインの優れた点は、データ テーブル「aoColumns」を通常どおり使用でき、.columnFilter()その特定の列を上書きするだけです。これを示すために他のデータテーブル設定を含めました。以下の例を参照してください。

var asInitVals = new Array();

$(document).ready(function() {
    var oTable = $('#myTable').dataTable( {
        "bPaginate": true,
        "fnDrawCallback":function(){$('.edit').editable(function(value, settings) { 
                            hasBeenEdited(this);
                            return(value);
                         }, { 
                            type    : 'text',
                            submit  : 'OK'
                        });},

        "oLanguage": {
            "sSearch": "Search all columns:",
        },
        "aoColumns": [
                        { "bSortable": true ,"bSearchable": true},
                        { "bSearchable": true},
                        {"bSortable": true ,  "bSearchable" : true}, 
                        {"bSearchable": true }, 
                        {"bSearchable": true }, 
                        { },
                        { }
                    ]
    } ).columnFilter({"aoColumns":[{ type: "select", values: [ 'Value 1', 'Value 2', 'Value 3']  },
         null,
         null,
         null,
         null,
         null,
         null]});
} );
于 2013-02-27T11:34:30.260 に答える
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;
}
于 2013-11-07T13:03:48.563 に答える