1、DataTables错误： requested unknown parameter：
使用Datatables如果配置的column字段在后台返回的json数据中缺失，那么就会报requested unknown parameter的错误。比如：
在前端column中配置了四列：
{"title": "名称", 'data': 'name'},
{"title": "短信平台用户名", 'data': 'username'},
{"title": "信息", 'data': 'content'},
{"title": "扩展号", 'data': 'ext'},可是后台返回的json数据[{name:xxx,username:yyy,content:zzz}]没有ext字段。
解决办法无外乎两种：
1 后端返回数据补全
2 前端设置默认值，使Datatables不会报错。
因为后台使用了mybatis，返回的数据类型为map，mybatis自动把为null的数据隐藏了，所以导致缺少字段。又不容易修改。
所以采用第办法2：更改前端为：
{"title": "名称", 'data': 'name',"defaultContent": ""},
{"title": "短信平台用户名", 'data': 'username',"defaultContent": ""},
{"title": "信息", 'data': 'content',"defaultContent": ""},
{"title": "扩展号", 'data': 'ext',"defaultContent": ""},2、DataTables warning: table id=dataTableTest - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
在初始化datatables时加上：destroy: true, 此属性即可。
3、使用datatables插件：
1）引入：
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
2）html：
<table id="dataTableTest" style="width: 98%;" class="table table-border table-bordered table-bg table-hover table-responsive">
<thead>
<tr class="text-c">
<th >rpage</th>
<th >刷新次数</th>
<th >时间</th>
</tr>
</thead>
</table>
3）js：
var tabel = $('#userlist').DataTable({
destroy: true, //加上此属性即可
bProcessing: true, //DataTables载入数据时，是否显示‘进度’提示
bStateSave: false, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
aLengthMenu: [10, 20, 40, 60, 100, 1000], //更改显示记录数选项
iDisplayLength: 10, //默认显示的记录数
bInfo: true, //是否显示页脚信息，DataTables插件左下角显示记录数
bPaginate: true, //是否显示（应用）分页器
autoWidth: true, //是否自适应宽度
bScrollCollapse: true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
sPaginationType: "full_numbers", //详细分页组，可以支持直接跳转到某页
bSort: false, //是否启动各个字段的排序功能
bFilter: true, //是否启动过滤、搜索功能
bServerSide: true, //开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。
"ajax": {
url: "/Ajax/UserMgrAjax.ashx?cmd=userList",
type: "POST"
},
columns: [
{
"sWidth": "4%",
"sClass": "text-center",
"data": null,
"targets": 0
},
{
"sWidth": "4%",
"sClass": "text-center",
"data": "u_id",
"render": function (data, type, full, meta) {//这里就是要显示的checkbox多选框了
return '<input type="checkbox" class="checkchild" value="' + data + '" />';
},
"bSortable": false
},
{ "sClass": "text-center", "data": "u_name" },
{ "sClass": "text-center", "data": "u_tel" },
{
"sClass": "text-center",
"data": "u_sex",
"render": function (data, type, row, meta) {
var content = "保密";
if (data == "1")
content = "男";
if (data == "2")
content = "女";
return content;
}
},
{ "sClass": "text-center", "data": "u_age" },
{ "sClass": "text-center", "data": "u_registerdate" },
{
"sClass": "text-center",
"data": "u_state",
"render": function (data, type, row, meta) {
var content = "非正常";
if (data == "0")
content = "正常";
if (data == "1")
content = "锁定";
return content;
}
},
{
"sClass": "text-center",
"data": "u_registerdate",
render: function (data, type, row, meta) {
return "<a id='edit' title='编辑' class='glyphicon glyphicon-edit nounderline' href='javascript:Edit("+row.u_id+");'></a>";
}
}
],
//这个应该是重绘的回调函数
fnDrawCallback: function () {
var startIndex = this.api().context[0]._iDisplayStart;//获取到本页开始的条数
this.api().column(0).nodes().each(function (cell, i) {
//翻页序号连续
cell.innerHTML = startIndex + i + 1;
});
},
});
