将“数据”选项添加到数据表中的项目

Question

您好我是数据表和javascript的新手，我想知道是否还有“数据”选项添加到数据表中的行和项目。

我正在尝试使用http://usablica.github.io/intro.js/

对我的网站进行介绍

为了做到这一点，我需要在项目中添加data-info =“”和data-step =“”选项。

因此，例如，当您使用intro.js时，添加具有“data-intro”和“data-step”选项的项目，如：

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

因为数据表都是javascript呈现的，所以无法将其添加到“显示/隐藏列”按钮和下图中的各行。这有可能解决吗？

谢谢

这是show entries按钮

Answer 1

您可以使用数据表的fnRowCallback选项在创建表后的行中添加自定义属性（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/