JQuery无刷新分页
需求：
JQuery无刷新分页DEMO
背景：
后台分页已经做好
原来的JS分页代码出了点儿问题
技术也过于老套
刚好项目里用JQuery
所以想用JQuery来做
保留上次查询条件
做无刷新的分页
最好有代码注释
要求：
速度回复
速度结贴
速度速度，顺便学习一下，呵呵！
[解决办法]
给个邮箱把源码给你发过去
[解决办法]
jquery.pagination.js
/**
* This jQuery plugin displays pagination links inside the selected elements.
*
* @author Gabriel Birke (birke *at* d-scribe *dot* de)
* @version 1.1
* @param {int} maxentries Number of entries to paginate
* @param {Object} opts Several options (see README for documentation)
* @return {Object} jQuery Object
*/
jQuery.fn.pagination = function(maxentries, opts) {
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,
callback: function() { return false; }
}, opts || {});
return this.each(function() {
/**
* Calculate the maximum number of pages
*/
function numPages() {
return Math.ceil(maxentries / opts.items_per_page);
}
/**
* Calculate start and end point of pagination links depending on
* current_page and num_display_entries.
* @return {Array}
*/
function getInterval() {
var ne_half = Math.ceil(opts.num_display_entries / 2);
var np = numPages();
var upper_limit = np - opts.num_display_entries;
var start = current_page > ne_half ? Math.max(Math.min(current_page - ne_half, upper_limit), 0) : 0;
var end = current_page > ne_half ? Math.min(current_page + ne_half, np) : Math.min(opts.num_display_entries, np);
return [start, end];
}
/**
* This is the event handling function for the pagination links.
* @param {int} page_id The new page number
*/
function pageSelected(page_id, evt) {
current_page = page_id;
drawLinks();
var continuePropagation = opts.callback(page_id, panel);
if (!continuePropagation) {
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
return continuePropagation;
}
/**
* This function inserts the pagination links into the container element
*/
function drawLinks() {
panel.empty();
var interval = getInterval();
var np = numPages();
// This helper function returns a handler function that calls pageSelected with the right page_id
var getClickHandler = function(page_id) {
return function(evt) { return pageSelected(page_id, evt); }
}
// Helper function for generating a single link (or a span tag if it'S the current page)
var appendItem = function(page_id, appendopts) {
page_id = page_id < 0 ? 0 : (page_id < np ? page_id : np - 1); // Normalize page id to sane value
appendopts = jQuery.extend({ text: page_id + 1, classes: "current" }, appendopts || {});
if (page_id == current_page) {
var lnk = $("<span class='current'>" + (appendopts.text) + "</span>");
}
else {
var lnk = $("<a>" + (appendopts.text) + "</a>")
.bind("click", getClickHandler(page_id))
.attr('href', opts.link_to.replace(/__id__/, page_id));
}
if (appendopts.classes) { lnk.removeAttr('class'); lnk.addClass(appendopts.classes); }
panel.append(lnk);
}
// Generate "Previous"-Link
if (opts.prev_text && (current_page > 0 || opts.prev_show_always)) {
appendItem(current_page - 1, { text: opts.prev_text, classes: "disabled" });
}
// Generate starting points
if (interval[0] > 0 && opts.num_edge_entries > 0) {
var end = Math.min(opts.num_edge_entries, interval[0]);
for (var i = 0; i < end; i++) {
appendItem(i);
}
if (opts.num_edge_entries < interval[0] && opts.ellipse_text) {
jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel);
}
}
// Generate interval links
for (var i = interval[0]; i < interval[1]; i++) {
appendItem(i);
}
// Generate ending points
if (interval[1] < np && opts.num_edge_entries > 0) {
if (np - opts.num_edge_entries > interval[1] && opts.ellipse_text) {
jQuery("<span>" + opts.ellipse_text + "</span>").appendTo(panel);
}
var begin = Math.max(np - opts.num_edge_entries, interval[1]);
for (var i = begin; i < np; i++) {
appendItem(i);
}
}
// Generate "Next"-Link
if (opts.next_text && (current_page < np - 1 || opts.next_show_always)) {
appendItem(current_page + 1, { text: opts.next_text, classes: "disabled" });
}
}
// Extract current_page from options
var current_page = opts.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;
// Store DOM element for easy access from all inner functions
var panel = jQuery(this);
// Attach control functions to the DOM element
this.selectPage = function(page_id) { pageSelected(page_id); }
this.prevPage = function() {
if (current_page > 0) {
pageSelected(current_page - 1);
return true;
}
else {
return false;
}
}
this.nextPage = function() {
if (current_page < numPages() - 1) {
pageSelected(current_page + 1);
return true;
}
else {
return false;
}
}
// When all initialisation is done, draw the links
drawLinks();
});
}
[解决办法]
我是来学习的……
[解决办法]
页面
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title></title>
<link href="jqueryPager/pagination.css" rel="stylesheet" type="text/css" />
<script src="jqueryPager/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="jqueryPager/jquery.pagination.js" type="text/javascript"></script>
<script type="text/javascript">
var orderby="";
$().ready(function() {
InitData(0);
$("#pageTheme").change(function(){
$("#Pagination").attr('class',$(this).val());
});
});
function pageselectCallback(page_id, jq) {
// alert(page_id);
InitData(page_id);
}
function InitData(pageindx)
{
var tbody = "";
$.ajax({
type: "POST",//用POST方式传输
dataType:"json",//数据格式:JSON
url:'handler.ashx',//目标地址
data:"p="+(pageindx+1)+"&orderby="+orderby,
beforeSend:function(){$("#divload").show();$("#Pagination").hide();},//发送数据之前
complete:function(){$("#divload").hide();$("#Pagination").show()},//接收数据完毕
success:function(json) {
$("#productTable tr:gt(0)").remove();
var productData = json.Products;
$.each(productData, function(i, n) {
var trs = "";
trs += "<tr><td>" + n.orderid + "</td><td>" + n.customerid + "</td><td>" + n.shipname + "</td><td>" + n.shipcity + "</td></tr>";
tbody += trs;
});
$("#productTable").append(tbody);
$("#productTable tr:gt(0):odd").attr("class", "odd");
$("#productTable tr:gt(0):even").attr("class", "enen");
$("#productTable tr:gt(0)").hover(function(){
$(this).addClass('mouseover');
},function(){
$(this).removeClass('mouseover');
});
}});
$("#Pagination").pagination(<%=pagecount %>, {
callback: pageselectCallback,
prev_text: '« Previous',
next_text: 'Next »',
items_per_page:20,
num_display_entries:6,
current_page:pageindx,
num_edge_entries:2
});
}
function Sort(ordercolumn,ordertipid)
{
var ordertype="";//1:desc,0:asc
var $orderimg = $("#"+ordertipid);
if($orderimg.html()!="")
{
var imgsrc = $("img",$orderimg).attr("src");
if(imgsrc.indexOf("asc")>-1){
$(".ordertip").empty();
$orderimg.html(" <img src=\"images/sort_desc.gif\" align=\"absmiddle\">");
ordertype = 1;
}
else
{ $(".ordertip").empty();
$orderimg.html(" <img src=\"images/sort_asc.gif\" align=\"absmiddle\">");
ordertype = 0;
}
}
else
{
$(".ordertip").empty();
$orderimg.html(" <img src=\"images/sort_desc.gif\" align=\"absmiddle\">");
ordertype = 1;
}
orderby = ordercolumn+"_"+ordertype;
InitData(0);
}
</script>
<style type="text/css">
table{ width:600px; background-color:#ffffff}
table th{ height:24px; background-color:#037E12; color:White;}
.odd{ background-color:#5FD66C}
.enen{ background-color:#BCF5C4}
.mouseover{ background-color:orange;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="divload" style="top:50%; right:50%;position:absolute; padding:0px; margin:0px; z-index:999">
<img src="images/spinner3-greenie.gif" /></div>
<div>
<table cellpadding=5 cellspacing=1 width=620 id="productTable" align=center>
<tr>
<th style="width:100px"><a style="cursor:pointer;" onclick="Sort('orderid','productid');return false;">orderid</a><span id="productid" class="ordertip"></span></th>
<th style="width:200px"><a style="cursor:pointer;" onclick="Sort('customerid','ProductName');return false;">customerid</a><span id="ProductName" class="ordertip"></span></th>
<th style="width:200px"><a style="cursor:pointer;" onclick="Sort('shipname','UnitPrice');return false;">shipname</a><span id="UnitPrice" class="ordertip"></span></th>
<th style="width:120px"><a style="cursor:pointer;" onclick="Sort('shipcity','Discontinued');return false;">shipcity</a><span id="Discontinued" class="ordertip"></span></th>
</tr>
</table>
</div>
<div id="Pagination" class="digg" ></div>
<div style=" text-align:center;">分页样式:
<select id="pageTheme">
<option value="digg">digg</option>
<option value="meneame">meneame</option>
<option value="flickr">flickr</option>
<option value="sabrosus">sabrosus</option>
<option value="scott">scott</option>
<option value="black">black</option>
<option value="black2">black2</option>
<option value="black-red">black-red</option>
<option value="grayr">grayr</option>
<option value="yellow">yellow</option>
<option value="jogger">jogger</option>
<option value="starcraft2">starcraft2</option>
<option value="tres">tres</option>
<option value="megas512">megas512</option>
<option value="technorati">technorati</option>
<option value="youtube">youtube</option>
<option value="msdn">msdn</option>
<option value="badoo">badoo</option>
<option value="manu">manu</option>
<option value="viciao">viciao</option>
<option value="green-black">green-black</option>
<option value="yahoo2">yahoo2</option>
</select>
</div>
</form>
</body>
</html>
[解决办法]
$("#pages").pagefoot({
pagesize:returnValue[1][0].countall,//每页显示的页码数
count:returnValue[1][0].count,//数据记录数目
current:returnValue[1][0].current,//当前页码
displaynum:5,//中间显示页码数
displaylastNum:3,//最后显示的页码数
css:"mj_pagefoot",
previous:"上一页",
next:"下一页",
paging:function(page){
ajaxFun(param+"¤trow=" + page);
}
});
ajaxFun()是数据显示
[解决办法]
推荐jquery 的表格控件--jqgrid!
你可以去看看他的demo,很不错的，如果有什么问题可以给我留言帮你解决。
[解决办法]
mark下....有机会学习下.........
[解决办法]
挺好的，值得学习
[解决办法]
围观学习中
[解决办法]
值得学习。。。。。。。。。。。。。。。
[解决办法]
学习==========
[解决办法]
http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html
[解决办法]
MARK
拜托哪位也给我发一份，ytdcr@tom.com
谢谢
[解决办法]
不会，我也来看看
[解决办法]
挺好的，值得学习
[解决办法]
好东西
