100分求jquery.pagination实例或解决当前分页问题
项目使用jquery.pagination,遇到了一些问题,求高人解决。
发个类似的实例也行。不甚感激。
分页陷入了死循环
上代码 或直接下载代码:http://www.diyzu.com/page.rar (带所有文件)
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>无标题页</title> <script language="JavaScript" src="jquery_last.js" type="text/javascript"></script> <script language="JavaScript" src="jquery.pagination.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() { InitData(0); }); //这个事件是在翻页时候用的 function pageselectCallback(page_id) { InitData(page_id); } function InitData(pageIndex) { var tbody = ""; var totalNum; $.ajax({ type: "POST", dataType: "xml", url: 'Handler.ashx', data: "pageIndex=" + (pageIndex + 1) + "", success: function(xml) { $("div").remove(".userBox"); $(xml).find("Page").each(function() { totalNum = $(this).attr("RecCount"); }); $(xml).find("item").each(function() { num_entries = $(xml).find("item").size(); var userID = $(this).attr("ID"); var userName = $(this).attr("UserName"); var address = $(this).attr("Address"); var sex = $(this).attr("Sex"); var phone = $(this).attr("Phone"); var email = $(this).attr("Email"); var html = "<div class=\"userBox\" style=\"width:650px; height:30px;\"><ul style=\"margin:0;padding:0;list-style:none;\">"; html +="<li style=\"width:100px;float:left; \">"+userID+"</li>"; html +="<li style=\"width:100px;float:left; \">"+userName+"</li>"; html +="<li style=\"width:100px;float:left; \">"+sex+"</li>"; html +="<li style=\"width:100px;float:left; \">"+phone+"</li>"; html +="<li style=\"width:100px;float:left; \">"+email+"</li>"; html +="<li style=\"width:100px;float:left; \">"+address+"</li></ul>"; html +="</div><div style=\"clear: both;\"></div>"; tbody += html; }); $("#userlist").append(tbody); initPagination(totalNum,pageIndex); } }); } function initPagination(TotalNum,pageIndex) { $("#Pagination").pagination(TotalNum, { prev_text: "上页", next_text: "下页", num_edge_entries: 2, num_display_entries: 10, items_per_page: pageIndex, callback: pageselectCallback }); } </script></head><body><div id="userlist"></div><div id="Pagination"></div></body></html>Handler.ashx
<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;using System.Data;using System.Text;public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { int pageIndex = Convert.ToInt32(GetPostString("pageIndex")); InitData(pageIndex); } private void InitData(int pageIndex) { int pageSize = 10; int recordCount = CreateData().Rows.Count; int pageCount = 0; if ((recordCount % pageSize) == 0) { pageCount = (recordCount / pageSize); } else { pageCount = (recordCount / pageSize) + 1; } DataTable dtUser = SplitDataTable(CreateData(), pageIndex, pageSize); HttpContext.Current.Response.ContentType = "text/xml"; HttpContext.Current.Response.Write("<Response>"); HttpContext.Current.Response.Write("<RS>"); HttpContext.Current.Response.Write("<Page CurrentPage=\"" + pageIndex.ToString() + "\" PageSize=\"" + pageSize.ToString() + "\" PageCount= \"" + pageCount.ToString() + "\" RecCount=\"" + recordCount.ToString() + "\"/>"); if (dtUser != null) { StringBuilder strItemList = new StringBuilder(""); foreach (DataRow drUser in dtUser.Rows) { strItemList.Append("<item ID=\"" + drUser["ID"].ToString() + "\" "); strItemList.Append("UserName=\"" + drUser["UserName"].ToString() + "\" "); strItemList.Append("Sex=\"" + drUser["Sex"].ToString() + "\" "); strItemList.Append("Email=\"" + drUser["Email"].ToString() + "\" "); strItemList.Append("Phone=\"" + drUser["Phone"].ToString() + "\" "); strItemList.Append("Address=\"" + drUser["Address"].ToString() + "\" >"); strItemList.Append("</item>"); } HttpContext.Current.Response.Write(strItemList.ToString()); } HttpContext.Current.Response.Write("</RS>"); HttpContext.Current.Response.Write("</Response>"); } private DataTable CreateData() { DataTable dt = new DataTable(); dt.Columns.Add(new DataColumn("ID", typeof(int))); dt.Columns.Add(new DataColumn("UserName", typeof(string))); dt.Columns.Add(new DataColumn("Sex", typeof(string))); dt.Columns.Add(new DataColumn("Email", typeof(string))); dt.Columns.Add(new DataColumn("Phone", typeof(string))); dt.Columns.Add(new DataColumn("Address", typeof(string))); for (int i = 0; i <= 100; i++) { DataRow dr = dt.NewRow(); dr["ID"] = i; dr["UserName"] = "MM" + i + "号"; dr["Sex"] = "女"; dr["Email"] = "MM" + i + "@qq.com"; dr["Phone"] = "1234567" + i; dr["Address"] = "长沙" + i + "号"; dt.Rows.Add(dr); } return dt; } /// <summary> /// 根据索引和pagesize返回记录 /// </summary> /// <param name="dt">记录集 DataTable</param> /// <param name="PageIndex">当前页</param> /// <param name="pagesize">一页的记录数</param> /// <returns></returns> public static DataTable SplitDataTable(DataTable dt, int PageIndex, int PageSize) { if (PageIndex == 0) return dt; DataTable newdt = dt.Clone(); //newdt.Clear(); int rowbegin = (PageIndex - 1) * PageSize; int rowend = PageIndex * PageSize; if (rowbegin >= dt.Rows.Count) return newdt; if (rowend > dt.Rows.Count) rowend = dt.Rows.Count; for (int i = rowbegin; i <= rowend - 1; i++) { DataRow newdr = newdt.NewRow(); DataRow dr = dt.Rows[i]; foreach (DataColumn column in dt.Columns) { newdr[column.ColumnName] = dr[column.ColumnName]; } newdt.Rows.Add(newdr); } return newdt; } /// <summary> /// 获取post string参数 /// </summary> /// <param name="key"></param> /// <returns></returns> private string GetPostString(string key) { string returnValue; try { returnValue = HttpContext.Current.Request[key]; returnValue = HttpUtility.UrlDecode(returnValue, System.Text.Encoding.UTF8); } catch (Exception e) { throw (e); } return string.IsNullOrEmpty(returnValue) ? null : returnValue; } public bool IsReusable { get { return false; } }}
$("#userlist").append(tbody); // initPagination(totalNum,pageIndex);
[解决办法]
http://blog.csdn.net/porschev/archive/2011/01/04/6114997.aspx
[解决办法]
http://blog.csdn.net/porschev/archive/2011/01/04/6114997.aspx
[解决办法]
我也遇到同样的问题。
7楼的是正解。
将 pagination.js 里的方法(这是pagination的构造方法,在最后一行代码会调用一下callback方法所以要注释掉它):
// Extend jQuery
$.fn.pagination = function(maxentries, opts){
// Initialize options with default values
opts = jQuery.extend({
items_per_page:10,
num_display_entries:10,
current_page:0,
num_edge_entries:0,
link_to:"#",
prev_text:"Prev",
next_text:"Next",
ellipse_text:"...",
prev_show_always:true,
next_show_always:true,
renderer:"defaultRenderer",
callback:function(){return false;}
},opts||{});
var containers = this,
renderer, links, current_page;
/**
* This is the event handling function for the pagination links.
* @param {int} page_id The new page number
*/
function pageSelected(evt){
var links, current_page = $(evt.target).data('page_id');
containers.data('current_page', current_page);
links = renderer.getLinks(current_page, pageSelected);
containers.empty();
links.appendTo(containers);
var continuePropagation = opts.callback(current_page, containers);
if (!continuePropagation) {
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
return continuePropagation;
}
current_page = opts.current_page;
containers.data('current_page', current_page);
// Create a sane value for maxentries and items_per_page
maxentries = (!maxentries || maxentries < 0)?1:maxentries;
opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
if(!$.PaginationRenderers[opts.renderer])
{
throw new ReferenceError("Pagination renderer '" + opts.renderer + "' was not found in jQuery.PaginationRenderers object.");
}
renderer = new $.PaginationRenderers[opts.renderer](maxentries, opts);
containers.each(function() {
// Attach control functions to the DOM element
this.selectPage = function(page_id){ pageSelected(page_id);}
this.prevPage = function(){
var current_page = containers.data('current_page');
if (current_page > 0) {
pageSelected(current_page - 1);
return true;
}
else {
return false;
}
}
this.nextPage = function(){
var current_page = containers.data('current_page');
if(current_page < numPages()-1) {
pageSelected(current_page+1);
return true;
}
else {
return false;
}
}
});
// When all initialisation is done, draw the links
links = renderer.getLinks(current_page, pageSelected);
containers.empty();
links.appendTo(containers);
// call callback function, comment the following code to avoid calling the callback method when initialize the pagination//opts.callback(current_page, containers);
}
[解决办法]
顶 顶 顶
[解决办法]
为什么不用分页控件呢???