Question

我们正在使用DataTables jQuery插件（http://www.datatables.net）来创建可排序表。此插件会自动检测每列中数据的数据类型。

如果要自己指定列的数据类型，请在初始化数据表时添加“aoColumns”属性：

$('#accountTable').dataTable({
    "bPaginate": false,
    "sScrollX": "100%",
    "bScrollCollapse": true,
    "aoColumns": [
        null,
        null,
        { "sType": "currency" },
        { "sType": "currency" }
    ]
});

注意，我下载了数据表的货币数据类型插件。这很有效。

但是，我担心如果我们对表列进行更改，我们将忘记返回JS并更改数据表插件在该表上的初始化方式。

所以......根据需要直接在表格中指定数据类型是理想的：

<table class="dataTables display">
    <thead>
        <tr>
        <th>Category</th>
        <th>Product</th>
        <th sType="currency">Cost</th>
        <th sType="currency">Retail</th>
        ...

有没有办法做到这一点，要么使用DataTables的默认功能（我找不到），要么使用JS循环或其他东西循环遍历表的标签并更新sType，其中存在“sType”属性？

Answer 1

这是一种绝对酷的方法：

您的标题HTML：

<table id="sorted-table">
    <thead>
        <tr>
            <th data-s-type="string">Number</th>
            <th data-s-type="html">Complex Name</th>
            <th>Price</th>
            <th data-b-sortable="false">Action</th>
         </tr>
     </thead>
...

你的JS：

$('#sorted-table').dataTable({
   ...
   "aoColumns": $('#sorted-table').find('thead tr th').map(function(){return $(this).data()})
});

注意：需要数据属性中的破折号。它们被jQuery转换为 camelCase 形式，使其与数据表API兼容。

Answer 2

让你的JS循环并检查标题上的属性是可行的，但你不能只发明一个sType属性并让它显示在DOM中。你必须颠覆一个有效但未使用的属性，如headers（这可能会给屏幕阅读器带来麻烦;可能有更好的选择）。

修改

好的，看过CBroe的评论后，我想可以give an element an arbitrary attribute.

因此，如果您想要符合HTML5标准，可以将属性命名为data-sType，然后执行以下操作：

var aoColumns = []; $('#accountTable > th').each(function() { var sType = $(this).getAttribute("data-sType"); aoColumns.push(sType ? sType : null); }); $('#accountTable').dataTable({ ... "aoColumns": aoColumns });

Answer 3

接受CBroe的评论，这正是我所做的。只需确保您的自定义属性以data-为前缀，例如data-stype='currency'的{{1}}。

Answer 4

感谢大家的帮助！我不得不对Russell Zahniser的评论进行一些调整，以便它适合我：

将$（'＃accountTable＆gt; th'）更改为$（'＃accountTable thead th'）
将aoColumns.push（sType？sType：null）更改为aoColumns.push（sType？{“sType”：“currency”}：null）

最终结果：

var aoColumns = [];

$('#accountTable thead th').each(function() {
   var sType = $(this).getAttribute("data-sType");
   aoColumns.push(sType ? { "sType" : "currency" } : null);
});

$('#accountTable').dataTable({
   ...
   "aoColumns": aoColumns
});

使用DataTables的属性指定列数据类型

4 个答案: