jquerydatatable实现表格加载，分页和删除功能

近期更换技术，采用bootstrap的布局方式来进行项目编写，由于bootstrap为前端布局框架，好多功能实现需要借助插件完成，比如表格的实现。

由于第一次接触datatable插件，找了好长时间的资料才找齐一套不太完整的方案（至少能进行项目），贴出代码，自己巩固一下知识，也给遇到相同问题的朋友一个解决思路。

引用data-table的css和js。

/vendors/dataTables/css/dataTables.bootstrap.min.css" rel="stylesheet">

我这边采用了bootscript风格的分页样式，所以会有 dataTables.bootstrap.min.css 和 dataTables.bootstrap.min.js。

分页代码：

var lang = {
"sProcessing": "处理中...",
"sLengthMenu": "每页 _MENU_ 条",
"sZeroRecords": "没有匹配结果",
"sInfo": "当前显示第 _START_ 至 _END_ 条，共 _TOTAL_ 条。",
"sInfoEmpty": "当前显示第 0 至 0 条，共 0 条",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "本地搜索：",
"sUrl": "",
"sEmptyTable": "暂无数据",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页",
"sJump": "跳转"
}
};
// 网上抄的显示信息。
$('#id').dataTable({
"language": lang, //提示信息
"autoWidth": false, //自适应宽度，
"searching": false, //是否允许Datatables开启本地搜索
"paging": true, //是否开启本地分页
"lengthChange": false, //是否允许产品改变表格每页显示的记录数
"info": true, //控制是否显示表格左下角的信息
//跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
"scrollX": true,
"ordering": false,
"iDisplayLength": 20,
"serverSide": false,
// 重点是进行ajax请求和数据加载。
“ajax”:{
"url": that._servlets.search,
"type": 'POST',
"dataType": 'json',
"data": function () {
// data为参数传递，其他传递方式我没有尝试。
return JSON.stringify(dataJson);
}
},
"columns":[
{"data": "id", "className": "hide"},
{"data": "sequenceNum"},
{"data": "name"},
{
// 这里是编辑和删除两个按钮的书写方式。
"data": function (obj) {
return '编辑 删除'
}
}
]
});


上面这样就可以实现ajax请求数据并且加载到表格了，但是有个问题就是json数据必须带有一个标识才能正常的在columns里面调用数据，这里我没有找到合适的办法。

json的格式需要有一个“data”的东西才行，这个和columns里面的data是对应的。

下面是删除功能的实现

var id = '';
var tables = $('#dvgDiseaseCategory').DataTable();
$('#dvgDiseaseCategory tbody').on('click', 'button#btnDelete', function () {
var data = tables.row($(this).parents('tr')).data();
id = data.id;
});
// 大概意思就是获取到点击删除按钮的这一行，然后根据行来找到其中的数据组，然后再提取对应的数据。我这边是把id提取出来，再外部进行的删除方法。
// 删除方法的实现就是点击删除按钮时，弹出一个bootstrap的模态框，再点击模态框的确定按钮时，执行一次删除的ajax请求，然后再进行一次加载查询的函数更新表格。

在这里会出现一个问题，再次加载查询函数调用datatable时，会弹出一个好多东西的弹出框，我查资料以后，认为时再次调用时上一次的datatable组件还在。虽然不知道理解的对不对，但是解决方案就是在其他地方再次调用datatable时，必须先将上一次的datatable组件销毁，这样就能顺利调用了。

销毁datatable组件的方式：

var table = $('#id').dataTable();
//如果datatable存在，将其销毁。
if(table){
table.fnDestroy();
}
//销毁之后在调用。
search();