MVC使用bootstrap的datatables 实现后台分页显示

最新推荐文章于 2022-06-19 10:07:56 发布

easyboot

最新推荐文章于 2022-06-19 10:07:56 发布

阅读量571

点赞数

分类专栏： WEB前端 MVC4 C#

本文链接：https://blog.csdn.net/easyboot/article/details/103697681

版权

WEB前端同时被 3 个专栏收录

111 篇文章

订阅专栏

93 篇文章

订阅专栏

MVC4

31 篇文章

订阅专栏

js 代码    
function MultiGNDDataQuery() {
        var EquipmentNo = $("#txtEquipmentNo").val();
        var OrganizationID = $("#txtOrganizationID").val(); 

                $('#tbMultiGND').DataTable({
                    dom: 'Bfrtip',
                    "buttons": [
                        {
                            'extend': 'excel',
                            'text': 'excel',
                            'className': 'ml-15 btn btn-success',//按钮的class名称 
                        },
                    ],
                    "paging": true,
                    "lengthChange": false,
                    "searching": false,
                    "processing": true,
                    "serverSide": true,
                    "iDisplayLength": 10,
                    ajax: function (data, callback, settings) {
                        var param = {}; 

                        //组装分页参数
                        param.startIndex = data.start;//起始页号
                        param.pageSize = data.length;//页长度 

                        console.log(data.start)
                        console.log(data.length)
                        $.ajax({
                            type: 'POST',
                            url: '@Url.Action("GetMultiGND")',
                            //contentType: "application/json; charset=utf-8",
                            data: {
                                OrganizationID: OrganizationID,
                                EquipmentNo: EquipmentNo,
                                dateFrom: dateFrom,
                                dateTo: dateTo,
                                StartIndex: data.start,
                                PageSize:data.length,
                            },
                            async: false,
                            success: function (result) {
                                console.log(result)
                        //setTimeout仅为测试延迟效果
                                setTimeout(function () {
                                    //异常判断与处理
                                    if (result.errorCode) {
                                        //$.dialog.alert("查询失败。错误码："+result.errorCode);
                                        return;
                                    }

                                    //封装返回数据，这里仅演示了修改属性名
                                    var returnData = {};
                                    returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                    returnData.recordsTotal = result.total;
                                    returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
                                    returnData.data = result.data;

                                    callback(returnData);
                        },200);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        //$.dialog.alert("查询失败");
                        //$wrapper.spinModal(false);
                    }
 
                        });
                    },

                    destroy: true,
                    //data: data,
                    columns: [
                        { data: 'EquipmentNo' },
                        { data: 'Status' },
                        { data: 'StandResistance' },
                        { data: 'Resistance1' },
                        { data: 'Resistance2' },
                        { data: 'Resistance3' },
                        { data: 'Resistance4' },
                        { data: 'Resistance5' },
                        { data: 'Resistance6' },
                        { data: 'Resistance7' },
                        { data: 'Resistance8' },
                        { data: 'CreateDate' }
                    ]
                });

        //    },
        //    error: function (message) {
        //        alert('未查询到数据');
        //        console.log(message)
        //    }
        //});
    }

MVC controller层代码   
     [HttpPost]
        public JsonResult GetMultiGND(QueryModels qm)
        { 
            ResultModels rm = new ResultModels();
            rm.Code = "0";
            try
            {
                DataSet ds = com.canmax.DAL.DataAnalysis.MultiGND.GetMultiGND1(qm); 

                List<MultiGNDModels> ls = DataTableExtend.ToDataList<MultiGNDModels>(ds.Tables[0]);
                return Json(new
                {
                    draw = 10, 
                    total = ds.Tables[1].Rows[0]["Total"].ToString(), 
                    data = ls,
                }, JsonRequestBehavior.AllowGet); 

            }
            catch (Exception ex)
            {
                rm.Code = "1";
                rm.Message = ex.Message;

                return Json(rm);
            }
        }

   DAL层代码
        public static DataSet GetMultiGND1(QueryModels qm)
            {
                string sqlstr = @"select  EquipmentNo,Status,ROUND(StandResistance,2) AS StandResistance ,
                                          ROUND(Resistance1,2) AS Resistance1,ROUND(Resistance2,2) AS Resistance2,
                                          ROUND(Resistance3,2) AS Resistance3,ROUND(Resistance4,2) AS Resistance4,
                                          ROUND(Resistance5,2) AS Resistance5,ROUND(Resistance6,2) AS Resistance6,
                                          ROUND(Resistance7,2) AS Resistance7,ROUND(Resistance8,2) AS Resistance8,  CreateDate
                                    from multignd
                                        where EquipmentNo LIKE @EquipmentNo and CreateDate between @dateFrom and @dateTo AND
                                              EquipmentNo IN (SELECT EquipmentNo FROM equipment WHERE  EquipmentType='MultiGND' AND OrganizationID LIKE @OrganizationID )
                                    LIMIT @StartIndex,@PageSize;
                                select  count(1) as Total
                                    from multignd
                                        where EquipmentNo LIKE @EquipmentNo and CreateDate between @dateFrom and @dateTo AND
                                              EquipmentNo IN (SELECT EquipmentNo FROM equipment WHERE  EquipmentType='MultiGND' AND OrganizationID LIKE @OrganizationID );";

                MySqlParameter[] sqlParameter =  { 
                    new MySqlParameter("EquipmentNo",qm.EquipmentNo+"%"),
                    new MySqlParameter("dateFrom",qm.dateFrom),
                    new MySqlParameter("dateTo",qm.dateTo),
                    new MySqlParameter("OrganizationID",qm.OrganizationID+"%"),
                    new MySqlParameter("StartIndex",qm.StartIndex),
                    new MySqlParameter("PageSize",qm.PageSize),
            };

                DataSet ds = MySqlHelper_.ExecuteDataSet(sqlstr, sqlParameter);

                return ds;
            }