jquery datatable ajax後臺資料來源使用
1.jsp格式
<table class="table table-striped table-bordered table-hover"
id="sample_1">
<thead>
<tr>
<th class="table-checkbox">
<input type="checkbox" class="group-checkable"
data-set="#sample_1 .checkboxes" />
</th>
<th>
賬號
</th>
<th class="hidden-480">
姓名
</th>
<th class="hidden-480">
電子郵箱
</th>
<th class="hidden-480">
電話
</th>
<th>
處理
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
2.表格的繪畫
vTable.dataTable({
"bProcessing":false,//設定非同步請求時，是否有等待框
"bServerSide":true,//指定服務端分頁，必須的屬性！
"sAjaxSource": vPath+"/manager/user/search.do?rand="+Math.random() , //獲取資料的ajax方法的URL
"bPaginate" : true,//是否支援分頁
"bSort":true,
"bStateSave":false,//儲存狀態到cookie
"isShowSearch":false,
"fnServerParams": function (aoData) {
aoData.push({ "name": "引數名稱", "value": 引數值 });
},
"fnServerData":function ( sSource, aoData, fnCallback ) {//獲取資料的處理函式
$.ajax( {
type: "POST",
url: sSource,
dataType: "json",
data: { aoData: JSON.stringify(aoData) },
success: function(resp) {
fnCallback(resp.returnObject);
},
error:function(){
alert('error');
}
});
},
//aoColumnDefs設定列的屬性時，可以任意指定列，並且不需要給所有列都設定。
//aoColumns:如果指定,那麼這個陣列的長度必須等於列數。使用“null”,您希望僅使用預設值和自動檢測選項
"aoColumns": [
{ "bSortable": false,
"mRender" : function(mData,type,full) {
var html = [];
//html.push('<div class="checker">');
//html.push('<span >');
html.push('<input type=\"checkbox\" class=\"checkboxes\" id=\"tr_' + mData + '\" value=\"' + mData + '\" /> ');
// html.push('</span>');
// html.push('</div>');
return html.join('');
}
},
{ "sName": "account" },
{ "sName": "name" },
{ "bSortable": false, "sName": "email" },
{ "bSortable": false, "sName": "telephone" },
{"mData" : null,"bSortable": false,
"mRender" : function(mData,type,full) {
var html = [];
html.push('<a id="editUser" onclick="update('+full[0]+')" class="btn yellow mini"><i class="icon-pencil"></i>修改</a>');
if(full.status == 0){
//html.push('<button onclick="'+'auditDomain('+full.id+',1)" class="btn btn-primary btn-mini">通過</button>');
}
return html.join('');
}
}
],
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"iDisplayLength": 10,
"sDom" : "<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'>>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", //自定義表格樣式
"sPaginationType": "bootstrap_full_number",
"oLanguage": {
"sSearch": "搜尋",
"sProcessing": "正在載入中......",
"sEmptyTable": "表中無資料存在！",
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
"sZeroRecords": "沒有檢索到資料",
"sInfoEmpty":"",
"sInfoFiltered": "",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "末頁"
}
}
});
3.返回的資料格式
{
"sEcho": 3,
"iTotalRecords": 57,
"iTotalDisplayRecords": 57,
"aaData": [
[
"使用者ID",
"賬號",
"姓名",
"電子郵箱",
"電話"
],
[
"使用者ID",
"賬號",
"姓名",
"電子郵箱",
"電話"
],
...
]
}