3

tablejQuery dataTables を使用して入力されたがあります。私は知りたいです：

  1. インデックス列を追加する方法。dataTables.netサイトには、作成方法ではなく、現在のインデックス ファイルにインデックス プロパティを与える方法を示す例があります。

  2. 列の 1 つをボリューム スライダーにしたいと考えています。0〜100の数字しかなく、jQueryUIスライダーを使用して作成したいと考えています。スライダー関数はどこで初期化する必要がありますか? dataTables 初期化関数の前または内部、またはその後、どのように?

4

1 に答える 1

0

インデックス列の追加については、https ://datatables.net/examples/api/counter_columns.html のオンライン ドキュメントで詳しく説明されています。

音量スライダーに関しては、それを機能させるためのハックな方法を見つけました。thead に空の th を追加し、tbody の各行の先頭に td を追加しました。最初の td には、スライダー div と 3 の行スパンがあります (私の例には 3 行しかありません)。他の tds は、display:none のスタイルで空です。

<table id="myTable" class="display">
    <thead>
        <tr>
            <th></th>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3">
                <div id="slider"></div>
            </td>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <!-- Other rows here -->
    </tbody>
</table>

JS では、ドキュメントに示されているインデックス列の例をいくつか変更して使用しました。DataTable の「initComplete」でスライダーを初期化し、テーブルがソートまたは検索されたときに再び初期化しています。

var table = $("#myTable").DataTable({
    //Table options here
    "initComplete":function(){
        $("#slider").slider(sliderOpts);
    }
});

table.on('order.dt search.dt', function(){
    table.column(0, {search:'applied', order:'applied'}).nodes().each(function(cell, i){
        if(i == 0){
            $(cell).attr("rowspan","3").html("<div id='slider'></div>").css("display","table-cell");
            $("#slider").slider(sliderOpts);
        } else {
            cell.innerHTML = '';
            $(cell).css("display","none")
        }
    })
}).draw();

ここに私のソリューションの jsfiddle があります: https://jsfiddle.net/r7jwv76L/2/

于 2016-02-08T01:22:22.740 に答える