Specify column data type with a attribute for

问题:

We're using the DataTables jQuery plugin (http://www.datatables.net) to create sortable tables. This plugin auto-detects the data type of the data in each column.

When you want to specify the data type of a column yourself, you add the "aoColumns" attribute when you initialize the datatable:

$('#accountTable').dataTable({
    "bPaginate": false,
    "sScrollX": "100%",
    "bScrollCollapse": true,
    "aoColumns": [
        null,
        null,
        { "sType": "currency" },
        { "sType": "currency" }
    ]
});

Note, I downloaded the currency data type plugin for datatables. This works great.

However, I'm concerned that if we ever make changes to the table column, we'll forget to go back into the JS and change how the datatables plugin is initialized on that table.

So... It would be ideal to specify the data types directly in the table as necessary:

<table class="dataTables display">
    <thead>
        <tr>
        <th>Category</th>
        <th>Product</th>
        <th sType="currency">Cost</th>
        <th sType="currency">Retail</th>
        ...

Is there any way to do this, either with default functionality of DataTables (which I can't find) or using a JS loop or something to loop through the tags of the table and update the sType where "sType" attribute exists?

回答1:

Here is an absolutely cool way to do it:

Your header HTML:

<table id="sorted-table">
    <thead>
        <tr>
            <th data-s-type="string">Number</th>
            <th data-s-type="html">Complex Name</th>
            <th>Price</th>
            <th data-b-sortable="false">Action</th>
         </tr>
     </thead>
...

Your JS:

$('#sorted-table').dataTable({
   ...
   "aoColumns": $('#sorted-table').find('thead tr th').map(function(){return $(this).data()})
});

Note: those dashes in data attributes are needed. They get converted to camelCase form by jQuery which makes it compatible with the data tables API.

回答2:

Picking up on CBroe's comment, this is exactly what I do. Just ensure that your custom attributes are prefixed with data-, such as data-stype='currency' per the HTML specs.

回答3:

Having your JS loop through and check for attributes on the headers would work, but you can't just invent an sType attribute and have it show up in the DOM. You'd have to subvert a valid but unused attribute like headers (and that might cause trouble for screen readers; there may be a better option).

Edit:

OK, having read CBroe's comment, I guess it is possible to give an element an arbitrary attribute.

So, if you wanted to be HTML5 compliant, you could name the property data-sType and then do something like this:

var aoColumns = [];

$('#accountTable > th').each(function() {
   var sType = $(this).getAttribute("data-sType");
   aoColumns.push(sType ? sType : null);
});

$('#accountTable').dataTable({
   ...
   "aoColumns": aoColumns
});

回答4:

Thanks to all for your help! I had to make a couple tweaks to Russell Zahniser's comment for it to work for me:

1. Changed $('#accountTable > th') to $('#accountTable thead th')
2. Changed aoColumns.push(sType ? sType : null) to aoColumns.push(sType ? { "sType" : "currency" } : null)

End result:

var aoColumns = [];

$('#accountTable thead th').each(function() {
   var sType = $(this).getAttribute("data-sType");
   aoColumns.push(sType ? { "sType" : "currency" } : null);
});

$('#accountTable').dataTable({
   ...
   "aoColumns": aoColumns
});