jQuery.datatables js 多层表头,后台分页

 

<!----多层表头后台分页table begin---->
                <div class="portlet-body" id="div_table3">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="portlet box grey-cascade">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <i class="fa fa-cogs"></i>
                                    </div>
                                    <div class="tools">
                                        <a href="javascript:;" class="collapse"></a>
                                    </div>
                                </div>

                                <div class="portlet-body">
                                    <div class="table-toolbar">
                                    </div>
                                    <table class="table table-striped table-bordered table-hover" id="table3">
                                        <thead>
                                            <tr>
                                                <th rowspan="2" class="text-center"><input type="checkbox" id="Select3" name="Select3" onchange="SelectAll3()" /></th>
                                                <th rowspan="2" class="text-center"><i class="fa fa-edit"></i> 操作</th>
                                                <th rowspan="2" class="text-center">序号</th>
                                                <th rowspan="2" class="text-center">编号</th>
                                                <th rowspan="2" class="text-center">日期</th>
                                                <th rowspan="2" class="text-center">机台号</th>
                                                <th rowspan="2" class="text-center">产品名称</th>
                                                <th rowspan="2" class="text-center">模号</th>
                                                <th colspan="5" class="text-center" style="border-bottom: 1px solid #ddd;">首件记录</th>
                                                <th colspan="3" class="text-center" style="border-bottom: 1px solid #ddd;">末件记录</th>
                                            </tr>
                                            <tr>
                                                <th class="text-center">产品情况</th>
                                                <th class="text-center">生产</th>
                                                <th class="text-center">报检时间</th>
                                                <th class="text-center">质量</th>
                                                <th class="text-center">确认时间</th>
                                                <th class="text-center">末件停机原因</th>
                                                <th class="text-center">生产</th>
                                                <th class="text-center">确认时间</th>
                                            </tr>
                                        </thead>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!----多层表头后台分页table end---->

        //查询按钮
        $("#btn_search").click(function () {
            //search();
            $('#table3').DataTable().ajax.reload(null, false);
        });
 //--多层表头后台分页table begin----------------------------------------------------------------------------------------------------------------------------
    var oTable3;
    //*** 查询
    function search3() {
        if (oTable3 != null) {
            oTable3.fnClearTable(false);
            oTable3.fnDestroy();
        }
        oTable3 = $('#table3').dataTable({
            "oLanguage": {    // 语言设置 
                "sSearch": "搜索:",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sPaginationType": "full_numbers",//详细分页组,可以支持直接跳转到某页
                "oPaginate": {
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "尾页",
                    "sFirst": "首页"
                },
            },
            "searching": false,//默认是打开的
            "bStateSave": true,//状态保存,使用了翻页或者改变了每页显示数据数量,会保存在cookie中,下回访问时会显示上一次关闭页面时的内容
            "aaSorting": [[2, 'asc']],//默认的排序方式,第3列,升序排列 
            "bPaginate": true,//翻页功能
            "bLengthChange": true,//改变每页显示数据数量
            "aLengthMenu": [[100, 20, 15, 5], [100, 20, 15, 5]],// change per page values here
            //"aLengthMenu": [[1, 2, 5, 15], [1, 2, 5, 15]],// change per page values here
            "bProcessing": true,       //加载数据时显示正在加载信息 

            //自定义列宽
            "bAutoWidth": false,//自动宽度
            flexibleWidth: false,//水平滚动
            responsive: true,//关闭响应式效果,否则以上设置无效

            //------------------------------------------------------------------------
            "serverSide": true,//启用服务器端分页
            "ajax": function (data, callback, settings) {
                $.ajax({
                    type: "Post",
                    url: getCookie("address") + "api/TBLSpotInspection/Page",
                    cache: false,	//禁用缓存
                    data: {
                        //组装分页参数
                        "PageIndex": data.draw == 1 ? 0 : data.start / data.length + 1,
                        "PageSize": data.length,
                        "draw": data.draw,

                        No: $("#txtNo").val(),
                        MachineNO: $("#txtMachineNO").val(),
                        ProductName: $("#txtProductName").val(),
                        FDateMonth: $("#txtFDateMonth").val(),
                    },
                    dataType: "json",
                    success: function (res) {
                        //封装返回数据
                        var json = JSON.parse(res);//json字串转json对象
                        var returnData = {};
                        returnData.draw = json.draw;//draw 请求次数,必要参数,标识数据变更,由前台传递到后台,后台执行完后需回传前台,跟页码没关系,页码是由start 和length 决定的
                        returnData.recordsTotal = json.recordsTotal;//总记录数
                        returnData.recordsFiltered = json.recordsFiltered;//后台不实现过滤功能,每次查询均视作全部结果
                        returnData.data = json.data;//data 是当前页数据,框架是根据,recordsTotal 和 请求中的length 来实现 页码控制的
                        //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
                        //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
                        callback(returnData);
                    },
                    error: function (error) {
                        alert(error);
                    }
                })
            },
            //------------------------------------------------------------------------

            "aoColumns": [
                {
                    "mData": "Id", "sTitle": '<input type="checkbox" id="Select3" name="Select3" onchange="SelectAll3()" />', "sWidth": "2%",
                    "aDataSort": false,
                    "bSortable": false
                },
                { "mData": "Id", "sTitle": '<i class="fa fa-edit"></i> 操作', "sWidth": "5%", "bSortable": false },
                {
                    sTitle: '序号',
                    sWidth: "5px",
                    data: null,
                    className: 'text-center whiteSpace', "bSortable": false,
                    render: function (data, type, row, meta) {
                        return meta.row + 1 + meta.settings._iDisplayStart;
                    }
                },
                {
                    "sTitle": "编号", "mDataProp": "No", "sClass": "", "sWidth": "150px", "bSortable": false,
                    render: function (data, type, row, meta) {
                        return '<button id="' + data + '" onclick="edit3(\'' + row.Id + '\')" type="button" class="btn default btn-xs green-stripe">' + data + '</button>'
                    }
                },
                {
                    "sTitle": "日期", "mDataProp": "FDateMonth", "sClass": "", "sWidth": "150px",
                    render: function (data, type, row, meta) {
                        if (data) {
                            var formatedDate = data != ("" || undefined) ? ChangeDateFormat(data) : "";
                            return formatedDate;
                        }
                        else
                            return data
                    }
                },
                { "sTitle": "机台号", "mDataProp": "MachineNO", "sClass": "", "sWidth": "150px", "bSortable": false },
                { "sTitle": "产品名称", "mDataProp": "ProductName", "sClass": "", "sWidth": "150px", "bSortable": false },
                { "sTitle": "模号", "mDataProp": "MouldNumName", "sClass": "text-center", "sWidth": "150px", "bSortable": false },


                {
                    "sTitle": "产品情况", "mDataProp": "FirstProductState", "sClass": "text-center", "sWidth": "150px", "bSortable": false,
                    render: function (data, type, row, meta) {
                        if (data == "Y") {
                            return "<span style='color:green;'>正常</span>";
                        } else {
                            return "<span style='color:red;'>异常</span>";
                        }
                    }
                },
                { "sTitle": "生产", "mDataProp": "FirstProducerName", "sClass": "text-center", "sWidth": "150px", "bSortable": false },
                {
                    "sTitle": "报检时间", "mDataProp": "FisrtInspectionTime", "sClass": "text-center", "sWidth": "150px", "bSortable": false,
                    render: function (data, type, row, meta) {
                        if (data) {
                            var formatedDate = data != ("" || undefined) ? ChangeDateTimeFormat(data) : "";
                            return formatedDate;
                        }
                        else
                            return data
                    }
                },
                { "sTitle": "质量", "mDataProp": "FistQualityPersonName", "sClass": "text-center", "sWidth": "150px", "bSortable": false },
                {
                    "sTitle": "确认时间", "mDataProp": "FirstConfirmTime", "sClass": "text-center", "sWidth": "150px", "bSortable": false,
                    render: function (data, type, row, meta) {
                        if (data) {
                            var formatedDate = data != ("" || undefined) ? ChangeDateTimeFormat(data) : "";
                            return formatedDate;
                        }
                        else
                            return data
                    }
                },


                { "sTitle": "末件停机原因", "mDataProp": "LastStopReason", "sClass": "text-center", "sWidth": "150px", "bSortable": false },
                { "sTitle": "生产", "mDataProp": "LastProducerName", "sClass": "text-center", "sWidth": "150px", "bSortable": false },
                {
                    "sTitle": "确认时间", "mDataProp": "LastConfirmTime", "sClass": "text-center", "sWidth": "150px", "bSortable": false,
                    render: function (data, type, row, meta) {
                        if (data) {
                            var formatedDate = data != ("" || undefined) ? ChangeDateTimeFormat(data) : "";
                            return formatedDate;
                        }
                        else
                            return data
                    }
                },
            ],
            "fnCreatedRow": function (nRow, aData, iDataIndex) {
                Metronic.initUniform($('td:eq(0)', nRow).html('<input type="checkbox" name="checkbox" value="' + aData.Id + '">').find("input"));
                $("td:eq(1)", nRow).html('<a href="#" data-toggle="tab"  onclick="edit3(\'' + aData.Id + '\')" class="btn btn-sm ">编辑</a>');
            },
        });

        //table展开收起
        $('#table3').on('click', 'tr', function () {
            $(this).toggleClass('active');
        });
    }

    //行内编辑按钮
    function edit3(curId) {
        _toPage("productionManage/spotInspectionEdit.html", "curId=" + curId + "&flagOP=edit");
    }

    //全选/反选 CheckBox
    var SelectAll3 = function () {
        $("#table3").find("tr").each(function (index) {
            $.uniform.update($(":checkbox", this).attr("checked", $('#Select3').is(':checked')));
        });
    }

        /// <summary>
        /// 查询分页
        /// </summary>
        /// <param name="Params"></param>
        /// <returns></returns>
        [HttpPost]
        [Route("Page")]
        public string Page([FromBody] Q_SpotInspection Params)
        {
            int totalCount = 0;
            int pageId = Params.PageIndex;
            int pageSize = Params.PageSize;

            bool order = Params.order == "asc" ? true : false;//升序或降序

            var entityList = UnitOfWork.GetQuery<MST_BaseItemEntity>().Where(t => t.DelFlag == (int)DelFlag.No);//获取所有基础信息类别
            var userList = APS.Data.Base.SQLDal.SysLogic.AllUserRoleList();//获取所有人员信息
            //var departmentList = UnitOfWork.GetQuery<MF_Department>();
            var productList = APS.Data.Base.SQLDal.ComLogic.ICItemList();//获取K3物料信息,即产品信息
            Expression<Func<TBL_SpotInspection, bool>> condition = null;
            Expression<Func<TBL_SpotInspection, bool>> expr = null;
            condition = a => a.DelFlag == (int)DelFlag.No;
            //condition = a => (1 == 1);//防止Expression报空引用错误
            if (!string.IsNullOrEmpty(Params.MachineNO))//机台号
            {
                expr = a => a.MachineNO.Contains(Params.MachineNO.Trim());
                condition = condition.And(expr);
            }
            if (!string.IsNullOrEmpty(Params.No))//编号
            {
                expr = a => a.No.Contains(Params.No.Trim());
                condition = condition.And(expr);
            }
            if (Params.FDateMonth != null && Params.FDateMonth != DateTime.MinValue)//日期(年月日)
            {
                expr = a => a.FDateMonth == Params.FDateMonth;
                condition = condition.And(expr);
            }
            if (!string.IsNullOrEmpty(Params.ProductName))//产品名称
            {
                var list = productList.Where(t => t.Name.Contains(Params.ProductName.Trim())).Select(t => t.Code);//根据产品名称模糊查询
                expr = a => list.Contains(a.ProductId);
                condition = condition.And(expr);
            }
            //if (!string.IsNullOrEmpty(Params.ProductDepartment))//部门
            //{
            //    var list = departmentList.Where(t => t.Name.Contains(Params.ProductDepartment.Trim())).Select(t => t.Id);//根据模具名称模糊查询
            //    expr = a => list.Contains(a.ProductDepartment);
            //    condition = condition.And(expr);
            //}
            //if (!string.IsNullOrEmpty(Params.DutyPerson))//责任人
            //{
            //    var list = userList.Where(t => t.UserName.Contains(Params.DutyPerson.Trim())).Select(t => t.UserId);//根据模具名称模糊查询
            //    expr = a => list.Contains(a.DutyPerson);
            //    condition = condition.And(expr);
            //}

            IEnumerable<TBL_SpotInspection> baseForms = UnitOfWork.GetByPage<TBL_SpotInspection, DateTime>(out totalCount, pageSize, pageId, a => a.FDateMonth, order, condition);
            if (baseForms != null && baseForms.Any())
            {
                foreach (TBL_SpotInspection item in baseForms)//遍历获取大类名称、类别名称
                {
                    if (!string.IsNullOrEmpty(item.FirstProducer) && userList != null && userList.Any())
                    {
                        item.FirstProducerName = userList.FirstOrDefault(t => t.UserId == item.FirstProducer) != null ? userList.FirstOrDefault(t => t.UserId == item.FirstProducer).UserName : string.Empty;
                    }
                    if (!string.IsNullOrEmpty(item.FistQualityPerson) && userList != null && userList.Any())
                    {
                        item.FistQualityPersonName = userList.FirstOrDefault(t => t.UserId == item.FistQualityPerson) != null ? userList.FirstOrDefault(t => t.UserId == item.FistQualityPerson).UserName : string.Empty;
                    }
                    if (!string.IsNullOrEmpty(item.LastProducer) && userList != null && userList.Any())
                    {
                        item.LastProducerName = userList.FirstOrDefault(t => t.UserId == item.LastProducer) != null ? userList.FirstOrDefault(t => t.UserId == item.LastProducer).UserName : string.Empty;
                    }
                    if (!string.IsNullOrEmpty(item.ProductId))//产品名称
                    {
                        item.ProductName = productList.FirstOrDefault(t => t.Code == item.ProductId) != null ? productList.FirstOrDefault(t => t.Code == item.ProductId).Name : string.Empty;
                    }
                    if (!string.IsNullOrEmpty(item.MouldNum))//模号
                    {
                        item.MouldNumName = entityList.FirstOrDefault(t => t.Id == item.MouldNum) != null ? entityList.FirstOrDefault(t => t.Id == item.MouldNum).Value : string.Empty;
                    }
                    if (!string.IsNullOrEmpty(item.MachineNO))//机台号
                    {
                        item.MachineName = entityList.FirstOrDefault(t => t.Id == item.MachineNO) != null ? entityList.FirstOrDefault(t => t.Id == item.MachineNO).Value : string.Empty;
                    }
                    if (!string.IsNullOrEmpty(item.MouldNum))//模号
                    {
                        item.MouldNumName = entityList.FirstOrDefault(t => t.Id == item.MouldNum) != null ? entityList.FirstOrDefault(t => t.Id == item.MouldNum).Value : string.Empty;
                    }
                }
            }

            System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();
            Dictionary<string, object> dic = new Dictionary<string, object>();
            dic.Add("draw", Params.draw);//请求次数,必要参数,由前台传递到后台,后台执行完后需回传前台
            dic.Add("recordsTotal", totalCount);//总记录数
            dic.Add("recordsFiltered", totalCount);//过滤后的总记录数
            dic.Add("data", baseForms);//具体的数据对象数组
            return jss.Serialize(dic);
        }
 public class Q_SpotInspection : Q_Base
    {
        /// <summary>
        /// 编号
        /// </summary>
        public string No { get; set; }
        /// <summary>
        /// 机台编号
        /// </summary>
        public string MachineNO { get; set; }
        /// <summary>
        /// 日期(年月日)
        /// </summary>
        public DateTime FDateMonth { get; set; }
        / <summary>
        / 签字
        / </summary>
        //public string DutyPerson { get; set; }
        /// <summary>
        /// 产品名称
        /// </summary>
        public string ProductName { get; set; }
    }
 public class Q_Base
    {
        public Q_Base()
        {
            PageIndex = 1;
            PageSize = 5;
        }

        /// <summary>
        /// 当前页次
        /// </summary>
        public int PageIndex { get; set; }

        /// <summary>
        /// 每页大小
        /// </summary>
        public int PageSize { get; set; }
        /// <summary>
        /// 请求次数,必要参数,标识数据变更,由前台传递到后台,后台执行完后需回传前台
        /// </summary>
        public int draw { get; set; }
        public int start { get; set; }
        public int length { get; set; }
        public int search { get; set; }
        public string sort { get; set; }//排序字段
        public string order { get; set; }//升序或降序


        /// <summary>
        /// action
        /// </summary>
        public string action { get; set; }
        /// <summary>
        /// sign
        /// </summary>
        public string sign { get; set; }
        /// <summary>
        /// sqlStr
        /// </summary>
        public string sqlStr { get; set; }
        /// <summary>
        /// Code
        /// </summary>
        public string Code { get; set; }
        /// <summary>
        /// Name
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// BaseId
        /// </summary>
        public string BaseId { get; set; }
        /// <summary>
        /// str1
        /// </summary>
        public string str1 { get; set; }
        /// <summary>
        /// str2
        /// </summary>
        public string str2 { get; set; }
        /// <summary>
        /// str3
        /// </summary>
        public string str3 { get; set; }
    }

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值