学习笔记：DataTables之数据读取和操作（java对象转换为json对象）

无意中发现jquery插件中有一个用于表格的，自动分页、搜索、设置每页显示记录数，太方便了。于是尝试着去使用，可是，遇上问题了不仅一点点。

由于后台从数据库查找的数据被封装成了一个java对象（例Employee），可是，dataTables接受的数据源是javascript的数据类型，而且是一个数组，数组里面的内容可以是数组、对象、实例。我的想法是，把java对象转换为json（用gson）。

但是，问题又来了，网上大多数例子都是使用数组为例，很少使用json对象的，而且官网上的例子用起来总出问题。

//模拟数据
var aDataSet = [{
"id": "0",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
}, {
"id": "1",
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}];

如果HTML已定义好表格的第一行，而且数据和已定义的列是对应，那就绑定数据就行了，可是，通常情况下，没这么如意，我们的数据源常常有一堆我们不需要的东西。

以下是datatables官方的例子，可是我试了几次，都没办法读出数据，不知道是不是我下载的版本的问题

$('#example').DataTable( {
data: data,
columns: [
{ data: 'name'},
{ data: 'position'},
{ data: 'salary'},
{ data: 'office'}
]
} );

于是，综合网上找到的信息，最后把改成aaData:data,aoColumns:[…]就好了

"aaData": data,
"aoColumns": [
{ data: 'name'},//这里还可以用mDataProp
{ data: 'position'},
{ data: 'salary'},
{ data: 'office'}
]

下一个问题，由于方便结合数据库处理数据数据，当然最好保留第个对象的ID，然后每次取ID去数据库操作就可以了。于是，把第一列设置为ID列，并隐藏它，最后添加一列用来放控件

columnDefs": [ {
"targets": -1, //最后一列添加删除按键
"data": null,
"defaultContent": "<button id='delrow' class='btn btn-primary' type='button'>delete</button>",//自定义内容
}, {
"targets": 0, //第一列隐藏
"data":"id",
"visible": false,//不可见
"searchable": false
}]

最后一列添加了一个按键，那么，每次点击按键，怎么取得这一行的对象的ID？

我们设置了第一列为ID列，因此，只需获取所选那一行第一个数据就行了，方法如下：

$('.dataTables-example tbody').on( 'click', 'button#delrow', function () {
var data = tables.row( $(this).parents('tr') ).data();//所选择的行的数据
alert(data.id);//测试
//网上的例子多数是用data[0]的方法，因为我的数据源是由java对象得到的json，所以直接用操作对象的方法
});