4

範囲によるフィルタリングについてhttp://datatables.net/examples/plug-ins/range_filtering.htmlのドキュメントを読みましたが、行のクラスでアイテムをフィルタリングする方法がよくわかりません。

クリックすると、各行のクラス (文字列値) で dataTable をフィルター処理するいくつかのボタンが必要です。たとえば、

<tr class="dont_filter">
<tr class="do_filter">

どちらもデフォルトで表示されます。誰かがボタンの 1 つをクリックすると、「do_filter」を含むすべての行が非表示になり、dataTables がリストを再描画して、この変更がすべてのページで発生するようにします。

4

1 に答える 1

7

これは、まったく別の目的で使用された datatables フィドルのフォークです。

http://jsfiddle.net/72xGx/

このサンプルは、datatables サイトの「範囲フィルタリング」の例を出発点として取り上げています。チェックボックスを使用してフィルターを適用するかどうかを決定し、すべてのフィルターはデフォルトでオンになっています。チェックボックスをオンまたはオフにすると、テーブル内のデータがそれに応じてフィルタリングされます。間違いなくこれで片付けができるかもしれませんが、それが目標を達成するための 1 つの方法であることがわかると思います。

JavaScript

/* Custom filtering function which will filter data in column four between two values */
$.fn.dataTableExt.afnFiltering.push(

function (oSettings, aData, iDataIndex) {
    var gA = $('#ckb-gradeA').is(':checked'),
        gC = $('#ckb-gradeC').is(':checked'),
        gU = $('#ckb-gradeU').is(':checked'),
        gX = $('#ckb-gradeX').is(':checked');

    var myRowClass = oSettings.aoData[iDataIndex].nTr.className;

    if (myRowClass === 'gradeA' || myRowClass === 'gradeA even' || myRowClass === 'gradeA odd') {
        return gA === true ? true : false;
    } else if (myRowClass === 'gradeC' || myRowClass === 'gradeC even' || myRowClass === 'gradeC odd') {
        return gC === true ? true : false;
    } else if (myRowClass === 'gradeU' || myRowClass === 'gradeU even' || myRowClass === 'gradeU odd') {
        return gU === true ? true : false;
    } else if (myRowClass === 'gradeX' || myRowClass === 'gradeX even' || myRowClass === 'gradeX odd') {
        return gX === true ? true : false;
    } else {
        return false;
    }
});

$(function () {
    /* Initialise datatables */
    var oTable = $('#example').dataTable();

    /* Add event listeners to the two range filtering inputs */
    $('#ckb-gradeA').change(function () {
        oTable.fnDraw();
    });
    $('#ckb-gradeC').change(function () {
        oTable.fnDraw();
    });
    $('#ckb-gradeU').change(function () {
        oTable.fnDraw();
    });
    $('#ckb-gradeX').change(function () {
        oTable.fnDraw();
    });
});

html テーブル構造の一部 (要素のいくつかのクラスに
注意するため)css<tr>

    <tr class="gradeC">
        <td>Trident</td>
        <td>Internet Explorer 5.0</td>
        <td>Win 95+</td>
        <td class="center">5</td>
        <td class="center">C</td>
    </tr>
    <tr class="gradeA">
        <td>Trident</td>
        <td>Internet Explorer 5.5</td>
        <td>Win 95+</td>
        <td class="center">5.5</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Trident</td>
        <td>Internet Explorer 6</td>
        <td>Win 98+</td>
        <td class="center">6</td>
        <td class="center">A</td>
    </tr>
于 2013-07-09T04:07:45.837 に答える