option rowId 给每行(tr)自动绑定上唯一id

DataTables中文网 6 May 2016

Tags: 不定时一讲


参数详解连接 rowIdOption

注意:需使用 1.10.8 版本以上才可以

大部分的表格都会带出id,用来做唯一标示,修改,删除都会用到id

Datatables给大家提供一个内部实现,让绑定id不需要再写其他代码,配置上属性即可

1
2
3
4
5
6
7
8
9
10
11
12
//数据示例
//这里id只要是唯一的,都是可以的,不管是数字还是字母
{
    data:[
        {"id":341,"name":"Datatables中文网","DT_RowId":341},
        {"id":"a","name":"不定时一讲","DT_RowId":"a"}
    ]
}

$('#myTable').DataTable( {
    ajax: '/api/staff'
} );

只要是上面的数据格式,Datatables就会默认给处理,在每个tr上加上id

1
2
3
4
5
6
7
8
<tr id="341">
    <td>341</td>
    <td>Datatables中文网</td>
</tr>
<tr id="a">
    <td>a</td>
    <td>不定时一讲</td>
</tr>

按照他规定的属性名 DT_RowId 组装好返回,Datatables就自动处理,那如果不是这样的,就不行了么?

作者还是考虑到了,这就是 rowIdOption 的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//数据示例
{
    data:[
        {"name":"Datatables中文网","info":{"id":"341","age":2}}
    ]
}

$('#myTable').DataTable( {
    ajax: '/api/staff'
    rowId: 'info.id'
} );

//数据示例
{
    data:[
        {"name":"Datatables中文网","id":"341","age":2}
    ]
}

$('#myTable').DataTable( {
    ajax: '/api/staff'
    rowId: 'id'
} );

最后的表格是下面的样子

1
2
3
4
<tr id="341">
    <td>341</td>
    <td>Datatables中文网</td>
</tr>

这样还不够,作者还提供取数的方法,看下面代码

1
2
3
4
5
6
var table = $('#myTable').DataTable();

$('#myTable').on( 'click', 'tr', function () {
    var id = table.row( this ).id();
    alert( '被点击行的id是 '+id );
} );

如果大家也有好的点子和建议,欢迎给我发邮件 thxopen@datatables.club告诉我


百度站内搜索

Google站内搜索

赞助我们

赞助我们

您的支持,将是我们前进的最大动力……