asp.net中應用JQuery.pagination分頁

JQuery.pagination這款分頁控件非常好用，可實現無刷新分頁，為了方便下次做項目便於拷貝，所以在此發布一下，具體的實現流程如下：

效果圖：

 

 

 

JQuery.pagination的各個參數的說明如下：

 

四、參數

參數名	描述	參數值
maxentries	總條目數	必選參數，整數
items_per_page	每頁顯示的條目數	可選參數，默認是10
num_display_entries	連續分頁主體部分顯示的分頁條目數	可選參數，默認是10
current_page	當前選中的頁面	可選參數，默認是0，表示第1頁
num_edge_entries	兩側顯示的首尾分頁的條目數	可選參數，默認是0
link_to	分頁的鏈接	字符串，可選參數，默認是"#"
prev_text	“前一頁”分頁按鈕上顯示的文字	字符串參數，可選，默認是"Prev"
next_text	“下一頁”分頁按鈕上顯示的文字	字符串參數，可選，默認是"Next"
ellipse_text	省略的頁數用什么文字表示	可選字符串參數，默認是"…"
prev_show_always	是否顯示“前一頁”分頁按鈕	布爾型，可選參數，默認為true，即顯示“前一頁”按鈕
next_show_always	是否顯示“下一頁”分頁按鈕	布爾型，可選參數，默認為true，即顯示“下一頁”按鈕
callback	回調函數	默認無執行效果

首先新建JQueryPage.aspx頁面引入js文件和css文件，至於這兩個文件下載的話，網上一大把，找不到也可以QQ我，我發給你..

     <!--分頁所需要的css文件-->
    <link href="css/pagination.css" type="text/css" rel="stylesheet" />
    <!--分頁所需要的js文件-->
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.pagination.js" type="text/javascript"></script>

 

JQueryPage.aspx頁面html代碼如下：

 <form id="form1" runat="server">
    <div>
　　　　　<div style="width:800px;height:30px; line-height:30px; margin:10px auto 10px auto;">
            根據類別篩選：
            <select style="width:150px; background-image:url('img/inputbg.gif'); background-repeat:repeat-x;" id="selectednews">
                <option value="0">全部新聞</option>
                <option value="1">行業新聞</option>
                <option value="2">公司動態</option>
            </select>
        </div>
        <table id="tab">
              <tr>
                <th class="td1">編號</th>
                <th class="td2">新聞標題</th>
                 <th>新聞類型</th>
                 <th>瀏覽量</th>
                <th>發布日期</th>
                </tr>
        </table>
        <div id="pageintool">
             <div id="Pagination" class="Pagination" ></div>
             <span class="Datastyle"><label style="color:red;" id="pageSize"></label>條/頁-總共<label style="color:red;" id="DataSum"></label>條</span>
            <input type="text" id="toPage" />
            <input type="button" value="跳轉" id="BtntoPage" />

        </div>
        <div style="width:800px; margin:30px auto auto auto ;">
            <p>增加功能1----總記錄下，輸入指定頁面可進行跳轉。</p>
            <p>增加功能2----篩選指定參數，進行篩選查詢，也可輸入指定頁面可進行跳轉。</p>
            <p>問題總結：篩選查詢出結果后，未能正確更新總記錄數，導致分頁碼顯示不正常。是pagination控件BUG問題？還是編程問？</p>
       </div>
    </div>
    </form>

下面來講解一下實現過程，

  $("#Pagination").pagination(<%=pageCount%>, {

                callback: PageCallback,//回調函數
                prev_text: '上一頁',//前一頁顯示的文本文字，字符串參數，可選，默認是"Prev"
                next_text: '下一頁',//下一頁顯示的文本文字， 字符串參數，可選，默認是"Next"
                items_per_page: pageSize,//每頁顯示的條目數,已經設置為10條
                num_display_entries: 5,//連續分頁主體部分顯示的分頁條目數,默認是10     
                current_page: pageIndex,//當前頁
                num_edge_entries: 1//兩側顯示的首尾分頁的條目數
            });

以上這段代碼會讓分頁按鈕顯示出來，

 

  ///回調函數，當點擊鏈接翻頁的時候此函數被調用，此函數接受兩個參數，新一頁的索引和pagination容器（一個DOM元素）。如果回調函數返回false，則pagination事件停止執行
            function PageCallback(index, jq) {
                $("#toPage").val(index+1);//在點擊分頁按鈕翻頁的時候，輸入框跳轉的值也跟隨變化
                Init(index);
            }

以上這段代碼是在點擊分頁按鈕進行翻頁的時候調用的，回調函數

 

 ///提交數據
  ///提交數據
        function Init(pageIndex) {
            if(parseInt($("#selectednews option:selected").val())>0)
            {
                $.ajax({
                    type: "POST",//提交方式為post
                    dataType: "text",//數據類型
                    url: 'JQueryPage.aspx',//提交到后台處理頁           
                    data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize+"&options="+$("#selectednews option:selected").text(),//最主要的兩個參數，用於獲取數據庫中的指定范圍內的數據                                 
                    success: function (data) {
                        if (data != "") {
                            $("#tab tr:gt(0)").remove();//移除現有的數據行
                            $("#tab").append(data);
                        }
                    }
                })
            }else
            {
                $.ajax({
                    type: "POST",//提交方式為post
                    dataType: "text",//數據類型
                    url: 'JQueryPage.aspx',//提交到后台處理頁           
                    data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,//最主要的兩個參數，用於獲取數據庫中的指定范圍內的數據                                 
                    success: function (data) {
                        if (data != "") {
                            $("#tab tr:gt(0)").remove();//移除現有的數據行
                            $("#tab").append(data);
                        }
                    }
                })
            }
        }

以上這段代碼是post到后台獲取數據返回頁面的核心，

 

關於我增加的跳轉按鈕代碼如下：

 

  //輸入框跳轉按鈕
            $("#BtntoPage").click(function(){

                var $topageindex = $("#toPage").val();//獲取輸入框的跳轉值
              
                var $reg_check= /^[-+]?\d+$/;//驗證非數字正則表達式

                if($reg_check.test($topageindex))
                {
                    //計算出總頁數，計算方法為：（總記錄數+每頁顯示數-1)/每頁顯示數
                    var $totalPage = ((parseInt(<%=pageCount%>)+pageSize-1)/pageSize);
                    if(parseInt($topageindex)<1||parseInt($topageindex)>$totalPage)
                    {
                        alert("無效頁碼！！超出頁碼索引值！！！");
                    }else
                    {
                        alert("正在為您跳轉第:"+$topageindex+"頁.......");

                        ///加入這段，主要實現分頁按鈕的改變選中樣式
                        $("#Pagination").pagination(<%=pageCount%>, {
                            callback: PageCallback,//回調函數
                            prev_text: '上一頁',//前一頁顯示的文本文字，字符串參數，可選，默認是"Prev"
                            next_text: '下一頁',//下一頁顯示的文本文字， 字符串參數，可選，默認是"Next"
                            items_per_page: pageSize,//每頁顯示的條目數,已經設置為10條
                            num_display_entries: 5,//連續分頁主體部分顯示的分頁條目數,默認是10     
                            current_page: $topageindex-1,//注意，這里的當前頁碼改為了，文本框輸入的值-1，頁碼是從0開始，所以要減1
                            num_edge_entries: 1//兩側顯示的首尾分頁的條目數
                        });

                        Init($topageindex-1);
                    }
                }else
                {
                    alert("只能輸入數字！！！！");
                    $("#toPage").focus().select();
                }
             })

        })

 

篩選代碼如下:

    
            /// 篩選查詢
            $("#selectednews").change(function(){

                $("#Pagination").pagination(<%=pageCount%>, {
                       callback: PageCallback,//回調函數
                       prev_text: '上一頁',//前一頁顯示的文本文字，字符串參數，可選，默認是"Prev"
                       next_text: '下一頁',//下一頁顯示的文本文字， 字符串參數，可選，默認是"Next"
                       items_per_page: pageSize,//每頁顯示的條目數,已經設置為5條
                       num_display_entries: 5,//連續分頁主體部分顯示的分頁條目數,默認是10     
                       current_page: pageIndex,//當前頁
                       num_edge_entries: 1//兩側顯示的首尾分頁的條目數
                });

                $("#pageSize").text(pageSize);//每頁顯示條數
                $("#DataSum").text(<%=pageCount%>); //總記錄數    

               $("#toPage").val(1);//初始化頁面，跳轉框默認為1

                Init(pageIndex);
            })

 

 

再來看后台接收PageIndex和pageSize這兩個參數是如何處理的。。。。

 

 public partial class JQueryPage : System.Web.UI.Page
    {
        public int pageCount = 0;//數據庫總記錄數

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                pageCount = GetTotalPage();//獲取數據庫總條數

                if (Request["pageIndex"] != null && Request["pageSize"] != null)
                {
                    int pageSize = Convert.ToInt32(Request["pageSize"]) == 0 ? 1 : Convert.ToInt32(Request["pageSize"]);
                    int pageIndex = Convert.ToInt32(Request["pageIndex"]) == 0 ? 1 : Convert.ToInt32(Request["pageIndex"]);

                    if (Request["options"] != null)
                    {
                        string options = Request["options"].ToString();
                        pageCount = GetTotalPageBykey(options);//始終更新不了總記錄數.....
                        Response.Write(GetPageByKey(pageIndex, pageSize, options));
                        Response.End();
                    }
                    else
                    {
                        Response.Write(GetTalentPoolFenPageNumber(pageSize, pageIndex));
                        Response.End();
                    }
                }
            }
        }

　　　　  /// <summary>
        ///  根據參數獲取總記錄數
        /// </summary>
        /// <param name="options"></param>
        /// <returns></returns>
        private int GetTotalPageBykey(string options)
        {
            string sql = "select COUNT(*) from IndustryNews where NewsType=  '" + options + "'";
            int sumData = int.Parse(SqlHelper.ExecuteScalar(SqlHelper.ConnectionString, System.Data.CommandType.Text, sql).ToString());
            return sumData;
        }
　　　　  /// <summary>
        /// 根據參數獲取相應的數據
        /// </summary>
        /// <param name="pageIndex"></param>
        /// <param name="pageSize"></param>
        /// <param name="options"></param>
        /// <returns></returns>
        private string GetPageByKey(int pageIndex, int pageSize, string options)
        {
            StringBuilder sb = new StringBuilder();

            string sql = "SELECT TOP " + pageSize + " NewsNo,NewsTitle,NewsType,BrowserCount,PublishDate FROM IndustryNews WHERE NewsType = '" + options + "' AND ( NewsNo NOT IN (SELECT TOP " + pageSize * (pageIndex - 1) + " NewsNo FROM IndustryNews WHERE NewsType='" + options + "' ORDER BY NewsNo DESC)) ORDER BY PublishDate DESC";

            SqlConnection conn = new SqlConnection(SqlHelper.ConnectionString);

            conn.Open();

            SqlCommand cmd = new SqlCommand(sql, conn);

            SqlDataReader dr = cmd.ExecuteReader();

            try
            {
                while (dr.Read())
                {
                    ///如果需要將個別字段轉換，可提前轉換，或增加樣式

                    sb.Append("<tr>");
                    sb.Append("<td class='td1'>" + dr["NewsNo"].ToString() + "</td>");
                    if (int.Parse(dr["BrowserCount"].ToString()) > 100)
                    {
                        sb.Append("<td class='td2'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a>&nbsp;<img src='img/hot.gif' alt=''/></td>");
                    }
                    else
                    {
                        sb.Append("<td style='text-align:left;'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a></td>");
                    }
                    sb.Append("<td>" + dr["NewsType"].ToString() + "</td>");
                    sb.Append("<td>" + dr["BrowserCount"].ToString() + "</td>");
                    sb.Append("<td>" + System.DateTime.Parse(dr["PublishDate"].ToString()).ToShortDateString() + "</td>");
                    sb.Append("</tr>");
                }
            }
            finally
            {
                dr.Close();
                conn.Close();
            }

            return sb.ToString();
        }

        /// <summary>
        /// 根據頁面顯示數，和當前也得索引進行分頁
        /// </summary>
        /// <param name="pageSize">每頁顯示數量</param>
        /// <param name="currPageIndex">當前頁索引</param>
        /// <returns></returns>
        public string GetTalentPoolFenPageNumber(int pageSize, int currPageIndex)
        {
            StringBuilder sb = new StringBuilder();

            string sql = "SELECT TOP " + pageSize + " NewsNo,NewsTitle,NewsType,BrowserCount,PublishDate FROM IndustryNews WHERE NewsNo NOT IN (SELECT TOP " + pageSize * (currPageIndex - 1) + " NewsNo FROM IndustryNews ORDER BY NewsNo DESC) ORDER BY PublishDate DESC";

            SqlConnection conn = new SqlConnection(SqlHelper.ConnectionString);

            conn.Open();

            SqlCommand cmd = new SqlCommand(sql,conn);

            SqlDataReader dr = cmd.ExecuteReader();

            try
            {
                while (dr.Read())
                {
                    ///如果需要將個別字段轉換，可提前轉換，或增加樣式

                    sb.Append("<tr>");
                    sb.Append("<td class='td1'>" + dr["NewsNo"].ToString() + "</td>");

                    //根據瀏覽量的大小控制hot圖片的顯示
                    if (int.Parse(dr["BrowserCount"].ToString()) > 100)
                    {
                        sb.Append("<td class='td2'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a>&nbsp;<img src='img/hot.gif' alt=''/></td>");
                    }
                    else
                    {
                        sb.Append("<td style='text-align:left;'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a></td>");
                    }
                    sb.Append("<td>" + dr["NewsType"].ToString() + "</td>");
                    sb.Append("<td>" + dr["BrowserCount"].ToString() + "</td>");
                    sb.Append("<td>" + System.DateTime.Parse(dr["PublishDate"].ToString()).ToShortDateString() + "</td>");
                    sb.Append("</tr>");
                }
            }
            finally
            {
                dr.Close();
                conn.Close();
            }

            return sb.ToString();
        }

        /// <summary>
        /// 獲取數據庫總條數
        /// </summary>
        /// <returns></returns>
        private int GetTotalPage()
        {

            string sql = "select COUNT(*) from IndustryNews";

            int sumData = int.Parse(SqlHelper.ExecuteScalar(SqlHelper.ConnectionString, System.Data.CommandType.Text, sql).ToString());

            return sumData;
        }


    }

 

先定義public int pageCount = 0;//數據庫總記錄數，用於前台<%=pageCount%>獲取數據總記錄數，

頁面加載的時候 pageCount = GetTotalPage();//獲取數據庫總條數

然后在判斷兩個參數是否為空。。。。if (Request["pageIndex"] != null && Request["pageSize"] != null)

 

 

 　　// <summary>
        /// 根據頁面顯示數，和當前也得索引進行分頁
        /// </summary>
        /// <param name="pageSize">每頁顯示數量</param>
        /// <param name="currPageIndex">當前頁索引</param>
        /// <returns></returns>
        public string GetTalentPoolFenPageNumber(int pageSize, int currPageIndex){}

 

重要的是這個方法，根據分頁查詢語句進行數據庫查詢出需要的數據，然后用StringBuilder進行表格拼接，最后返回輸出到頁面,

關於SqlHelper類，也沒什么主要用它來記錄了數據庫連接字符串，和一些經常使用的查詢語句，代碼如下：

 

 public class SqlHelper
    {
        //private static Hashtable parmCache = Hashtable.Synchronized(new Hashtable());
        public static string staticConnectionString = System.Configuration.ConfigurationManager.AppSettings["connectionString"];

        /// <summary>
        /// 獲取連接字符串
        /// </summary>
        public static string ConnectionString
        {
            get
            {
                return staticConnectionString;
            }
        }

        /// <summary>
        /// 獲取服務器時間
        /// </summary>
        /// <returns></returns>
        public static DateTime GetServerTime()
        {
            using (SqlConnection con = new SqlConnection(ConnectionString))
            {
                SqlCommand cmd = new SqlCommand("SELECT GetDate()", con);
                con.Open();
                DateTime dt = (DateTime)cmd.ExecuteScalar();
                return dt;
            }
        }

        /// <summary>
        /// 執行非查詢語句
        /// </summary>
        /// <param name="cmdText">命令文本</param>
        /// <param name="commandParameters">參數列表</param>
        /// <returns>執行命令所影響的數據行數</returns>
        public static int ExecuteNonQuery(string cmdText, params SqlParameter[] commandParameters)
        {
            using (SqlConnection conn = new SqlConnection(ConnectionString))
            {
                SqlCommand cmd = PrepareCommand(conn, null, CommandType.StoredProcedure, cmdText, commandParameters);
                int rv = cmd.ExecuteNonQuery();
                cmd.Parameters.Clear();
                return rv;
            }
        }

        /// <summary>
        /// 執行非查詢語句
        /// </summary>
        /// <param name="connectionString">連接字符串</param>
        /// <param name="cmdType">命令類型</param>
        /// <param name="cmdText">命令文本</param>
        /// <param name="commandParameters">參數列表</param>
        /// <returns>執行命令所影響的數據行數</returns>
        public static int ExecuteNonQuery(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {
            using (SqlConnection conn = new SqlConnection(connectionString))
            {
                SqlCommand cmd = PrepareCommand(conn, null, cmdType, cmdText, commandParameters);
                int rv = cmd.ExecuteNonQuery();
                cmd.Parameters.Clear();
                return rv;
            }
        }

        /// <summary>
        /// 執行非查詢語句
        /// </summary>
        /// <remarks>
        /// 例如: int result = ExecuteNonQuery(connString, CommandType.StoredProcedure, "PublishOrders", new SqlParameter("@prodid", 24));
        /// </remarks>
        /// <param name="conn">已存在的數據庫連接</param>
        /// <param name="commandType">命令類型</param>
        /// <param name="commandText">命令文本</param>
        /// <param name="commandParameters">命令參數</param>
        /// <returns>執行命令所影響的數據行數</returns>
        public static int ExecuteNonQuery(SqlConnection connection, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {
            SqlCommand cmd = PrepareCommand(connection, null, cmdType, cmdText, commandParameters);
            int val = cmd.ExecuteNonQuery();
            cmd.Parameters.Clear();
            return val;
        }

        /// <summary>
        /// 在事務中執行非查詢語句
        /// </summary>
        /// <param name="trans">事務</param>
        /// <param name="commandType">命令類型</param>
        /// <param name="commandText">命令文本</param>
        /// <param name="commandParameters">命令參數</param>
        /// <returns>執行命令所影響的數據行數</returns>
        public static int ExecuteNonQuery(SqlTransaction trans, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {
            SqlCommand cmd = PrepareCommand(trans.Connection, trans, cmdType, cmdText, commandParameters);
            int val = cmd.ExecuteNonQuery();
            cmd.Parameters.Clear();
            return val;
        }

        /// <summary>
        /// 執行查詢命令
        /// </summary>
        /// <param name="connectionString">連接字符串</param>
        /// <param name="cmdType">命令類型</param>
        /// <param name="cmdText">命令文本</param>
        /// <param name="commandParameters">參數列表</param>
        /// <returns>數據讀取器</returns>
        public static SqlDataReader ExecuteReader(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {
            SqlConnection conn = new SqlConnection(connectionString);

            try
            {
                SqlCommand cmd = PrepareCommand(conn, null, cmdType, cmdText, commandParameters);
                SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                cmd.Parameters.Clear();
                return dr;
            }
            catch
            {
                conn.Close();
                throw;
            }
        }

        /// <summary>
        /// 執行查詢命令
        /// </summary>
        /// <param name="cmdText">命令文本</param>
        /// <param name="commandParameters">參數列表</param>
        /// <returns>數據讀取器</returns>
        public static SqlDataReader ExecuteReader(string cmdText, params SqlParameter[] commandParameters)
        {
            SqlConnection conn = new SqlConnection(ConnectionString);

            try
            {
                SqlCommand cmd = PrepareCommand(conn, null, CommandType.StoredProcedure, cmdText, commandParameters);
                SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                cmd.Parameters.Clear();
                return dr;
            }
            catch
            {
                conn.Close();
                throw;
            }
        }

        /// <summary>
        /// 執行單值查詢語句
        /// </summary>
        /// <param name="connectionString">連接字符串</param>
        /// <param name="cmdType">命令類型</param>
        /// <param name="cmdText">命令文本</param>
        /// <param name="commandParameters">參數列表</param>
        /// <returns>查詢到的標量值</returns>
        public static object ExecuteScalar(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {
            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                SqlCommand cmd = PrepareCommand(connection, null, cmdType, cmdText, commandParameters);
                object val = cmd.ExecuteScalar();
                cmd.Parameters.Clear();
                return val;
            }
        }

        /// <summary>
        /// 執行單值查詢語句
        /// </summary>
        /// <param name="connection">現有的連接</param>
        /// <param name="cmdType">命令類型</param>
        /// <param name="cmdText">命令文本</param>
        /// <param name="commandParameters">參數列表</param>
        /// <returns>查詢到的標量值</returns>
        public static object ExecuteScalar(SqlConnection connection, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
        {
            SqlCommand cmd = PrepareCommand(connection, null, cmdType, cmdText, commandParameters);
            object val = cmd.ExecuteScalar();
            cmd.Parameters.Clear();
            return val;
        }

        ///// <summary>
        ///// 緩存參數數組
        ///// </summary>
        ///// <param name="cacheKey">緩存鍵</param>
        ///// <param name="commandParameters">參數數組</param>
        //internal static void CacheParameters(string cacheKey, params SqlParameter[] commandParameters)
        //{
        //    parmCache[cacheKey] = commandParameters;
        //}

        ///// <summary>
        ///// 獲取緩存的參數數組
        ///// </summary>
        ///// <param name="cacheKey">緩存鍵</param>
        ///// <returns>緩存的參數數組，或者如果給定的鍵不存在則返回null</returns>
        //internal static SqlParameter[] GetCachedParameters(string cacheKey)
        //{
        //    SqlParameter[] cachedParms = (SqlParameter[])parmCache[cacheKey];

        //    if (cachedParms == null)
        //        return null;

        //    SqlParameter[] clonedParms = new SqlParameter[cachedParms.Length];

        //    for (int i = 0, j = cachedParms.Length; i < j; i++)
        //        clonedParms[i] = (SqlParameter)((ICloneable)cachedParms[i]).Clone();

        //    return clonedParms;
        //}

        /// <summary>
        /// 幫助器方法，准備命令參數
        /// </summary>
        /// <param name="cmd">命令對象</param>
        /// <param name="conn">連接對象</param>
        /// <param name="trans">事務對象</param>
        /// <param name="cmdType">命令類型</param>
        /// <param name="cmdText">命令文本</param>
        /// <param name="cmdParms">命令參數</param>
        public static SqlCommand PrepareCommand(SqlConnection conn, SqlTransaction trans, CommandType cmdType, string cmdText, SqlParameter[] cmdParms)
        {
            if (conn.State != ConnectionState.Open)
                conn.Open();

            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = cmdText;

            if (trans != null)
                cmd.Transaction = trans;

            cmd.CommandType = cmdType;

            if (cmdParms != null)
            {
                foreach (SqlParameter parm in cmdParms)
                    cmd.Parameters.Add(parm);
            }

            return cmd;
        }

    }

 

web.config配置文件如下：

 

<configuration>
    <system.web>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />
    </system.web>
  <appSettings>
     <add key="connectionString" value="server=.;database=數據庫名稱;UID=用戶名;PWD=密碼"/>
  </appSettings>
</configuration>

 

以上是實現過程，如果看不懂，沒關系，直接復制一下代碼，修改一下即可運行，

JQueryPage.aspx頁面的整體代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryPage.aspx.cs" Inherits="WebApplication1.JQueryPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!--分頁所需要的css文件-->
    <link href="css/pagination.css" type="text/css" rel="stylesheet" />
    <!--分頁所需要的js文件-->
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.pagination.js" type="text/javascript"></script>
    <style type="text/css">
        body { font-size:14px;}
        a { cursor:pointer;}
        #pageintool { width:800px; margin:auto;}
        .Datastyle { height:25px; margin-top:10px; float:left; margin-left:10px; font-size:14px;}
        .Pagination { margin-top:5px; height:25px; float:left;}
        #toPage { background-image:url('img/inputbg.gif'); background-repeat:repeat-x; width:50px;height:20px; line-height:20px; margin:5px 5px 0px 10px; text-align:center; float:left;}
        #BtntoPage { width:50px; background-color:#4800ff; color:white; height:30px; text-align:center; line-height:25px;}
        #tab { width:800px; margin:auto; text-align:center; border:1px solid #d6d6d6; border-collapse:collapse; border-radius:5px; background-image:url('img/tbg.png'); background-repeat:repeat-x; margin-bottom:5px;}
            #tab tr {
            }
        #tab tr td{height:30px; line-height:30px; border-bottom:1px dashed #d6d6d6;}
        #tab tr th {background-image:url('img/th.gif'); background-repeat:repeat-x; height:30px; line-height:30px;}
        .td1 { width:60px;}
        .td2 {text-align:left;}
        .astyle { color:#000; text-decoration:none;}
    </style>

    <script type="text/ecmascript">
    
        var pageIndex = 0;     //頁索引
        var pageSize = 5;    //每頁顯示的條數

        $(document).ready(function () {


            $("#pageSize").text(pageSize);//每頁顯示條數
            $("#DataSum").text(<%=pageCount%>); //總記錄數    

            Init(0); //初始化頁面為0，即為第一頁   

            $("#toPage").val(1);//初始化頁面，跳轉框默認為1

            $("#Pagination").pagination(<%=pageCount%>, {

                callback: PageCallback,//回調函數
                prev_text: '上一頁',//前一頁顯示的文本文字，字符串參數，可選，默認是"Prev"
                next_text: '下一頁',//下一頁顯示的文本文字， 字符串參數，可選，默認是"Next"
                items_per_page: pageSize,//每頁顯示的條目數,已經設置為5條
                num_display_entries: 5,//連續分頁主體部分顯示的分頁條目數,默認是10     
                current_page: pageIndex,//當前頁
                num_edge_entries: 1//兩側顯示的首尾分頁的條目數
            });

            ///回調函數，當點擊鏈接翻頁的時候此函數被調用，此函數接受兩個參數，新一頁的索引和pagination容器（一個DOM元素）。如果回調函數返回false，則pagination事件停止執行
            function PageCallback(index, jq) {
                $("#toPage").val(index+1);//在點擊分頁按鈕翻頁的時候，輸入框跳轉的值也跟隨變化
                Init(index);
            }

            //輸入框跳轉按鈕
            $("#BtntoPage").click(function(){

                var $topageindex = $("#toPage").val();//獲取輸入框的跳轉值
              
                var $reg_check= /^[-+]?\d+$/;//驗證非數字正則表達式

                if($reg_check.test($topageindex))
                {
                    //計算出總頁數，計算方法為：（總記錄數+每頁顯示數-1)/每頁顯示數
                    var $totalPage = ((parseInt(<%=pageCount%>)+pageSize-1)/pageSize);
                    if(parseInt($topageindex)<1||parseInt($topageindex)>$totalPage)
                    {
                        alert("無效頁碼！！超出頁碼索引值！！！");
                        $("#toPage").select().focus();
                    }else
                    {
                        alert("正在為您跳轉第:"+$topageindex+"頁.......");

                        ///加入這段，主要實現分頁按鈕的改變選中樣式
                        $("#Pagination").pagination(<%=pageCount%>, {
                            callback: PageCallback,//回調函數
                            prev_text: '上一頁',//前一頁顯示的文本文字，字符串參數，可選，默認是"Prev"
                            next_text: '下一頁',//下一頁顯示的文本文字， 字符串參數，可選，默認是"Next"
                            items_per_page: pageSize,//每頁顯示的條目數,已經設置為5條
                            num_display_entries: 5,//連續分頁主體部分顯示的分頁條目數,默認是10     
                            current_page: $topageindex-1,//注意，這里的當前頁碼改為了，文本框輸入的值-1，頁碼是從0開始，所以要減1
                            num_edge_entries: 1//兩側顯示的首尾分頁的條目數
                        });

                        Init($topageindex-1);
                    }
                }else
                {
                    alert("只能輸入數字！！！！");
                    $("#toPage").select().focus();
                }
            })

            
            /// 篩選查詢
            $("#selectednews").change(function(){

                $("#Pagination").pagination(<%=pageCount%>, {
                       callback: PageCallback,//回調函數
                       prev_text: '上一頁',//前一頁顯示的文本文字，字符串參數，可選，默認是"Prev"
                       next_text: '下一頁',//下一頁顯示的文本文字， 字符串參數，可選，默認是"Next"
                       items_per_page: pageSize,//每頁顯示的條目數,已經設置為5條
                       num_display_entries: 5,//連續分頁主體部分顯示的分頁條目數,默認是10     
                       current_page: pageIndex,//當前頁
                       num_edge_entries: 1//兩側顯示的首尾分頁的條目數
                });

                $("#pageSize").text(pageSize);//每頁顯示條數
                $("#DataSum").text(<%=pageCount%>); //總記錄數    

               $("#toPage").val(1);//初始化頁面，跳轉框默認為1

                Init(pageIndex);
            })

        });

        ///提交數據
        function Init(pageIndex) {
            if(parseInt($("#selectednews option:selected").val())>0)
            {
                $.ajax({
                    type: "POST",//提交方式為post
                    dataType: "text",//數據類型
                    url: 'JQueryPage.aspx',//提交到后台處理頁           
                    data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize+"&options="+$("#selectednews option:selected").text(),//最主要的兩個參數，用於獲取數據庫中的指定范圍內的數據                                 
                    success: function (data) {
                        if (data != "") {
                            $("#tab tr:gt(0)").remove();//移除現有的數據行
                            $("#tab").append(data);
                        }
                    }
                })
            }else
            {
                $.ajax({
                    type: "POST",//提交方式為post
                    dataType: "text",//數據類型
                    url: 'JQueryPage.aspx',//提交到后台處理頁           
                    data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,//最主要的兩個參數，用於獲取數據庫中的指定范圍內的數據                                 
                    success: function (data) {
                        if (data != "") {
                            $("#tab tr:gt(0)").remove();//移除現有的數據行
                            $("#tab").append(data);
                        }
                    }
                })
            }
        }

</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="width:800px;height:30px; line-height:30px; margin:10px auto 10px auto;">
            根據類別篩選：
            <select style="width:150px; background-image:url('img/inputbg.gif'); background-repeat:repeat-x;" id="selectednews">
                <option value="0">全部新聞</option>
                <option value="1">行業新聞</option>
                <option value="2">公司動態</option>
            </select>
        </div>
        <table id="tab">
              <tr>
                <th class="td1">編號</th>
                <th class="td2">新聞標題</th>
                 <th>新聞類型</th>
                 <th>瀏覽量</th>
                <th>發布日期</th>
                </tr>
        </table>
        <div id="pageintool">
             <div id="Pagination" class="Pagination" ></div>
             <span class="Datastyle"><label style="color:red;" id="pageSize"></label>條/頁-總共<label style="color:red;" id="DataSum"></label>條</span>
            <input type="text" id="toPage" />
            <input type="button" value="跳轉" id="BtntoPage" />
        </div>

       <div style="width:800px; margin:30px auto auto auto ;">
            <p>增加功能1----總記錄下，輸入指定頁面可進行跳轉。</p>
            <p>增加功能2----篩選指定參數，進行篩選查詢，也可輸入指定頁面可進行跳轉。</p>
            <p>問題總結：篩選查詢出結果后，未能正確更新總記錄數，導致分頁碼顯示不正常。是pagination控件BUG問題？還是編程問？</p>
       </div>
    </div>
    </form>
</body>
</html>

 

JQueryPage.aspx.cs后台代碼：

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Helper;
using System.Data;
using System.Data.SqlClient;
using System.Text;

namespace WebApplication1
{
    public partial class JQueryPage : System.Web.UI.Page
    {
        public int pageCount = 0;//數據庫總記錄數

        public int fenpageCount = 0;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

                pageCount = GetTotalPage();//獲取數據庫總條數

                if (Request["pageIndex"] != null && Request["pageSize"] != null)
                {
                    int pageSize = Convert.ToInt32(Request["pageSize"]) == 0 ? 1 : Convert.ToInt32(Request["pageSize"]);
                    int pageIndex = Convert.ToInt32(Request["pageIndex"]) == 0 ? 1 : Convert.ToInt32(Request["pageIndex"]);

                    if (Request["options"] != null)
                    {
                        string options = Request["options"].ToString();
                        pageCount = GetTotalPageBykey(options);//始終更新不了總記錄數.....
                        Response.Write(GetPageByKey(pageIndex, pageSize, options));
                        Response.End();
                    }
                    else
                    {
                        Response.Write(GetTalentPoolFenPageNumber(pageSize, pageIndex));
                        Response.End();
                    }
                }
            }
        }

        /// <summary>
        /// 根據類型獲取總記錄數
        /// </summary>
        /// <param name="options"></param>
        /// <returns></returns>
        private int GetTotalPageBykey(string options)
        {
            string sql = "select COUNT(*) from IndustryNews where NewsType=  '" + options + "'";
            int sumData = int.Parse(SqlHelper.ExecuteScalar(SqlHelper.ConnectionString, System.Data.CommandType.Text, sql).ToString());
            return sumData;
        }

        /// <summary>
        /// 根據參數篩選出數據
        /// </summary>
        /// <param name="pageIndex"></param>
        /// <param name="pageSize"></param>
        /// <param name="options"></param>
        /// <returns></returns>
        private string GetPageByKey(int pageIndex, int pageSize, string options)
        {
            StringBuilder sb = new StringBuilder();

            string sql = "SELECT TOP " + pageSize + " NewsNo,NewsTitle,NewsType,BrowserCount,PublishDate FROM IndustryNews WHERE NewsType = '" + options + "' AND ( NewsNo NOT IN (SELECT TOP " + pageSize * (pageIndex - 1) + " NewsNo FROM IndustryNews WHERE NewsType='" + options + "' ORDER BY NewsNo DESC)) ORDER BY PublishDate DESC";

            SqlConnection conn = new SqlConnection(SqlHelper.ConnectionString);

            conn.Open();

            SqlCommand cmd = new SqlCommand(sql, conn);

            SqlDataReader dr = cmd.ExecuteReader();

            try
            {
                while (dr.Read())
                {
                    ///如果需要將個別字段轉換，可提前轉換，或增加樣式

                    sb.Append("<tr>");
                    sb.Append("<td class='td1'>" + dr["NewsNo"].ToString() + "</td>");
                    if (int.Parse(dr["BrowserCount"].ToString()) > 100)
                    {
                        sb.Append("<td class='td2'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a>&nbsp;<img src='img/hot.gif' alt=''/></td>");
                    }
                    else
                    {
                        sb.Append("<td style='text-align:left;'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a></td>");
                    }
                    sb.Append("<td>" + dr["NewsType"].ToString() + "</td>");
                    sb.Append("<td>" + dr["BrowserCount"].ToString() + "</td>");
                    sb.Append("<td>" + System.DateTime.Parse(dr["PublishDate"].ToString()).ToShortDateString() + "</td>");
                    sb.Append("</tr>");
                }
            }
            finally
            {
                dr.Close();
                conn.Close();
            }

            return sb.ToString();
        }
        /// <summary>
        /// 根據頁面顯示數，和當前也得索引進行分頁
        /// </summary>
        /// <param name="pageSize">每頁顯示數量</param>
        /// <param name="currPageIndex">當前頁索引</param>
        /// <returns></returns>
        public string GetTalentPoolFenPageNumber(int pageSize, int currPageIndex)
        {
            StringBuilder sb = new StringBuilder();

            string sql = "SELECT TOP " + pageSize + " NewsNo,NewsTitle,NewsType,BrowserCount,PublishDate FROM IndustryNews WHERE NewsNo NOT IN (SELECT TOP " + pageSize * (currPageIndex - 1) + " NewsNo FROM IndustryNews ORDER BY NewsNo DESC) ORDER BY PublishDate DESC";

            SqlConnection conn = new SqlConnection(SqlHelper.ConnectionString);

            conn.Open();

            SqlCommand cmd = new SqlCommand(sql,conn);

            SqlDataReader dr = cmd.ExecuteReader();

            try
            {
                while (dr.Read())
                {
                    ///如果需要將個別字段轉換，可提前轉換，或增加樣式

                    sb.Append("<tr>");
                    sb.Append("<td class='td1'>" + dr["NewsNo"].ToString() + "</td>");                  
                    if (int.Parse(dr["BrowserCount"].ToString()) > 100)
                    {
                        sb.Append("<td class='td2'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a>&nbsp;<img src='img/hot.gif' alt=''/></td>");
                    }
                    else
                    {
                        sb.Append("<td style='text-align:left;'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a></td>");
                    }
                    sb.Append("<td>" + dr["NewsType"].ToString() + "</td>");
                    sb.Append("<td>" + dr["BrowserCount"].ToString() + "</td>");
                    sb.Append("<td>" + System.DateTime.Parse(dr["PublishDate"].ToString()).ToShortDateString() + "</td>");
                    sb.Append("</tr>");
                }
            }
            finally
            {
                dr.Close();
                conn.Close();
            }

            return sb.ToString();
        }

        /// <summary>
        /// 獲取數據庫總條數
        /// </summary>
        /// <returns></returns>
        private int GetTotalPage()
        {
            string sql = "select COUNT(*) from IndustryNews";
            int sumData = int.Parse(SqlHelper.ExecuteScalar(SqlHelper.ConnectionString, System.Data.CommandType.Text, sql).ToString());
            return sumData;
        }


    }
}

 

 

 　　　　<p>增加功能1----總記錄下，輸入指定頁面可進行跳轉。</p>
            <p>增加功能2----篩選指定參數，進行篩選查詢，也可輸入指定頁面可進行跳轉。</p>
            <p>問題總結：篩選查詢出結果后，未能正確更新總記錄數，導致分頁碼顯示不正常。是pagination控件BUG問題？還是編程問題？望知曉的朋友告知！謝謝</p>