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 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()
   }
})

演示 - ＆gt;的 http://jsfiddle.net/Lwdgnx1x/

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

基于数据属性

1 个答案: