JqueryDatatable插件

1,878 阅读1分钟

注意:要被dataTable处理的table对象,必须有thead与tbody,而且,结构要规整(数据不一定要完整),这样才能正确处理

常用参数

'bPaginate': true, //是否显示分页
'sPaginationType': "full_numbers", //分页的类型
'iDisplayLength': 50, // 每页显示数量
'bFilter': false, //是否启动过滤、搜索功能(datatable自定义搜索功能)
'sSearch': "模糊查询:",
'bInfo': true, //是否显示左下角信息
'bAutoWidth': true, //自动宽度
'destroy': true,
'bProcessing': true, // 显示进度条
'bServerSide': true, ////是否启动服务器端数据导入 默认是false,必须配合sAjaxSource使用
"sAjaxSource": $.globaloption.server + "m.workorder.getworkorder",
"oLanguage": { //语言
    "sLengthMenu": "每页显示 _MENU_ 条记录",
    "sZeroRecords": "抱歉未找到记录",
    "sInfo": "共 _TOTAL_ 条数据,本页显示 _START_ 至 _END_ 条",
    "sInfoEmpty": "没有数据",
    "sInfoFiltered": "(从总共_MAX_条记录中过滤)",
    "sProcessing": "数据正在加载中,请稍后。。。",
    "oPaginate": {
        "sFirst": "首页",
        "sPrevious": "上一页",
        "sNext": "下一页",
        "sLast": "尾页"
        }
    },    

bLengthChange默认为true.是否允许终端用户从一个选择列表中选择分页的页数,页数为10,25,50和100,需要分页组件bPaginate的支持
"bLengthChange": true,
"aLengthMenu": [10, 20, 30, 40, 50, 100], //定义每页显示数据数量(bLengthChange默认为true)
        显示列 隐藏列开始
         "oColVis": {
            //      "buttonText": "显示/隐藏列",
            //      "sSize": "auto",
            //      "aiExclude": [0,1,2]
            //  },
            //  "sDom": 'C<"clear"><"toolbar">rt<"bottom"i<"block"><"block"><"block">lp><"clear">',
            //  //显示列 隐藏列结束
"sDom":'rt<"dataTableBottomInfo"i<"block"><"block"><"block">lp><"clear">',//指定底部分页位置
bSort: false, //是否支持排序功能,默认是支持的,一般设置"aaSorting":[[1,'desc'], 指定初始化排序字段
"aaSorting": [[8, 'asc']], //默认的排序方式,第2列,升序排列asc

demo

$('#workordersDatatable').dataTable({
            "bPaginate": true,
            "sPaginationType": "full_numbers",
            'iDisplayLength': 50,
            "bFilter": false,
            "sSearch": "模糊查询:",
            "bInfo": true, //左下角信息
            "bAutoWidth": true, //自动宽度
            "destroy": true,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": $.globaloption.server + "m.workorder.getworkorder",
            "oLanguage": { //语言
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉未找到记录",
                "sInfo": "共 _TOTAL_ 条数据,本页显示 _START_ 至 _END_ 条",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从总共_MAX_条记录中过滤)",
                "sProcessing": "数据正在加载中,请稍后。。。",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "尾页"
                }
            },
            "aLengthMenu": [10, 20, 30, 40, 50, 100], // 定义每页显示数据数量(bLengthChange默认为true)
            "sDom": 'rt<"bottom"i<"block"><"block"><"block">lp><"clear">',
            "aaSorting": [[8, 'asc']],
            "aoColumns": [
                //mData是从ajax数据源获取的数字段
                {
                    "sTitle": "手机号",
                    "sWidth": "80px",
                    "sClass": "center",
                    "mData": "mobile",
                    "bSortable": false
                },
                {
                    "sTitle": "状态",
                    "sWidth": "60px",
                    "sClass": "center",
                    "mData": "status",
                    "bSortable": false
                },
            ],
            "aoColumnDefs": [{
                    'aTargets': [0],
                    "mRender": function(data, type, full) {
                        return '<input type="checkbox" data="' + data + '" name="colcheckbox" />';
                    }
                },
                {
                    'aTargets': [3],
                    "mRender": function(data, type, full) {
                        if(full.status) {
                            //完成C
                            if(full.status == "C") {
                                return "完成";
                            }
                        }
                    }
                },
                {
                    'aTargets': [-1],
                    "mRender": function(data, type, full) {
                        var htmls = "";
                        if(full.status) {
                            var id = full.id;
                            var mid = full.mid;
                            htmls += '<a class="dealwithOrders btn btn-link" title="处理工单"  onclick=\"$.workorders.dealwithOrders(' + id + ',' + mid + ')\" >处理</a>';
                            htmls += "<a class='reviewOrdersButton btn btn-link' title='查看工单记录' onclick=\"$.workorders.reviewOrders(this)\">工单记录</a>";
                            htmls += "<a class='deleteWOrders btn btn-link' title='删除工单' data='" + data + "' onclick=\"$.workorders.delete(this)\">删除</a>";
                            return htmls;
                        }
                    }
                }
            ],
            //从form获取参数
            "fnServerParams": function(aoData) {
                var mappings = {};
                var sortnum = 0;
                var sortcol = {};
                var sortdir = {};
                $.each(aoData, function(idx, value) {
                    if(value.name.indexOf("mDataProp_") === 0) {
                        mappings[value.name] = value.value;
                    }
                    if(value.name.indexOf("iSortCol_") === 0) {
                        sortnum++;
                        sortcol[value.name] = value.value;
                    }
                    if(value.name.indexOf("sSortDir_") === 0) {
                        sortdir[value.name] = value.value;
                    }
                });
                var sorts = [];
                for(var i = 0; i < sortnum; i++) {
                    sorts[i] = mappings["mDataProp_" + sortcol["iSortCol_" + i]] + "," + sortdir["sSortDir_" + i];
                }
                if(sorts.length > 0) {
                    $.merge(aoData, [{
                        "name": "sSorts",
                        "value": sorts.join(";")
                    }]);
                }
                $fmarray = $("#queryform").serializeArray();

                $.each($fmarray, function(idx, value) {
                    if(value.value && value.value !== "") {
                        //模糊查询
                        if(value.name == "username" || value.name == "mobile") {
                            value.value = "%" + value.value + "%";
                        }
                    }
                    if(value.value == "0") {
                        var ids = $("#as_service_query").data().ids;
                        if(ids)
                            value.value = ids.join(",");
                        // switch (value.name) {
                        //     case "rgt_ids":
                        //         var ids = $("#as_service_query").data().ids;
                        //         if (ids)
                        //             value.value = ids.join(",");
                        //         break;
                        // }
                    }
                });
                $.merge(aoData, $fmarray);
            },
            //fnServerData这个是结合服务器模式的回调函数,用来处理服务器返回过来的数据
            "fnServerData": function(sSource, aoData, fnCallBack) {
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: sSource,
                    data: aoData,
                    cache: false,
                    success: function(result, textStatus, jqXHR) {
                        if(result.success) {
                            fnCallBack(result.data);
                        } else {
                            $.globaloption.alert(result.reason);
                        }
                    }
                });
            },
            "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $nRow = $(nRow);
                $nRow.data(aData);
                //完成C
                if(aData.status == "C") {
                    $nRow.addClass('finish');
                }
                //tr双击事件
                $nRow.unbind("dblclick").dblclick(function(e) {
                    e.preventDefault();
                    $(this).find('.dealwithOrders').trigger("click");
                });
                $nRow.unbind("click").click(function(e) {
                    //e.preventDefault();
                    if(!$(e.target).is("input") && !$(e.target).is("a")) {
                        var $Rowx = $(e.currentTarget);
                        if(!$Rowx.hasClass('row_selected')) {
                            $('tr.row_selected', $('#workordersDatatable')).removeClass('row_selected');
                            $Rowx.addClass('row_selected');
                        }
                    }
                });
            },
            "fnDrawCallback": function(oSettings) {
                $.globaloption.buildperms();
            },
            "fnInitComplete": function(oSettings, json) {
            }
        });
参考1:

blog.csdn.net/mickey_miki…

sDom的设置:

blog.csdn.net/bill1315/ar…