迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
无论是网站还是APP分页功能都是必不可少的。为什么使用分页呢? 1,加载速度快,不会占用服务器太多资源,减少服务器压力。 2,减少数据库压力。 3,提升用户体验。
那么我们常用的分页方法有两种。 1,真分页:每页都会从数据库读取少量数据,优点就是读取数据量少,性能非常好,大型网站往往采用这种方式。 2,假分页:从数据库一次性读取大量数据,但由于数据量比较大,导致响应时间长,但是之后的每一页都是快速显示,避免多次访问数据库。 我们常用的就是数据库分页(真分页)。下面看是如何实现的。
先定义存储过程
CREATE PROC DataUser @Page int, @intPagenum int, @Total int output as DECLARE @startIndex int, @endIndex int; set @startIndex=(@Page-1)*@intPagenum+1; set @endIndex=@Page*@intPagenum; begin select @Total=COUNT(1) from Blogs_User select OpenId,UserName,Href_Img,CONVERT(varchar(20),Addtime,20) as Addtime from (select *,ROW_NUMBER() over(order by Addtime desc) as tableId from Blogs_User) tableuser where tableId>=@startIndex and tableId<=@endIndex end
现在我们封装执行存储过程的方法 /// <summary> /// 执行存储过程,返回DataTable和总记录条数 /// </summary> /// <param name="page">页码</param> /// <param name="intPagenum">每页数量</param> /// <returns></returns> public static JsonDataTable GetUserDataDao(int page, int intPagenum) { try { DataSet ds = new DataSet(); JsonDataTable result = new JsonDataTable(); using (SqlConnection conn = new SqlConnection(Getconnection())) { using (SqlCommand cmd = conn.CreateCommand()) { cmd.CommandText = "DataUser";//存储过程名称 cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.Add(new SqlParameter("@Page", SqlDbType.Int));//入参 cmd.Parameters.Add(new SqlParameter("@intPagenum", SqlDbType.Int));//入参 cmd.Parameters["@Page"].Value = page; cmd.Parameters["@intPagenum"].Value = intPagenum; SqlParameter parameter = cmd.Parameters.Add("@Total", SqlDbType.Int); parameter.Direction = ParameterDirection.Output; if (conn.State == ConnectionState.Closed) { conn.Open(); } SqlDataAdapter my = new SqlDataAdapter(cmd); my.Fill(ds); result.dt = ds.Tables[0]; result.Total = Convert.ToInt32(cmd.Parameters["@Total"].Value); conn.Close(); return result; } } } catch (Exception e) { ErrorLog.Write("后台获取用户列表异常", e); return null; } }
封装读取数据接口 [HttpPost] public JsonResult GetUserList(int page, int intPagenum) { JsonDataTable result = Blogs_UserDao.GetUserDataDao(page, intPagenum); if (result != null && result.dt != null && result.dt.Rows.Count > 0) { result.JsonData = JsonHelper.JsonDataTable(result.dt); result.dt = null; return BaseJsonResult.GetInstance().CreateJsonGetResult(true, "成功!", result); } return BaseJsonResult.GetInstance().CreateJsonGetResult(false, "失败,没有数据!", null); } 后台分页就已经完成了。
前端JS调用,有分页的UI组件,也可以自己做成“加载更多”分页方式,使用ajax调用接口异步加载数据。 //加载更多点击事件 Dataloading() { this.Page++;//当前页码 $.post("/M_BlogsAPI/GetNewShare", { page: this.Page, ShareTypeId: 0, Pagesize: this.Pagesize }, function (data) { if (data.Result) { var AddNewShare = JSON.parse(data.Data.NewShareJson); for (var i = 0; i < AddNewShare.length; i++) { app.Blogs_NewShare.push(AddNewShare[i]); } } }); } 这里我使用的VUE。先默认Page=1,点击加载更多时,Page+1,再调用接口读取当前页面的数据再循环添加到数组里面。效果看博客留言或者短视频页面。
本文来自:C# Web分页功能实现 | 小曾博客 |
请发表评论