dataTables去掉搜索框,每页多少条框体,解决Cannot reinitialise DataTable问题,以及数据格式ajax等问题...
1。關(guān)于datatables配置
function dosearch(){
$('#example').DataTable({
"searching": false, //去掉搜索框
"bLengthChange":false,//去掉每頁多少條框體
"language": { //如果本來就可以中文的,這個(gè)配置其實(shí)是不需要的,
? "info": "", // 表格左下角顯示的文字 ? ?,這句也可以,用別外方式,"info": false,
? "paginate": {
? "previous": "上一頁",
? "next": "下一頁" }
},
"info": false, //去掉info,
"bPaginate":false,//去掉分頁,
"destroy":true, //Cannot reinitialise DataTable,解決重新加載表格內(nèi)容問題 ,重新加載數(shù)據(jù)時(shí),它就不會(huì)報(bào)錯(cuò)了,
"data": getdd(),// 后臺(tái)傳過來的json是字符串轉(zhuǎn)成對(duì)象
"columns": [
{ ? //添加一個(gè)checkbox的列,就是說每行都有個(gè)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"></i></a> <a style="text-decoration: none" class="ml-5" οnclick="del(this,\'' + data + '\')" href="javascript:;" title="刪除"><i class="Hui-iconfont"></i></a>';
}
},
],
//"sPaginationType": "full_numbers", //這個(gè)是顯示首頁,末頁,默認(rèn)顯示的上頁下頁,及中間數(shù)字的頁數(shù),//不顯示分頁時(shí)這個(gè)不用了,
});
?
}
dosearch();//加載執(zhí)行,以及,可以在一個(gè)測(cè)試按鈕的click,執(zhí)行,這時(shí)它的數(shù)據(jù)會(huì)由dd變成dd2,如此,做ajax的數(shù)據(jù)格式可以大致確定了,
//另外,這個(gè)json給的是一個(gè)數(shù)組,沒有返回記錄數(shù)等信息,如需要,可以自己改變json格式來做,
?
下面是一個(gè)測(cè)試數(shù)據(jù)來源,///。交互數(shù)據(jù)格式:
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">標(biāo)題</th>
<th width="100">主題分類</th>
<th width="100">圖片</th>
<th width="100">操作</th>
</tr>
</thead>
<!--
這里也可以有 <tfoot>...</tfoot>包含和表頭類似的列,不用也可以,
<tbody>...</tbody> 由上面的js執(zhí)行后生成,
分頁,目前datatables,個(gè)人覺得不太好用,但是樣式可以參考,具體不細(xì)說了,
-->
</table>
?
?
?
?
?
參考 http://blog.csdn.net/bug12138/article/details/53127640
轉(zhuǎn)載于:https://www.cnblogs.com/ijunxiong/articles/6848100.html
總結(jié)
以上是生活随笔為你收集整理的dataTables去掉搜索框,每页多少条框体,解决Cannot reinitialise DataTable问题,以及数据格式ajax等问题...的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Android应用程序结构解析
- 下一篇: FPGA开发全攻略—— 调试