javascript - 基于数据属性对表列进行排序

Question

我有一个包含 14 列的表格，出于示例目的，我只放了其中的 4 列。所有的列(th's 和 td's)都有一个 data-order 属性，它决定了我想要它们的位置，就像这样:

原始(动态生成的)表如下所示:

<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 Plugin我看到了column().order()函数和 colReorder 属性，但它对我不起作用。我的 JavaScript 看起来像这样(只是为了测试 colReorder 是否正常工作):

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

我还包括 colReorder plugin

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

Answer 1

非常简单。捕获 data-order每个 <th> 的值并构建所需的 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只有在标题中才有意义。无论如何，您不能在行级别有不同的排序。