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> <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> <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> <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> <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>