Javascript 基于数据属性的表列排序

我有一个包含14列的表，我将只列出其中的4列作为示例。所有列（th和td）都有一个数据顺序属性，它决定了我希望它们的位置，如下所示：

原始（动态生成的）表如下所示：

<table class="table" role="grid">
    <thead>
        <tr>
            <th data-order="0">Date</th>
            <th data-order="3">Clicks</th>
            <th data-order="1">Delivered</th>
            <th data-order="2">Opens</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row">
            <td data-order="0">...</td>
            <td data-order="3">...</td>
            <td data-order="1">...</td>
            <td data-order="2">...</td>
        </tr>
        <tr role="row">
            <td data-order="0">...</td>
            <td data-order="3">...</td>
            <td data-order="1">...</td>
            <td data-order="2">...</td>
        </tr>
    </tfoot>
</table>

我还包括

---

但这保持了原来的列顺序。我做错了什么？这可能吗？

很容易。从每个

中获取

数据顺序

值，并从中构建所需的

顺序

数组。您甚至可以将其分离为一个由

order

属性调用的函数：

//构建数组，顺序[数据顺序]=索引
函数getOrder（）{
变量ths=$（'表th'）；
变量顺序=新数组（长度）；
对于（变量i=0，l=th.length；i

注意：
数据顺序
仅在标题中有意义。行级别上不能有不同的顺序。
非常感谢，@davidkonrad。它很有魅力！同时也感谢
数据顺序
提示。这将节省一些标记位。有没有不使用插件数据表的修复方法？
<table class="table" role="grid">
    <thead>
        <tr>
            <th data-order="0">Date</th>
            <th data-order="1">Delivered</th>
            <th data-order="2">Opens</th>
            <th data-order="3">Clicks</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row">
            <td data-order="0">...</td>
            <td data-order="1">...</td>
            <td data-order="2">...</td>
            <td data-order="3">...</td>
        </tr>
        <tr role="row">
            <td data-order="0">...</td>
            <td data-order="1">...</td>
            <td data-order="2">...</td>
            <td data-order="3">...</td>
        </tr>
    </tfoot>
</table>

var table = $('table').DataTable( {
    paginate: false,
    info : false,
    colReorder: {
        order: [ 0, 2, 3, 1 ]
    }
});