如何使用jQuery为DataTable表格行添加带行索引的title属性

问题根源 #

table.rows().every()回调函数中的this指向DataTable封装的行实例对象，并非原生<tr> DOM节点，直接对其调用jQuery的attr/prop方法无法作用到真实的页面元素上。

可行解决方法 #

基础实现（仅针对当前已加载的行） #

调用行实例的node()方法即可获取到对应的DOM元素，再进行属性设置：

var table = $(".table").DataTable();

table.rows().every(function (rowIdx) {
    console.log(rowIdx);
    // 获取当前行对应的DOM节点后设置title
    $(this.node()).attr('title', rowIdx);
});

适配分页/排序/筛选场景 #

如果你的表格开启了分页、排序、筛选功能，表格重绘后新渲染的行不会自动携带title属性，可绑定DataTable的draw事件，每次重绘后自动为当前页所有行添加属性：

var table = $(".table").DataTable({
    // 此处保留你原有的表格初始化配置
}).on('draw', function () {
    // 只处理当前页可见的行，避免重复操作
    table.rows({page: 'current'}).every(function (rowIdx) {
        $(this.node()).attr('title', rowIdx);
    });
});

如果需要显示当前页内的行序号而非全表行索引，可在draw事件回调内自行计数赋值即可。

内容的提问来源于stack exchange，提问作者Perry