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

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 呈现的，因此无法将其添加到下图中的“显示/隐藏列”按钮和各个行中。这可以解决吗？

谢谢

这里是显示条目按钮

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/