基于data-attribute的订单表列

Question

我有一个包含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>

我希望它们的顺序（基于数据顺序属性）是：

<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>

我正在使用DataTables jQuery插件 ，我看到了column（）。order（）函数和colReorder属性，但它对我不起作用。 我的JavaScript看起来像这样（只是为了测试colReorder是否正常工作）：

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

我还包括colReorder插件

但这保留了原始列顺序。 我做错了什么？ 这甚至可能吗？

Answer 1

很容易。 从每个<th>获取data-order值，然后构建所需的order数组。 您甚至可以将它分隔为order属性调用的函数：

//build array, order[data-order] = index
function getOrder() {
   var ths = $('.table th');
   var order = new Array(ths.length);
   for (var i=0, l=ths.length; i<l; i++) {
     order[$(ths[i]).data('order')] = i
   }
   return order;
}

var table = $('.table').DataTable({
   colReorder: {
     order: getOrder()
   }
})

演示 - > http://jsfiddle.net/Lwdgnx1x/

注意 ： data-order仅在标题中有意义。 无论如何，你不能在行级别上有不同的排序。