Specify column data type with a <th> attribute for DataTables

Question

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?

Use HTML custom data attributes – and just select their content when building your config data structure. — C3roe
– C3roe, Commented Mar 22, 2013 at 16:23

Mike Starov · Accepted Answer · 2014-08-19 20:11:44Z

2

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.

answered Aug 19, 2014 at 20:11

Mike Starov

7,4667 gold badges40 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Piotr Kula Over a year ago

Yea this is really awesome solution! Nice one!

mr_plum · Accepted Answer · 2013-03-22 16:37:35Z

1

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.

answered Mar 22, 2013 at 16:37

mr_plum

2,4372 gold badges19 silver badges31 bronze badges

Comments

Russell Zahniser · Accepted Answer · 2013-03-22 16:39:51Z

1

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

edited Mar 22, 2013 at 16:39

answered Mar 22, 2013 at 16:27

Russell Zahniser

16.4k41 silver badges31 bronze badges

1 Comment

Nick Petrie Over a year ago

Great! This was nearly perfect. Had to make a couple small tweaks to get it to work for me. See my comment.

Nick Petrie · Accepted Answer · 2013-03-22 21:03:47Z

1

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

Changed $('#accountTable > th') to $('#accountTable thead th')
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
});

answered Mar 22, 2013 at 21:03

Nick Petrie

5,58811 gold badges45 silver badges54 bronze badges

Collectives™ on Stack Overflow

Specify column data type with a <th> attribute for DataTables

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related