#StackBounty: #javascript #jquery #datatables #datatables-1.10 DataTables columns, columnDefs and rowCallback HTML5 initialisation

Bounty: 50

I currently have a datatable (ver 1.10.18) loaded with several options with js, but I need to make my code more reusable and I’m trying to initialise my datatable with html5 data-* attributes.

<table id="dataTable" cellspacing="0" width="100%" data-source="ajax.mysource.php">
            <th><i class="fas fa-low-vision"></i></th>

my jQuery code looks like:

var dataTable = $('#dataTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: $('#dataTable').data('source'),
    columns: [
        { 'data': 'name' },
        { 'data': 'address' },
        { 'data': 'visible' }
    order: [[ 1, 'asc' ], [ 0, 'asc' ]],
    responsive: true,
    nowrap: true,
    pageLength: 15,
    lengthChange: false,
    select: 'single',
    columnDefs: [
        {   targets: 0, width: "110px" },
        {   targets: 1, width: "150px" },
        {   targets: 1, render: $.fn.dataTable.render.ellipsis(80) },
        { targets: 2, render: $.fn.dataTable.render.visibilityIcon() }
    rowCallback: function(row, data, index) {
        if (data.visible == "0") {

There are some options in common I would use for every datatable, but it would be great if I can set the columns, columnDefs and rowCallBack directly in my html using the html5 data-* attributes so I can use the same code for different tables, like:

<th data-columns="address" data-column-defs="{targets: 1, width:'150px'}" data-row-callback="function...">Address</th>

I haven’t found anywhere how to use the html5-* attributes other than ordering, sorting and page length.

Is setting this options with html5 actually possible with datatables.js ?

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.