对datatable对象参数进行部分配置以及说明

转自: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
类型: int

iTotalRecords: 实际的行数

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": "正在加载数据..."
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值