adding "data" options to items in datatables

Question

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

Here is the show entries button

it was just an example to show that you need the data-intro and data-step options — James
– James, Commented Mar 3, 2014 at 20:35
But where is the "h1" and how does it relate to a DataTable grid? What does "The Changelog" have to do with any of the data presented in the grid? — user2864740
– user2864740, Commented Mar 3, 2014 at 20:37
It does not relate to datatables at all. it was an example taken from the intro.js documentation and was primarily there just to show how intro.js works that you need the data-step and data-intro options and I dont know how to add those 2 options to datatable items — James
– James, Commented Mar 3, 2014 at 20:45
If it doesn't relate to the DataTable/question then it's a terrible example and should be replaced as it only detracts from a real problem(s)/question(s). The term of data-* tags is "data attributes". What do "h1" or data attributes have to do with "Show/hide" column? Where should the data attributes even be (since there isn't even an "h1")? — user2864740
– user2864740, Commented Mar 3, 2014 at 20:46

Jan · Accepted Answer · 2014-03-03 21:12:52Z

3

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/

edited Mar 3, 2014 at 21:12

answered Mar 3, 2014 at 20:57

Jan

1,41411 silver badges12 bronze badges

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

8 Comments

James Over a year ago

thank you so much! this is awesome!! would you happen to know how to add them to the "Show '' Entities" button? I know that this has to relate with the fnHeaderCallback but I am quite new to jquery and dont quite understand how to find the "Show Entities" tag for $(document).ready( function() { $('#example').dataTable( { "fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) { nHead.getElementsByTagName('th')[0].innerHTML = "Displaying "+(iEnd-iStart)+" records"; } } ); } )

Jan Over a year ago

What exactly is the "Shoe Entities" button and what do you want to do with it? If you want to start intro.js with it, see the "Start Intro" button in the linked JSFiddle. It is just a click event. If you are referring to another part of the table, have look the full reference of datatables. You can customize nearly any element after it has been created.

James Over a year ago

the show 10 entries button is the button at top of the table it is posted in my recent edit. THank you!

Jan Over a year ago

OK, got it. fnHeaderCallback doesn't seem to be the correct callback here. I think it is meant for the table header row. However the fnInitComplete callback does work. I updated the answer (and the fiddle).

James Over a year ago

THank you sooo much!! if i could give you 100 up votes I would haha

|

Collectives™ on Stack Overflow

adding "data" options to items in datatables

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related