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",

"账号",

"姓名",

"电子邮箱",

"电话"

],

...

]

}