转自:http://blog.csdn.net/u013405778/article/details/51690038
http://blog.csdn.net/yibing548/article/details/45078123
详细参数
https://www.cnblogs.com/fuqiang88/p/4731526.html
注意:
1.返回的数据格式一定是json。例如: 数据是以aaData开头的。否则对不上
{
"aaData": [
{
"isDelete": 0,
"typeName": "住院信息",
"updateUserId": 2,
"createTime": "Nov 21, 2017 12:00:00 AM",
"modelName": "客户",
"updateTime": "Nov 21, 2017 12:00:00 AM",
"modelClass": "crm",
"orderIndex": 1,
"no": 1,
"createUserId": 2
},
{
"isDelete": 0,
"typeName": "门诊信息",
"updateUserId": 2,
"createTime": "Nov 21, 2017 12:00:00 AM",
"modelName": "客户",
"updateTime": "Nov 21, 2017 12:00:00 AM",
"modelClass": "crm",
"orderIndex": 2,
"no": 2,
"createUserId": 2
}
]
}
重要参数
iDisplayStart :当开启分页的时候,定义展示的记录的起始序号,不是页数,因此如果你每个分页有10条记录而且想从第三页开始,需要把该参数指定为20
默认值 0
类型: intiTotalRecords: 实际的行数
iTotalDisplayRecords: 过滤之后,实际的行数。
fnRender的参数是每行的数据,取的时候一定要oObj.aData得到数据。
"aoColumnDefs":[{
"aTargets" : [0],
"fnRender" : function(oObj) {
return '<input name="chk" value="' + oObj.aData.id
+ '" type="checkbox" />';
}
},{
"aTargets" : [6],
"fnRender" : function(oObj) {
if(oObj.aData.isDelete==0){
return '否';
}else{
return '是';
}
}
},{
"aTargets" : [7],
"fnRender" : function(oObj) {
//alert(JSON.stringify(oObj.aData))
var time=oObj.aData.createTime;
if(time!='--'){
time=new Date(time);
return time.toLocaleString();
}else{
return '--';
}
}
},{
"aTargets" : [9],
"fnRender" : function(oObj) {
var time=oObj.aData.updateTime;
if(time!='--'){
time=new Date(time);
time=new Date(time);
return time.toLocaleString();
}else{
return '--';
}
}
},{
"aTargets" : [11],
"fnRender" : function(oObj) {
alert(JSON.stringify(oObj.aData.id))
return "<a href='"+basePath+"model/updateModelById.action'>修改</a>";
}
}
]
向服务端传递参数
'fnServerParams' : function(aoData) {
aoData.push({
"name" : "phone",
"value" : phone
});
},
$('#example').dataTable({
//paging:false; //设置paging选项,禁止表格分页(默认是打开的)
//scrollY: 100; //在表格里使用滚动,你需要加上scrollY选项
//"sScrollY" : 450, //DataTables的高
//"sScrollX" : 820, //DataTables的宽
//"aaSorting" : [[2, "desc"]]
"sPaginationType": "full_numbers", //分页风格,full_number会把所有页码显示出来
bFilter: true, //去掉搜索框
//对于从服务器端取数据,要指定以下两个参数bServerSide和sAjaxSource
"bServerSide": true, //开启服务器模式,原始的静态页面不分页
//使用ajax源
"sAjaxSource": "ajax_data.php",
/* 从 Ajax 源加载数据的表的内容 如果加"type": "POST",则使用post方式传递数据*/
//aoData是以post方式传递给php交互的key-value
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"iDisplayLength": 5, //设置datatables的默认显示条数
//定义每页显示数据数量数组
"aLengthMenu": [
[5,10, 20, 30, 40, -1],
[5,10, 20, 30, 40, "全部"] //每页变化值 ,默认显示最后一个元组
],
// 改变语言提示 把原始表示转换为中文
"oLanguage": {
"sLengthMenu": "每页 _MENU_ 条记录",
"sZeroRecords": "抱歉,没有找到",
"sInfo": "从 _START_ 到 _END_ / 共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"sSearch":"搜索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "尾页"
},
"sProcessing": "<img src='loading.gif' />",
},
});
工作中用的参数
$('#modelTable').dataTable({
"bProcessing" : true,
'bServerSide' : true,
'fnServerParams' : function(aoData) {
aoData.push({
name : "modelItemVo.modelId",
value : modelId
},{
name : "modelItemVo.modelClass",
value : modelClass
});
},
"sAjaxSource" : basePath + "model/getModelItemList.action",
"sServerMethod" : "POST",
"sPaginationType" : "full_numbers",
"bPaginate" : true, // 翻页功能
"bStateSave" : true, // 状态保存
"bLengthChange" : false, // 改变每页显示数据数量
"bFilter" : false, // 过滤功能
"bSort" : false, // 排序功能
"bInfo" : true,// 页脚信息
"bAutoWidth" : false,// 自动宽度
"bDestroy" : true,
"iDisplayLength" : 15, // 每页显示多少行
"aoColumns" : [{
"sTitle" : "<input type='checkbox' id='total' onclick='selectAll(this)'/>",
"mDataProp" : null,
"sClass" : "chk"
}, {
"sTitle" : '序号',
"mDataProp" : "no",
"sWidth" : "20",
"sClass" : "num"
}, {
"sTitle" : '字段',
"mDataProp" : "filed",
"sWidth" : "60",
"sClass" : "tdCenter"
}, {
"sTitle" : '数据类型',
"mDataProp" : "dataType",
"sWidth" : "40",
"sClass" : "tdCenter"
}, {
"sTitle" : '名称',
"mDataProp" : "itemLabel",
"sWidth" : "80",
"sClass" : "tdCenter"
}, {
"sTitle" : '排序',
"mDataProp" : "orderIndex",
"sWidth" : "20",
"sClass" : "tdCenter"
}, {
"sTitle" : '是否删除',
"mDataProp" : "isDelete",
"sWidth" : "20",
"sClass" : "tdCenter"
}, {
"sTitle" : '独占一行',
"mDataProp" : "isSingle",
"sWidth" : "20",
"sClass" : "tdCenter"
}, {
"sTitle" : '是否显示',
"mDataProp" : "isShow",
"sWidth" : "20",
"sClass" : "tdCenter"
}, {
"sTitle" : '操作',
"mDataProp" : null,
"sWidth" : "40",
"sClass" : "tdCenter"
}],
"oLanguage" : {
"sUrl" : basePath + "plugins/datatable/cn.txt" // 中文包
},
"fnInitComplete":function(){
// 重置iframe高度
window.parent.frameResize();
},
"aoColumnDefs":[{
"aTargets" : [0],
"fnRender" : function(oObj) {
return '<input name="chk" value="' + oObj.aData.id
+ '" type="checkbox" />';
}
},{
"aTargets" : [3],
"fnRender" : function(oObj) {
if(oObj.aData.dataType==1){
return '字符串文本';
}else if(oObj.aData.dataType==2){
return '文本区';
}else if(oObj.aData.dataType==3){
return '日期';
}else if(oObj.aData.dataType==4){
return '下拉列表';
}else if(oObj.aData.dataType==5){
return '复选框';
}else{
return "单选框";
}
}
},{
"aTargets" : [6],
"fnRender" : function(oObj) {
if(oObj.aData.isDelete==0){
return '否';
}else{
return '是';
}
}
},{
"aTargets" : [7],
"fnRender" : function(oObj) {
if(oObj.aData.isSingle==0){
return '否';
}else{
return '是';
}
}
},{
"aTargets" : [8],
"fnRender" : function(oObj) {
if(oObj.aData.isShow==0){
return '显示';
}else{
return '不显示';
}
}
},{
"aTargets" : [9],
"fnRender" : function(oObj) {
return "<a href='"+basePath+"model/findModelItemById.action?id="+oObj.aData.id+"'>修改</a>";
}
}
]
});
cn.txt
{
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉, 没有找到",
"sInfo": "共 _TOTAL_ 条数据 ",
"sInfoEmpty": "",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "尾页"
},
"sZeroRecords": "暂无数据!",
"sProcessing": "正在加载数据..."
}