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; }); }, });