這不是一般常搜尋到的jquery pager，js貼在最後。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>網頁標題</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.5");
google.load("jqueryui", "1.5.2");
</script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.pager.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var pages_click;//用來傳遞
$("#per").change(function(){
ejajax();
})
$("input.os").blur(function(){
$("#dis_st").val(0);
$("#loading").stop();
//加入緩幾秒
ejajax();
})
PageClick = function(pageclickednumber) {
$("div.pager").pager({ pagenumber: pageclickednumber, pagecount: 15,
buttonClickCallback: PageClick});
pages_click = pageclickednumber;
ejajax("pages");
}
$("#sub").click(function(){
$("tr").remove(".db_list");
$("tr").remove(".s_list");
$("#dis_st").val(0);
ejajax();
})
$("input.2page").click(function(){
$("tr").remove(".db_list");
$("tr").remove(".s_list");
ejajax("to");
})
$("tr.s_list").hover(function(){
$("tr").remove(".db_list");
$("tr").remove(".s_list");
ejajax("to");
})
function ejajax(type){
$("tr").remove(".db_list");
$("tr").remove(".s_list");
var sSearch = $("#sSearch").val();
var sSearch_1 = $("#sSearch_1").val();
var sSearch_2 = $("#sSearch_2").val();
var sSearch_3 = $("#sSearch_3").val();
var sSearch_4 = $("#sSearch_4").val();
var sSearch_5 = $("#sSearch_5").val();
switch(type){
default:
var dis_st = (parseInt($("#dis_st").val())<=0)?0:parseInt($("#dis_st").val());
var data = {
"sSearch": sSearch,
"sSearch_1" : sSearch_1,
"sSearch_2" : sSearch_2,
"sSearch_3" : sSearch_3,
"sSearch_4" : sSearch_4,
"sSearch_5" : sSearch_5,
"dis_st" : $("#dis_st").val(),
"dis_len" : $("#per").val()
}
break;
case "to":
var a1 = $("#per").val();
var a2 = ($("input.goto").val()>parseInt($("a.total_page").text()))?parseInt($("a.total_page").text()):$("input.goto").val();
var dis_st = a1*a2-a1;
$("#dis_st").val(dis_st);
var data = {
"sSearch": sSearch,
"sSearch_1" : sSearch_1,
"sSearch_2" : sSearch_2,
"sSearch_3" : sSearch_3,
"sSearch_4" : sSearch_4,
"sSearch_5" : sSearch_5,
"dis_st" : dis_st,
"dis_len" : $("#per").val()
}
break;
case "pages":
$("#dis_st").val(dis_st);
var a1 = $("#per").val();
var a2 = (pages_click>parseInt($("a.total_page").text()))?parseInt($("a.total_page").text()):pages_click;
var dis_st = a1*a2-a1;
var data = {
"sSearch": sSearch,
"sSearch_1" : sSearch_1,
"sSearch_2" : sSearch_2,
"sSearch_3" : sSearch_3,
"sSearch_4" : sSearch_4,
"sSearch_5" : sSearch_5,
"dis_st" : dis_st,
"dis_len" : $("#per").val()
}
break;
};
$("#loading").fadeIn("slow");
$.ajax({
url: "ejquery-.php",
data:data,
type: "POST",
dataType: "json",
success: function(Ddata) {
var i = 0;
var total = Ddata["iTotalRecords"];
var total = Ddata["iTotalDisplayRecords"];
var aaData = Ddata["aaData"];
if (aaData != "") {
$.each(aaData, function() {
$("#show").append("<tr class=\"s_list\">" +
"<td class='num'>" + (i+1) + /*"-" + aaData[i][0] + */"</td>" +
"<td class='pt'> <a target=\"_blank\" href=\"" + aaData[i][4] + "\">" + aaData[i][1] + "</a></td>" +
"<td class='issn'>" + aaData[i][2] + "</td>" +
"<td class='eissn'>" + aaData[i][3] + "</td>" +
"<td class='range'>" + aaData[i][5] + "</td>" +
"</tr>");
i++;
});
}else{
var nodata = "No Articles Found";
$("#show").append("<tr class=\"s_list nodata\" align=\"center\">" +
"<td colspan=\"5\">" + nodata +"</td></tr>");
}
$("#dis_st").val(dis_st);
$("a.total").text(total);
var p = Math.ceil(total / $("#per").val());
var per = parseInt($("#per").val());
var st = parseInt($("#dis_st").val());
var page = Math.ceil(st / per)+1;
$("div.pager").pager({ pagenumber: page, pagecount: p, buttonClickCallback: PageClick });
$("a.total").text(total);
$("a.page").text(page);
$("a.total_page").text(p);
},
Error: function() {
alert("ERROR!!!");
}
});
$("#loading").ajaxStart(function(){
$(this).fadeIn("slow");}
).ajaxStop(function(){
$(this).fadeOut("slow");
});
$("div.status").fadeIn("slow");
}//end function
})
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div.pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick });
});
PageClick = function(pageclickednumber) {
$("div.pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick
});
}
</script>
<body>
<div id="wrap">
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="bar">
<div id="search_bar">
<input id="sSearch" name="sSearch" size="30" type="text" value="" />
<input id="sub" type="submit" name="Submit" value="送出" />
</div>
<div class="pager"></div>
<div class="status">
Page <a class="page"></a> of <a class="total_page"></a> | <a class="total"></a> Records.
GO to Page<input class="goto" name="goto" size="4" type="text" value="" /> <input class="2page" type="submit" name="2page" value="GO" />
<input name="post" size="10" type="hidden" value="" /></div>
</div>
<div id="content">
<div id="loading" style="display:none" ><img src="images/ajax-loader.gif" />Loading....</div>
<select name="select" id="per">
<option value="10">顯示10筆</option>
<option value="30">顯示30筆</option>
<option value="50">顯示50筆</option>
<option value="100">顯示100筆</option>
</select>
<br />
<table cellspacing="0" cellpadding="0" id="show">
<tr bgcolor="#FFE9C8" height="24">
<th></th>
<th style="text-align:left;"><input name="sSearch_1" type="text" class="os" id="sSearch_1" size="60"/> </th>
<th><input name="sSearch_2" type="text" class="os" id="sSearch_2" size="10"/> </th>
<th><input name="sSearch_3" type="text" class="os" id="sSearch_3" size="10"/> </th>
<th><input name="sSearch_5" type="text" id="sSearch_5" class="os"/></th></tr>
<tr bgcolor="#FFE9C8" height="24" class="title">
<th width="3%"> </th>
<th width="67%" style="text-align:left;">資料抬頭
<th width="10%">資料抬頭</th>
<th width="10%">資料抬頭</th>
<th width="10%">資料抬頭</th>
</tr>
</table>
<input name="tt_str" size="10" type="hidden" value="" />
<input name="dis_st" id="dis_st" size="10" type="hidden" value="0" />
<input name="key" size="10" type="hidden" value="" />
<div class="pager" ></div>
<div class="status">
Page <a class="page"></a> of <a class="total_page"></a> | <a class="total"></a> Records.
GO to Page<input class="goto" name="goto" size="4" type="text" value="" /> <input class="2page" type="submit" name="2page" value="GO" />
<input name="post" size="10" type="hidden" value="" /></div>
</div>
</div>
<div id="footer">
COPYRIGHT 2011
</div>
</div>
</div>
</body>
</html>
/*----------------下面jquery pager code-------------------*/
/*
* jQuery pager plugin
* Version 1.0 (12/22/2008)
* @requires jQuery v1.2.6 or later
*
* Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html
*
* Copyright (c) 2008-2009 Jon Paul Davies
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Read the related blog post and contact the author at http://www.j-dee.com/2008/12/22/jquery-pager-plugin/
*
* This version is far from perfect and doesn't manage it's own state, therefore contributions are more than welcome!
*
* Usage: .pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PagerClickTest });
*
* Where pagenumber is the visible page number
* pagecount is the total number of pages to display
* buttonClickCallback is the method to fire when a pager button is clicked.
*
* buttonClickCallback signiture is PagerClickTest = function(pageclickednumber)
* Where pageclickednumber is the number of the page clicked in the control.
*
* The included Pager.CSS file is a dependancy but can obviously tweaked to your wishes
* Tested in IE6 IE7 Firefox & Safari. Any browser strangeness, please report.
*/
(function($) {
$.fn.pager = function(options) {
var opts = $.extend({}, $.fn.pager.defaults, options);
return this.each(function() {
// empty out the destination element and then render out the pager with the supplied options
$(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));
// specify correct cursor activity
$('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
});
};
// render and return the pager with the supplied options
function renderpager(pagenumber, pagecount, buttonClickCallback) {
// setup $pager to hold render
var $pager = $('<ul class="pages"></ul>');
// add in the previous and next buttons
$pager.append(renderButton('first', pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', pagenumber, pagecount, buttonClickCallback));
// pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases
var startPoint = 1;
var endPoint = 9;
if (pagenumber > 4) {
startPoint = pagenumber - 4;
endPoint = pagenumber + 4;
}
if (endPoint > pagecount) {
startPoint = pagecount - 8;
endPoint = pagecount;
}
if (startPoint < 1) {
startPoint = 1;
}
// loop thru visible pages and render buttons
for (var page = startPoint; page <= endPoint; page++) {
var currentButton = $('<li class="page-number">' + (page) + '</li>');
page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); });
currentButton.appendTo($pager);
}
// render in the next and last buttons before returning the whole rendered control back.
$pager.append(renderButton('next', pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', pagenumber, pagecount, buttonClickCallback));
return $pager;
}
// renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button
function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');
var destPage = 1;
// work out destination page for required button type
switch (buttonLabel) {
case "first":
destPage = 1;
break;
case "prev":
destPage = pagenumber - 1;
break;
case "next":
destPage = pagenumber + 1;
break;
case "last":
destPage = pagecount;
break;
}
// disable and 'grey' out buttons if not needed.
if (buttonLabel == "first" || buttonLabel == "prev") {
pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
}
else {
pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
}
return $Button;
}
// pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version
$.fn.pager.defaults = {
pagenumber: 1,
pagecount: 1
};
})(jQuery);
