CODEWITHSUNDEEP
javascriptjquerydatatablesintro.js
James
James

Reputation: 557

adding "data" options to items in datatables

Hi I am new to datatables and javascript in general and I was wondering if there is anyway to add "data" options to rows and items in datatables.

I am trying to make an intro tour to my site using http://usablica.github.io/intro.js/

and in order to do that I need to add data-info="" and data-step="" options to the item.

So for example when you use intro.js you add items that have "data-intro" and "data-step" options like:

<h1 data-intro='This is step one.' data-step='1'>The Changelog</h1>

Because data-tables is all javascript rendered there is no way to add this to either the "Show/hide columns" button and individual rows in the picture below. Is this possible to fix?

Thank you

enter image description here

enter image description here

Here is the show entries button

Upvotes: 1

Views: 757

Answers (1)

Jan
Jan

Reputation: 1414

You can use the fnRowCallback option of datatables to add custom attributes to rows in the table after they are created (see the docs).

$('#mytable').dataTable({
    // Set data for the table here
    // ...

    // Add data attributes for intro.js
    'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        if (aData[1] === 'Firefox 2') {
            $('td:eq(1)', nRow)
                .attr('data-intro', 'This column shows the browser type.')
                .attr('data-step', '1');
        }
    },

    // Add data attributes for sections, that do not belong to the table itself
    'fnInitComplete': function(oSettings, json) {
        // The number of elements selector seems to have the id of the table + '_length'
        $('#example_length')
            .attr('data-intro', 'Select the number of entries to show.')
            .attr('data-step', '1');
    }
});

http://jsfiddle.net/2f2L6/1/

Upvotes: 3

Related Questions