Question

我有一个使用jQuery dataTables填充的table。我想知道：

如何添加索引列。 dataTables.net网站有一个示例，说明如何为当前索引文件提供索引属性而不是如何制作它。
我想让我的一个列成为音量滑块。它只有一个介于0-100之间的数字，并希望使用jQueryUI滑块来实现它。我应该在哪里初始化滑块功能？在dataTables之前或之内初始化函数还是之后，以及如何？

Answer 1

在此处的在线文档中详细介绍了添加索引列：https://datatables.net/examples/api/counter_columns.html

至于音量滑块，我确实找到了一种让它运行的黑客方式。我在thead中添加了一个空的th，并在tbody的每一行的开头添加了一个td。第一个td有滑块div，行数为3（我的例子只有3行）。其他tds是空的，具有显示样式：无。

<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();

以下是我的解决方案的一个方面：https://jsfiddle.net/r7jwv76L/2/

如何将索引列添加到dataTables表？

1 个答案: