先看一下插件的页面效果：
对于一款前端插件，要考虑这样一个问题，相比不用插件和其他插件，这款插件的优势值不值得自己花精力去学习并掌握这个插件。
如果仅仅作为表格的载体，其实有很多插件可以选择。我更看重的是它的编辑功能，后台为维护更多的是对单跳数据进行操作，具体场景是客服和客户1V1的交流，而dataTables对于单条数据的编辑，是相当不错的，具体来说，采用bootstrap的模态窗口（插件自动生成）实现了修改功能。对于开发人员来说，省去了另写编辑页面的繁琐。
话不多说，下面慢慢粘代码以及效果图。
对于一个和后台交互的插件，最重要其实就两件事情，需要什么样的数据格式，提交给后台的又是怎样的数据格式，搞清楚这两点，其实就没什么了。
dataTables支持很多数据源，官方有详细介绍，项目采用了轻量级的json数据进行传输，以下是插件填充表格时所需的数据格式：
对于增删改查，dataTable默认传给后台的数据相当蛋疼，这里费了不少心思，最后重新封装了下数据格式，先看一下默认的数据格式：
想要看懂上面的数据，还需要知道一个知识点，如果想使用dataTables的编辑功能，返回数据中，需要包括"DT_RowId"这个键，这个键值对需要放在每一行的数据中，充当表格的主键，当然，重复也没关系，这就是让人困惑的地方；
有了这个知识点，在看编辑数据时，默认的数据格式，这些都是键值对，对于键的命名，action表示操作行为，包括remove,edit,create三种键值，支持自定义，详细的可以参考官方文档；剩下的便是每个单元格的表示，“data[row1][accountId]”中，data是固定的，row1是选中行DT_RowId的值，accountId是选中行列的别称，关于列名和json数据源键名的匹配，以下会有详细代码。
看懂这个之后，再去思考后台如何拿数据，后台不可能去遍历request中的所有参数，所以比较好的方法就是在前台二次封装这些数据，通过对json数据的重新封装，即可，以下是个人的封装方法：
ajax: {
url:"/charge-manage/individualMember/edit",
data:function(data){
var result={};
for(var i in data.data){
var result=data.data[i];
result.DT_RowId=i;
result.action=data.action;
console.log(result);
}
return result;
},
},
经过这样的封装，参数类型如下：
这样后台就方便拿参数进行操作了。
解决了数据流向问题，在看页面本身的问题，表格列名如何与数据源匹配，这个比较简单，代码如下：
$('#member').DataTable( {
dom: "Bfrtip",
ajax:"/charge-manage/individualMember/getMember?"+"phoneNum="+phoneNum,
columns:[{data:"memberCode"},
{data:"accountId"},
{data:"phoneNum"},
{data:"password"},
{data:"lastLoginTime"}
],
select:true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }]
} );
columns集合中的顺序，对应表格列的顺序，data的值，对应json数据源中的键；
以下是表格的实际图形：
编辑操作有自己的操作对象，也就是上面buttons栏引用的，代码如下：
var editor = new $.fn.dataTable.Editor( {
ajax: {
url:"/charge-manage/individualMember/edit",
data:function(data){
var result={};
for(var i in data.data){
var result=data.data[i];
result.DT_RowId=i;
result.action=data.action;
console.log(result);
}
return result;
},
},
fields: [{
label: "会员编码:",
name: "memberCode"
}, {
label: "账户编码:",
name: "accountId"
},{
label: "手机号:",
name: "phoneNum"
},{
label: "密码:",
name: "password"
},{
label: "最后登录时间:",
name: "lastLoginTime"
}],
table: "#member"
});
fields集合中，label值是模态窗口对应的名称，细心的同学可以看到加了冒号，name对应向后台传入参数的键名。
下面是该模态的实际图片，再次强调，这玩意是自动生成的！
当然第一次使用，自然有相当多的问题还没有解决，欢迎玩过的同学过来指教。
- 查看图片附件