asp.net mvc 中利用jquery datatables 实现数据分页显示

简介: 1、Controller中的方法代码如下:由于方法中的存储过程没有带分页参数,所以还可以有继续优化的空间。

1、Controller中的方法代码如下:

由于方法中的存储过程没有带分页参数,所以还可以有继续优化的空间。

        /// <summary>
        /// 获取测点列表
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public JsonResult GetMeasurePointList(string TreeID, string TreeType, int sEcho, int iDisplayStart, int iDisplayLength)
        {
            DataTable dtResult = new DataTable();
            string sql = string.Format("EXEC P_GET_ZXJG_TagList '{0}','{1}'", TreeID, TreeType);
            dtResult = QuerySQL.GetDataTable(sql);
            dtResult.Columns.Add("XuHao", typeof(string));
            dtResult.Columns.Add("StrValueTime", typeof(string));
            for (int i = 0; i < dtResult.Rows.Count; i++)
            {
                dtResult.Rows[i]["XuHao"] = (i + 1).ToString();
                dtResult.Rows[i]["StrValueTime"] = Convert.ToDateTime(dtResult.Rows[i]["F_ValueTime"]).ToString("yyyy-MM-dd HH:mm:ss");
            }
            int iTotalRecords = 0;
            int iTotalDisplayRecords = 0;
            List<DataRow> queryList = dtResult.AsEnumerable().ToList();
            iTotalRecords = queryList.Count();
            queryList = queryList.Skip(iDisplayStart).Take(iDisplayLength).ToList();
            iTotalDisplayRecords = queryList.Count();
            var temp = from p in queryList
                       select new
                       {
                           XuHao = p.Field<string>("XuHao").ToString(),
                           F_Description = p.Field<string>("F_Description").ToString(),
                           StrValueTime = p.Field<string>("StrValueTime").ToString(),
                           F_Value = p.Field<decimal>("F_Value").ToString(),
                           F_Unit = p.Field<string>("F_Unit").ToString(),
                           F_AlmLow = p.Field<decimal>("F_AlmLow").ToString(),
                           F_AlmUp = p.Field<decimal>("F_AlmUp").ToString()
                       };
            return Json(new
                {
                    draw = sEcho,
                    recordsFiltered = iTotalRecords,
                    recordsTotal = iTotalDisplayRecords,
                    data = temp.ToList()
                }, JsonRequestBehavior.AllowGet);
        }


2、cshtml视图页面中代码如下:

    function InitData() {
        var dataTable = $('#tbMeasurePointList').DataTable({
            "scrollY": "hidden",
            "scrollCollapse": false,
            "dom": 'tr<"bottom"lip><"clear">',
            language: {
                lengthMenu: '',//左上角的分页大小显示。
                search: '<span class="label label-success">搜索:</span>',//右上角的搜索文本,可以写html标签
                loadingRecords: '数据加载中...',
                paginate: {
                    //分页的样式内容。
                    previous: "上一页",
                    next: "下一页",
                    first: "",
                    last: ""
                },
                zeroRecords: "暂无数据",//table tbody内容为空时,tbody的内容。
                //下面三者构成了总体的左下角的内容。
                info: "<span class='pagesStyle'>总共<span class='recordsStyle'> _TOTAL_ 条,计 _PAGES_ </span>页,当前显示 _START_ -- _END_ 条记录 </span>",//左下角的信息显示,大写的词为关键字。初始_MAX_ 条 
                infoEmpty: "0条记录",//筛选为空时左下角的显示。
                infoFiltered: ""//筛选之后的左下角筛选提示,
            },
            "lengthChange": false,
            "ordering": false,
            "iDisplayLength": 10,
            "searching": false,
            destroy: true, //Cannot reinitialise DataTable,解决重新加载表格内容问题  
            "serverSide": true,
            "sAjaxSource": "@Url.Action("GetMeasurePointList", "OnlineMonitor")",
            "fnServerData": function (sSource, aoData, fnCallback) {
                aoData.push({ "name": "TreeID", "value": $("#hidTreeID").val() });
                aoData.push({ "name": "TreeType", "value": $("#hidTreeType").val() });
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [
                { "mDataProp": "XuHao", "width": "50" },
                { "mDataProp": "F_Description", "width": "400" },
                { "mDataProp": "StrValueTime", "width": "200" },
                { "mDataProp": "F_Value", "width": "100" },
                { "mDataProp": "F_Unit", "width": "100" },
                { "mDataProp": "F_AlmLow", "width": "100" },
                { "mDataProp": "F_AlmUp", "width": "100"}

            ],
            "createdRow": function (row, data, index) {
                $(row).children('td').eq(0).attr('style', 'text-align: center;');
                $(row).children('td').eq(1).attr('style', 'text-align: left;');
                $(row).children('td').eq(2).attr('style', 'text-align: center;');
                $(row).children('td').eq(3).attr('style', 'text-align: right;');
                $(row).children('td').eq(4).attr('style', 'text-align: center;');
                $(row).children('td').eq(5).attr('style', 'text-align: right;');
                $(row).children('td').eq(6).attr('style', 'text-align: right;');
            }
        });
    }

3、实际显示效果如下图所示:





相关文章
|
7月前
|
网络协议 定位技术 网络安全
IPIP.NET-IP地理位置数据
IPIP.NET 是一家专注于 IP 地理位置数据的提供商,基于 BGP/ASN 数据与全球 800+ 网络监测点技术,提供高精度的 IPv4 和 IPv6 定位服务。其核心服务包括地理位置查询、详细地理信息和网络工具等,广泛应用于网络安全、广告营销、CDN 优化等领域。数据覆盖全球,支持多语言,每日更新确保实时性。IPIP.NET 提供 API 接口、离线数据库及多种语言 SDK,方便开发者集成使用。
1199 0
|
SQL XML 关系型数据库
入门指南:利用NHibernate简化.NET应用程序的数据访问
【10月更文挑战第13天】NHibernate是一个面向.NET的开源对象关系映射(ORM)工具,它提供了从数据库表到应用程序中的对象之间的映射。通过使用NHibernate,开发者可以专注于业务逻辑和领域模型的设计,而无需直接编写复杂的SQL语句来处理数据持久化问题。NHibernate支持多种数据库,并且具有高度的灵活性和可扩展性。
287 2
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
154 0
|
开发框架 .NET 数据库连接
闲话 Asp.Net Core 数据校验(三)EF Core 集成 FluentValidation 校验数据例子
闲话 Asp.Net Core 数据校验(三)EF Core 集成 FluentValidation 校验数据例子
204 1
|
JSON 前端开发 Java
Spring MVC返回JSON数据
综上所述,Spring MVC提供了灵活、强大的方式来支持返回JSON数据,从直接使用 `@ResponseBody`及 `@RestController`注解,到通过配置消息转换器和异常处理器,开发人员可以根据具体需求选择合适的实现方式。
434 4
|
开发框架 JSON 前端开发
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
|
开发框架 前端开发 算法
分享 .NET EF6 查询并返回树形结构数据的 2 个思路和具体实现方法
分享 .NET EF6 查询并返回树形结构数据的 2 个思路和具体实现方法
211 0
|
JSON JavaScript 数据格式
Jquery 将 JSON 列表的 某个属性值,添加到数组中,并判断一个值,在不在数据中
Jquery 将 JSON 列表的 某个属性值,添加到数组中,并判断一个值,在不在数据中
167 0
|
.NET
Asp.Net 分页显示控件
Asp.Net 分页显示控件 这篇文章最开始是2008年2月份写的,我起初想着大家应该都有自己的数据分页方式,而我本人并非专业做控件开发,所以只是想着提供点思路,并没有做太细致的研究。结果根据浏览量发现大家还是比较关注的,于是就抽空对它做了一点完善,对这篇文章也进行了一个更新。
1122 0

相关课程

更多