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" οnclick="update('+full[0]+')" class="btn yellow mini"><i class="icon-pencil"></i>修改</a>');
if(full.status == 0){
//html.push('<button οnclick="'+'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",
"账号",
"姓名",
"电子邮箱",
"电话"
],
...
]
}