3

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

  1. 如何添加索引列。dataTables.net站点有一个示例，它告诉如何为当前索引文件提供索引属性而不是如何制作它。

  2. 我想让我的专栏之一成为音量滑块。它只有一个介于 0-100 之间的数字，并且想要使用 jQueryUI 滑块来制作它。我应该在哪里初始化滑块功能？在dataTables初始化函数之前或内部或之后，如何？

4

1 回答 1

0

此处的在线文档很好地介绍了添加索引列：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/

于 2016-02-08T01:22:22.740 回答