jquery easyui datagrid 分頁實現

圖示1：

 

    通常情況下頁面數據的分頁顯示分成真假兩種。真分頁是依靠後臺查詢時控制調出數據的數量來實現分頁，也就是說頁面在後臺對數據進行處理，僅傳輸當前需要頁的數據到前臺來顯示。而假分頁則是後臺一次性將所有的數據一起傳送到前臺，再由前端程序來控制數據的顯示與遮蔽。

    既然要分頁，那麼首先就必須要獲得所有的數據，並且知道數據的數量。這步可以是由後臺程序返回告知，當然也可以有JavaScript自己去讀取。

 

    datagrid分頁 有一個附加的分頁控件，只需後臺獲取分頁控件自動提交的兩個參數rows每頁顯示的記錄數和page;//當前第幾頁，然後讀取相應頁數的記錄，和總記錄數total一塊返回即可，頁面如上圖所示。

核心代碼

要想實現分頁其pagination屬性必須爲true：

//設置分頁控件，設置其各個屬性值與是否要允許列排序等

<span style="font-family:SimSun;font-size:18px;"><table id="tt" " title="設置打分規則" class="easyui-datagrid" style="width: auto;
 height: 400px;" idfield="itemid" pagination="true" iconcls="                                                                icon-save" remoteSort="false"
        data-options="rownumbers:true,
        url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],
        method:'get',toolbar:'#tb' ," fitcolumns="true" striped="true"></span>

  一般處理程序中獲取前臺傳過來的pageRows，page，

 

<span style="font-family:SimSun;font-size:18px;"> //================================================================
            //獲取分頁和排序信息：頁大小，頁碼，排序方式，排序字段
            int pageRows, page;
            pageRows = 10;
            page = 1;
            string order, sort, oderby; order = sort = oderby = "";
            if (null != context.Request.QueryString["rows"])
            {//獲取前臺傳過來的每頁顯示數據的條數
                pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());

            }
            if (null != context.Request.QueryString["page"])
            {
                //獲取當前的頁碼
                page = int.Parse(context.Request.QueryString["page"].ToString().Trim());

            }
            if (null != context.Request.QueryString["sort"])
            {//排序方式

                order = context.Request.QueryString["sort"].ToString().Trim();

            }
            if (null != context.Request.QueryString["order"])
            {
                //根據的字段
                sort = context.Request.QueryString["order"].ToString().Trim();

            }
</span>

 

調出分頁查詢數據B層的方法

 

<span style="font-family:SimSun;font-size:18px;">//調用分頁的GetList方法
            DataSet ds = scorebll.GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows);
            int count = scorebll.GetRecordCount(strWhere.ToString());//獲取條數
            string strJson = ToJson.Dataset2Json(ds, count);//DataSet數據轉化爲Json數據
            context.Response.Write(strJson);//返回給前臺頁面
            context.Response.End();</span>

 

 

D層中的方法：

   根據查詢條件，是否排序（以哪一列排序），調用數據庫中查詢符合條件的數據

<span style="font-family:SimSun;font-size:18px;">/// <summary>
        /// 分頁獲取數據列表
        /// </summary>
        public DataSet GetListByPage(string strWhere, string orderby, int startIndex, int endIndex)
        {
            StringBuilder strSql=new StringBuilder();
            strSql.Append("SELECT * FROM ( ");
            strSql.Append(" SELECT ROW_NUMBER() OVER (");
            if (!string.IsNullOrEmpty(orderby.Trim()))
            {
                strSql.Append("order by T." + orderby );
            }
            else
            {
                strSql.Append("order by T.ScoreStyleID desc");
            }
            strSql.Append(")AS Row, T.*  from t_scoreRule T ");
            if (!string.IsNullOrEmpty(strWhere.Trim()))
            {
                strSql.Append(" WHERE " + strWhere);
            }
            strSql.Append(" ) TT");
            strSql.AppendFormat(" WHERE TT.Row between {0} and {1}", startIndex, endIndex);
            return DbHelperSQL.Query(strSql.ToString());
        }</span>

   在實現的過程中，我們要記得前臺加上這句話

<span style="font-family:SimSun;font-size:18px;"> </span>

<span style="font-family:SimSun;font-size:18px;">//增加查詢參數，重新加載表格
        function reloadgrid() {

            //查詢參數直接添加在queryParams中

            var queryParams = $('#tt').datagrid('options').queryParams;
            getQueryParams(queryParams);
            $('#tt').datagrid('options').queryParams = queryParams;//傳遞值

            $("#tt").datagrid('reload');//重新加載table

        }</span>

   表格重新加載，因爲這樣才能拿到後面傳來的數據，如果不加這個效果沒出來（付出了時間的代價）。

 

   

總結：

    對於這樣的框架還有很多值得我們學習的地方，上面的這些按紐都可以靈活的去添加，例如：添加導入、導出數據等，都容易實現，好的框架的學習，讓我們學會了如何站在舉人的肩膀上更快成長，具體的行動需要我們融入自己的學習當中，在實踐中不斷的體會到了，學與會用真的是兩回事啊，大家共同努力多動手多實踐。