dataTables去掉搜索框，每页多少条框体，解决Cannot reinitialise DataTable问题，以及数据格式ajax等问题...

1。关于datatables配置

function dosearch(){

$('#example').DataTable({
"searching": false, //去掉搜索框
"bLengthChange":false,//去掉每页多少条框体
"language": { //如果本来就可以中文的，这个配置其实是不需要的，
  "info": "", // 表格左下角显示的文字    ，这句也可以，用别外方式,"info": false,
  "paginate": {
  "previous": "上一页",
  "next": "下一页" }

},

"info": false, //去掉info，

"bPaginate":false,//去掉分页，
"destroy":true, //Cannot reinitialise DataTable,解决重新加载表格内容问题 ，重新加载数据时，它就不会报错了，
"data": getdd(),// 后台传过来的json是字符串转成对象
"columns": [

{   //添加一个checkbox的列，就是说每行都有个checkbox，主要用于行多选操作，如批量删除

    "sClass": "text-center",
    "data": "A0",
    "render": function (data, type, full, meta) {
        return '<input type="checkbox" class="checkchild" name="A0" value="' + data + '" />';
    },
"bSortable": false

},

{ "data": "A1" },
{ "data": "A2" },
{ "data": "A3" },
{

"data": "A0",
"render": function (data, type, full, meta) {
return '<a style="text-decoration: none" class="ml-5" οnclick="edit(\'编辑\',\'' + data + '\',\'pageAdd.aspx\')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a> <a style="text-decoration: none" class="ml-5" οnclick="del(this,\'' + data + '\')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>';
}

},

],

//"sPaginationType": "full_numbers", //这个是显示首页，末页，默认显示的上页下页，及中间数字的页数，//不显示分页时这个不用了，
});

 

}

dosearch();//加载执行，以及，可以在一个测试按钮的click，执行，这时它的数据会由dd变成dd2，如此，做ajax的数据格式可以大致确定了，

//另外，这个json给的是一个数组，没有返回记录数等信息，如需要，可以自己改变json格式来做，

 

下面是一个测试数据来源，///。交互数据格式：

datadel = function () {
//alert($("input[name='A0']:checked").length);
}
var dd = [
{ "A0": "1", "A1": "fslfjsdf", "A2": 12312, "A3": true },
{ "A0": "2", "A1": "fslfjsdf", "A2": 12312, "A3": true }
];
var dd2 = [
{ "A0": "1", "A1": "fslfjsdf1", "A2": 12312, "A3": true },
{ "A0": "2", "A1": "fslfjsdf2", "A2": 12313, "A3": false },
{ "A0": "3", "A1": "fslfjsdf3", "A2": 12314, "A3": true }
];
var a = 0;
function getdd() {
a = a + 1;
if (a == 1) return dd;
return dd2;
}

 

 

2。html写法

 

<table class="table table-border table-bordered table-bg table-hover table-sort">
<thead>
<tr class="text-c">
<th width="40">
<input name="" type="checkbox" value=""></th>
<th width="100">标题</th>
<th width="100">主题分类</th>
<th width="100">图片</th>
<th width="100">操作</th>
</tr>
</thead>
<!--
这里也可以有 <tfoot>...</tfoot>包含和表头类似的列，不用也可以，
<tbody>...</tbody> 由上面的js执行后生成，

分页，目前datatables，个人觉得不太好用，但是样式可以参考，具体不细说了，
-->

</table>

 

 

 

 

 

参考 http://blog.csdn.net/bug12138/article/details/53127640

转载于:https://www.cnblogs.com/ijunxiong/articles/6848100.html