zoukankan      html  css  js  c++  java
  • 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="800px;height:30px; line-height:30px; margin:10px auto 10px auto;">
                根据类别筛选:
                <select style="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="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();
                    }
                 })
    
            })
    View Code

    筛选代码如下:

        
                /// 筛选查询
                $("#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);
                })
    View Code

    再来看后台接收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;
            }
    
        }
    View Code

    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 { 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; 50px;height:20px; line-height:20px; margin:5px 5px 0px 10px; text-align:center; float:left;}
            #BtntoPage { 50px; background-color:#4800ff; color:white; height:30px; text-align:center; line-height:25px;}
            #tab { 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 { 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="800px;height:30px; line-height:30px; margin:10px auto 10px auto;">
                根据类别筛选:
                <select style="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="800px; margin:30px auto auto auto ;">
                <p>增加功能1----总记录下,输入指定页面可进行跳转。</p>
                <p>增加功能2----筛选指定参数,进行筛选查询,也可输入指定页面可进行跳转。</p>
                <p>问题总结:筛选查询出结果后,未能正确更新总记录数,导致分页码显示不正常。是pagination控件BUG问题?还是编程问?</p>
           </div>
        </div>
        </form>
    </body>
    </html>
    View Code

    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;
            }
    
    
        }
    }
    View Code

         <p>增加功能1----总记录下,输入指定页面可进行跳转。</p>
                <p>增加功能2----筛选指定参数,进行筛选查询,也可输入指定页面可进行跳转。</p>
                <p>问题总结:筛选查询出结果后,未能正确更新总记录数,导致分页码显示不正常。是pagination控件BUG问题?还是编程问题?望知晓的朋友告知!谢谢</p>

  • 相关阅读:
    Struts2(二)
    jiqixuexi
    UTF-8
    mysql load
    linux命令(转)
    apache FTP站点源码下载
    linux 命令
    clickhouse 查询
    CDH learning
    nfs
  • 原文地址:https://www.cnblogs.com/shaojiang/p/5053515.html
Copyright © 2011-2022 走看看