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

【问题标题】：How to add an index column to a dataTables table?如何将索引列添加到 dataTables 表？
【发布时间】：2012-12-23 07:29:41
【问题描述】：

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

如何添加索引列。 dataTables.net 站点有一个示例，它告诉您如何为当前索引文件提供索引属性而不是如何创建它。
我想将我的一列设为音量滑块。它只有一个介于 0-100 之间的数字，并且想要使用 jQueryUI 滑块来制作它。我应该在哪里初始化滑块功能？在dataTables初始化函数之前或内部或之后，以及如何？

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

这里的在线文档很好地介绍了添加索引列：https://datatables.net/examples/api/counter_columns.html

至于音量滑块，我确实找到了一种破解方法来让它工作。我在 thead 中添加了一个空的 th，在 tbody 的每一行的开头添加了一个 td。第一个 td 具有滑块 div 和 3 行跨度（我的示例只有 3 行）。其他 td 为空，样式为 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/

【讨论】：