datatables 控件使用

直接上代码

JS部分

 var salestables = $("#salestables").DataTable(
        //datatables 扩展
        $.extend(true, {}, constant.tables.default_option, {
            ajax: {
                url: "Home/GetSalesMonthly",
                data: function (d) {
                    //异步传参
                    var hospitalcode = $(".form-group .hospitallist").select2("val");
                    var citycode = city.select2("val");
                    var packagecode = skuelement.select2("val");
                    var nd = $(".rdatetime").val();
                    if (nd == "")
                        nd = new Date().getFullYear() + "-01-01";
                    var date = new Date(nd);
                    d.hospitalcode = hospitalcode;
                    d.citycode = citycode;
                    d.packagecode = packagecode;
                    d.year = date.getFullYear();
                    d.month = date.getMonth() + 1;
                    //打开遮罩层 ,mo的需要遮罩的对象，true表示打开遮罩，false 表示关闭遮罩层
                    globalmodal($(".testbox"), true);
                },
                type: "post",
                dataSrc: "data"//表示返回对象“data”标志，如果对象为：{"mydata":[{"A":"b"},{"BB":"bb"}]}，则dataSrc:"mydata"，如果没有 "data"，则默认为""
            },
            columns: [
                constant.tables.column.checkbox,
               { data: "distributorcode", visible: true,  "10%" },
               { data: "HospitalCode", visible: true,  "10%" },
               { data: "NameCn", visible: true, render: constant.tables.render.ellipsis },
               { data: "CityCode", visible: true },
               { data: "PackageCode", visible: true },
               { data: "year" },
               { data: "month" },
               { data: "count" },
                { data: "FlowType" },
                 { data: "IsScope" }
               /*
               {
                   data: "HospitalCode",//绑定数据源
                   defaultContent: "",
                    "15%",
                   render: function (data, type, row, meta) {
                       //render方法有四个参数，分别为data、type、row、meta，其中主要是使用data和row来进行操作，data是对应当前cell的值，row是对应当前行中的所有cell的值。
                       return data = '<button class="btn btn-info r-edit " data-id=' + data + '>查看</button>';
                   }
               }*/
            ],
            drawCallback: function () {    /*datables渲染完后回调函数*/
                /*关闭遮罩层*/
                globalmodal($(".testbox"), false);
            },
            dom: constant.tables.doms.dom
        })
    );

common.js 中datatables常量抽取出来：

var constant = {
    tables: {
        default_option: { //DataTables初始化选项
            language: {
                lengthMenu: "_MENU_ ",//"每页 _MENU_ 条"
                zeroRecords: "暂无数据",
                info: "当前第 _PAGE_ 页 ( 共 _PAGES_ 页/_TOTAL_条)",
                infoEmpty: "无记录",
                infoFiltered: "(从 _MAX_ 条记录过滤)",
                search: "模糊查询",
                paginate: { first: "第一页", last: "最后页", next: "下一页", previous: "上一页" },
                processing: "正在加载数据..."
            },
            // autoWidth: false,   //禁用自动调整列宽
            // stripeClasses: ["odd", "even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合
            // order: [],          //取消默认排序查询,否则复选框一列会出现小箭头
            processing: false,  //隐藏加载提示,自行处理
            serverSide: true,   //启用服务器端分页
            searching: false,   //禁用原生搜索
            fixedColumns: true,//冻结首列
            fixedHeader: true,//冻结表头
            scrollY: 600,//表高度
            scrollCollapse: true,//纵向滚动条
            scrollX: true,//横向滚动条
            lengthMenu: [[10, 20, 30, 60, -1], ["10条/页", "20条/页", "30条/页", "60条/页", "全部"]],//自定义每页显示数量
        },
        column: {
            checkbox: { //复选框单元格
                className: "td-checkbox",
                orderable: false,
                 "30px",
                data: null,
                render: function (data, type, row, meta) {
                    return '<input type="checkbox" class="iCheck">';
                }
            }
        },
        render: {   //常用render可以抽取出来，如日期时间、头像等
            ellipsis: function (data, type, row, meta) {
                data = data || "";
                return '<span title="' + data + '">' + data + '</span>';
            }
        },
        doms: { dom: "rt<'bottom'<'row'<'col-md-4 col-lg-6'i><'col-md-3 col-lg-2'l><'col-md-5 col-lg-4'p>>>" }
    }
};

MVC 后台接收代码：

     [HttpPost]
        public ActionResult GetSalesMonthly(Salesparameter spar)
        {
            try
            {
                int pagesize = 10;
                int pagenumber = 1;
                if (Request.Form["length"] != null)//datatables 传来的pagesize
                    pagesize = Convert.ToInt32(Request.Form["length"].ToString());
                if (Request.Form["start"] != null)//datatables 传来的pagenum
                    pagenumber = Convert.ToInt32(Request.Form["start"].ToString()) == 0 ? 1 : Convert.ToInt32(Request.Form["start"].ToString()) / Convert.ToInt32(Request.Form["length"].ToString()) + 1;
                SDMAPI sa = new SDMAPI();
                int totalcount = 0;//总行数
                string hospitalcode = spar.hospitalcode == null ? "" : spar.hospitalcode;
                string citycode = spar.citycode == null ? "" : spar.citycode;
                string packagecode = spar.packagecode == null ? "" : spar.packagecode;
                int year = spar.year;
                int month = spar.month;
                var draw = Convert.ToInt32(Request.Form["draw"]);
                List<SalesmonthlyModel> pl = sa.Getsalesmonthly(year, month, hospitalcode, packagecode, citycode, pagesize, pagenumber, out totalcount);
                return JsonDate(new { draw = draw, recordsTotal = totalcount, recordsFiltered = totalcount, data = pl });
            }
            catch (Exception ex)
            {
                LogHelper.Error("GetSalesMonthly: " + ex.Message);
                throw;
            }

        }