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: ,//连续分页主体部分显示的分页条目数,默认是10
current_page: pageIndex,//当前页
num_edge_entries: //两侧显示的首尾分页的条目数
});
以上这段代码会让分页按钮显示出来,
///回调函数,当点击链接翻页的时候此函数被调用,此函数接受两个参数,新一页的索引和pagination容器(一个DOM元素)。如果回调函数返回false,则pagination事件停止执行
function PageCallback(index, jq) {
$("#toPage").val(index+);//在点击分页按钮翻页的时候,输入框跳转的值也跟随变化
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-)/pageSize);
if(parseInt($topageindex)<||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: ,//连续分页主体部分显示的分页条目数,默认是10
current_page: $topageindex-,//注意,这里的当前页码改为了,文本框输入的值-1,页码是从0开始,所以要减1
num_edge_entries: //两侧显示的首尾分页的条目数
}); Init($topageindex-);
}
}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: ,//连续分页主体部分显示的分页条目数,默认是10
current_page: pageIndex,//当前页
num_edge_entries: //两侧显示的首尾分页的条目数
}); $("#pageSize").text(pageSize);//每页显示条数
$("#DataSum").text(<%=pageCount%>); //总记录数 $("#toPage").val();//初始化页面,跳转框默认为1 Init(pageIndex);
})
再来看后台接收PageIndex和pageSize这两个参数是如何处理的。。。。
public partial class JQueryPage : System.Web.UI.Page
{
public int pageCount = ;//数据库总记录数 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 - ) + " 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()) > )
{
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:#; text-decoration:none;}
</style> <script type="text/ecmascript"> var pageIndex = ; //页索引
var pageSize = ; //每页显示的条数 $(document).ready(function () { $("#pageSize").text(pageSize);//每页显示条数
$("#DataSum").text(<%=pageCount%>); //总记录数 Init(); //初始化页面为0,即为第一页 $("#toPage").val();//初始化页面,跳转框默认为1 $("#Pagination").pagination(<%=pageCount%>, { callback: PageCallback,//回调函数
prev_text: '上一页',//前一页显示的文本文字,字符串参数,可选,默认是"Prev"
next_text: '下一页',//下一页显示的文本文字, 字符串参数,可选,默认是"Next"
items_per_page: pageSize,//每页显示的条目数,已经设置为5条
num_display_entries: ,//连续分页主体部分显示的分页条目数,默认是10
current_page: pageIndex,//当前页
num_edge_entries: //两侧显示的首尾分页的条目数
}); ///回调函数,当点击链接翻页的时候此函数被调用,此函数接受两个参数,新一页的索引和pagination容器(一个DOM元素)。如果回调函数返回false,则pagination事件停止执行
function PageCallback(index, jq) {
$("#toPage").val(index+);//在点击分页按钮翻页的时候,输入框跳转的值也跟随变化
Init(index);
} //输入框跳转按钮
$("#BtntoPage").click(function(){ var $topageindex = $("#toPage").val();//获取输入框的跳转值 var $reg_check= /^[-+]?\d+$/;//验证非数字正则表达式 if($reg_check.test($topageindex))
{
//计算出总页数,计算方法为:(总记录数+每页显示数-1)/每页显示数
var $totalPage = ((parseInt(<%=pageCount%>)+pageSize-)/pageSize);
if(parseInt($topageindex)<||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: ,//连续分页主体部分显示的分页条目数,默认是10
current_page: $topageindex-,//注意,这里的当前页码改为了,文本框输入的值-1,页码是从0开始,所以要减1
num_edge_entries: //两侧显示的首尾分页的条目数
}); Init($topageindex-);
}
}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: ,//连续分页主体部分显示的分页条目数,默认是10
current_page: pageIndex,//当前页
num_edge_entries: //两侧显示的首尾分页的条目数
}); $("#pageSize").text(pageSize);//每页显示条数
$("#DataSum").text(<%=pageCount%>); //总记录数 $("#toPage").val();//初始化页面,跳转框默认为1 Init(pageIndex);
}) }); ///提交数据
function Init(pageIndex) {
if(parseInt($("#selectednews option:selected").val())>)
{
$.ajax({
type: "POST",//提交方式为post
dataType: "text",//数据类型
url: 'JQueryPage.aspx',//提交到后台处理页
data: "pageIndex=" + (pageIndex + ) + "&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 + ) + "&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="">全部新闻</option>
<option value="">行业新闻</option>
<option value="">公司动态</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 = ;//数据库总记录数 public int fenpageCount = ; 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"]) == ? : Convert.ToInt32(Request["pageSize"]);
int pageIndex = Convert.ToInt32(Request["pageIndex"]) == ? : 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 - ) + " 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()) > )
{
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 - ) + " 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()) > )
{
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>
asp.net中应用JQuery.pagination分页的更多相关文章
- jQuery Pagination分页插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery Pagination分页插件--刷新
源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...
- 在 ASP.NET 中使用 jQuery.load() 方法
今天就让我们看看在 ASP.NET 中使用 jQuery.load() 方法来调用 ASP.NET 的方法,实现无刷新的加载数据. 使用 jQuery 的朋友应该知道可以使用 jQuery.load( ...
- Asp.Net中的三种分页方式
Asp.Net中的三种分页方式 通常分页有3种方法,分别是asp.net自带的数据显示空间如GridView等自带的分页,第三方分页控件如aspnetpager,存储过程分页等. 第一种:使用Grid ...
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
- Jquery Pagination分页插件使用
JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了. 准备工作 下载jquery.min.js ...
- jQuery Pagination分页插件--无刷新
源码:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx 代 ...
- jQuery Pagination分页插件的使用
一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel=&qu ...
- 在asp.net中使JQuery的Ajax用总结
自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些让人短时间内痛苦的问题.本文暂时总结一些在使用JQuery Ajax中应该注意的问题,如有不恰当或者不完善的地方 ...
随机推荐
- Thinkphp 表单验证
在服务器端通过tp框架实现表单验证 用户名.密码.重复密码.邮箱.qq.手机号码.爱好.学历 具体步骤: 制作表单 表单form数据通过create()方法收集(验证功能要求我们必须通过create( ...
- linux修改环境变量
/etc/profile 系统全局环境变量设定,所有用户共享,修改后,需要重启系统才能生效 ~/.bash_profile,~/.bashrc 用户目录下的私有环境变量设定,常用来个性化定制功能,修改 ...
- Python第三方库(模块)"scikit learn"以及其他库的安装
scikit-learn是一个用于机器学习的 Python 模块. 其主页:http://scikit-learn.org/stable/. GitHub地址: https://github.com/ ...
- 反射-b
Class pkClass=NSClassFromString(@"PKAddPassesViewController"); if (pkClass) { NS ...
- 构建高可用web站点(五)
数据库是web站点中重要的应用,放在第四篇是因为之前来不及总结的原因,在之前的文章我看到了无论是Mysql或者是nosql的一些缓存和分布式一些比较扩展性的功能.但是对于单个数据库来说,它的优化也是我 ...
- Qt 窗体布局 good
布局相关对象及简介 窗体上的所有的控件必须有一个合适的尺寸和位置.Qt提供了一些类负责排列窗体上的控件,主要有:QHBoxLayout,QVBoxLayout,QGridLayout,QStackLa ...
- 为什么 O2O 领域融资额特别高?
在36氪搜索“o2o”,融资额基本都是数千万乃至数亿,为什么这个领域的创业项目融资额如此之高?融到的钱一般用在什么地方? --------------------------------------- ...
- 【性能测试】【Jmeter】学习(1)
2013/8/6开始阅读Jmeter文档 2013/8/7总结 监听器——CSV Data Set Config 在Jmeter中添加一个CSV配置原件 CSV配置原件添加方法:(右键点击某一个操作步 ...
- oracle连接进程数设置
SQL> select count(*) from v$session #连接数SQL> Select count(*) from v$session where status='ACTI ...
- 使用 Docker 容器应该避免的 10 个事情
当你最后投入容器的怀抱,发现它能解决很多问题,而且还具有众多的优点: 第一:它是不可变的 – 操作系统,库版本,配置,文件夹和应用都是一样的.您可以使用通过相同QA测试的镜像,使产品具有相同的表现. ...