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" onclick="edit(\'編輯\',\'' + data + '\',\'pageAdd.aspx\')" href="javascript:;" title="編輯"><i class="Hui-iconfont">&#xe6df;</i></a> <a style="text-decoration: none" class="ml-5" onclick="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