(1)准备插件 JQuery.pagination.js/JQuery.pagination.css (2)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 回调函数 默认无执行效果
(3)案例： 结合C#取数据库中的新闻信息： HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryPage.aspx.cs" Inherits="ERP_JQPagination" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>title> <link href="../Jquery/pagination.css" type="text/css" rel="stylesheet" /> <script src="../Jquery/jquery-1.6.2.min.js" type="text/javascript">script> <script src="../Jquery/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('../Images/bg.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('../Images/bg.gif'); 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('../Images/bg.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('../Images/bg.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>
CS:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using SqlServerDAL; using System.Text; using System.Data; using System.Data.SqlClient; public partial class ERP_JQPagination : 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();
}
}
}
} /// /// 根据类型获取总记录数 /// /// /// private int GetTotalPageBykey(string options)
{ string sql = "select COUNT(*) from IndustryNews where NewsType= '" + options + "'"; int sumData = int.Parse(SqlHelper.ExecuteScalar(SqlHelper.conn, System.Data.CommandType.Text, sql).ToString()); return sumData;
} /// /// 根据参数筛选出数据 /// /// /// /// /// 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.conn);
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader dr = cmd.ExecuteReader(); try { while (dr.Read())
{ ///如果需要将个别字段转换，可提前转换，或增加样式 sb.Append("");
sb.Append("" + dr["NewsNo"].ToString() + ""); if (int.Parse(dr["BrowserCount"].ToString()) > 100)
{
sb.Append("" + dr["NewsTitle"].ToString() + " 
");
} else {
sb.Append("" + dr["NewsTitle"].ToString() + "");
}
sb.Append("" + dr["NewsType"].ToString() + "");
sb.Append("" + dr["BrowserCount"].ToString() + "");
sb.Append("" + System.DateTime.Parse(dr["PublishDate"].ToString()).ToShortDateString() + "");
sb.Append("");
}
} finally {
dr.Close();
conn.Close();
} return sb.ToString();
} /// /// 根据页面显示数，和当前也得索引进行分页 /// /// 每页显示数量 /// 当前页索引 /// 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.conn);
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader dr = cmd.ExecuteReader(); try { while (dr.Read())
{ ///如果需要将个别字段转换，可提前转换，或增加样式 sb.Append("");
sb.Append("" + dr["NewsNo"].ToString() + ""); if (int.Parse(dr["BrowserCount"].ToString()) > 100)
{
sb.Append("" + dr["NewsTitle"].ToString() + " ");
} else {
sb.Append("" + dr["NewsTitle"].ToString() + "");
}
sb.Append("" + dr["NewsType"].ToString() + "");
sb.Append("" + dr["BrowserCount"].ToString() + "");
sb.Append("" + System.DateTime.Parse(dr["PublishDate"].ToString()).ToShortDateString() + "");
sb.Append("");
}
} finally {
dr.Close();
conn.Close();
} return sb.ToString();
} /// /// 获取数据库总条数 /// /// private int GetTotalPage()
{ string sql = "select COUNT(*) from IndustryNews"; int sumData = int.Parse(SqlHelper.ExecuteScalar(SqlHelper.conn, System.Data.CommandType.Text, sql).ToString()); return sumData;
}
}
