C# Web分頁功能實現

不管是網站仍是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分頁功能實現 | 小曾博客