基于data-attribute的订单表列

Question

I have a table with 14 columns, I'll put just 4 of them for example purposes. All the columns (th's and td's) have a data-order attribute which determines the position I want them to be, like so:

The original (dynamically generated) table looks like this:

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

And the order I want them to be (based on the data-order attribute) is:

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

I'm using the DataTables jQuery Plugin and I saw the column().order() functions and the colReorder property, but it doesn't work for me. My JavaScript looks like this (just to test that the colReorder is working):

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

I also include the colReorder plugin

But that keeps the original column order. What do I'm doing wrong? Is that even possible?

Answer 1

Very easy. Grab the data-order values from each <th> and build the desired order array out of that. You can even separate it into a function called by the order property :

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

demo -> http://jsfiddle.net/Lwdgnx1x/

Note : data-order only makes sense in the header. You cannot have different ordering on row level anyway.