0

ネガで dataTable をうまくソートできますが、 select.change() イベントでソートする代わりにフィルタリングしたかったのです。基本的には、列 4 の値を取得し、選択ボックスの選択 {すべて、正、または負} に基づいて行をレンダリングするだけで済みます。

<table class="data-table">
    <thead>
      <tr>
        <th>Text</th>
        <th>Text</th>
        <th>Text</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
         <td>Lorem</td>
         <td>Ipsum</td>
         <td>Dolor</td>
         <td>$1.99</td>
      </tr>
      <tr>
         <td>Lorem</td>
         <td>Ipsum</td>
         <td>Dolor</td>
         <td>$2.99</td>
      </tr>
      <tr>
         <td>Lorem</td>
         <td>Ipsum</td>
         <td>Dolor</td>
         <td>$-1.99</td>
      <tr>
         <td>Lorem</td>
         <td>Ipsum</td>
         <td>Dolor</td>
         <td>$-2.99</td>
      </tr>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">
          <select class="select-filter">
            <option value="1">All</option>
            <option value="2">Positive</option>
            <option value="3">Negative</option>
          </select>
      </tr>
    </tfoot>
</table>

次に、いくつかのjsを試しました：

$(function(){
    $(".data-table").dataTable();
    $('.select-filter').change(function(){oTable.fnDraw();});
});

しかし、私がやりたいことを最も簡単に「見える」ものは次のとおりです。

$(".data-table").dataTable().columnFilter({
    aoColumns: [
      null,
      null,
      null,
      {type: "select"}
    ]
});

ただし、それはすべての値を含む選択を作成するだけです。どうすればこれを達成できますか?

4

2 に答える 2

3

ここに1つの方法があります：http://jsfiddle.net/AGsPA/

「myFilter」は選択の ID です。afnFiltering を使用すると、独自のカスタム フィルターをデータ テーブルに追加できます。以下のフィルター関数は単純であることに注意してください。[値] 列にダッシュがないものはすべて正と見なされます (これには空白が含まれます)。ダッシュが付いているものはすべて負です。

var myFilter = $('#myFilter');

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        if (myFilter.val() == 1)
            return true;
        else if (myFilter.val() == 2)
            return (aData[3].indexOf('-') == -1);
        else
            return (aData[3].indexOf('-') != -1);
    }
);
myFilter.change(function () { $('#myTable').dataTable().fnDraw(); });

これにも興味があるかもしれません: DataTables 列フィルター アドオン

于 2013-05-28T00:55:41.773 に答える
1

私はこれを「最良の方法」とは提案しませんが、これが1 つの方法です。サンプルは jsbin に投稿されています。

http://jsbin.com/afogup/2/edit

最初の列は非表示になりますが、正と負を表す "2" または "3" が含まれていることに注意してください。

  <tr>
    <th>Filter Val</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Value</th>
  </tr>

select要素をフィルターとして使用するためのデータテーブルのドキュメントに注意してください。
http://www.datatables.net/examples/api/multi_filter_select.html

次に、 を作成するための呼び出しに注意してくださいdatatable。

$(document).ready(function() {
    /* Initialise the DataTable */
    var oTable = $('#example').dataTable( {
      "aoColumnDefs": [
          { "bVisible": false, "aTargets": [ 0 ] }
       ],
       "oLanguage": {
           "sSearch": "Search all columns:"
       }
    });

    /* select menu in the table footer */

   $('select.select-filter').change( function () {
      var selectVal = parseInt($(this).val(), 10); 
      if (selectVal === 1) {
          oTable.fnFilter( "", 0 );
      } else {   
          oTable.fnFilter( selectVal, 0 );         
      }
    });
});
于 2013-05-28T00:55:39.897 に答える