果学网-专注IT在线www.prismcollege.com
原文：http://zccst.iteye.com/blog/1415848，http://blog.csdn.net/luoyeyu1989/article/details/7000865
1，下载3个文件
分别为：jquery-1.7.1.js、jquery.pagination.js、pagination.css
2，准备好服务器端返回结果
主要代码如下：
Php代码 
- $members = array(array().......); //详见附件
- $total = count($members);
- $pageIndex = $_POST[‘pageIndex‘];
- $items_per_page = $_POST[‘items_per_page‘];
- $result = array();
- $start = $pageIndex * $items_per_page;
- $end = ($pageIndex+1) * $items_per_page;
- if($end > $total){$end = $total;}
- for($i = $start; $i < $end; $i++){
- $result[] = $members[$i];
- }
- print json_encode(array(‘total‘=>$total,‘result‘=>$result));
3，前端js代码（核心）
Js代码
- var items_per_page = 3;
- var page_index = 0;
- function getDataList(index){
- var pageIndex = index;
- $.ajax({
- type: "POST",
- url: "members.php",
- data: "pageIndex="+pageIndex+‘&items_per_page=‘+items_per_page,
- dataType: ‘json‘,
- contentType: "application/x-www-form-urlencoded",
- success: function(msg){
- var total = msg.total;
- var html = ‘<table><tr><th>姓名</th><th>工作时间</th><th>籍贯</th><th>职务</th><th>生卒年</th><th>操作</th></tr>‘;
- $.each(msg.result,function(i,n){
- html += ‘<tr><td>‘+n[0]+‘</td><td>‘+n[1]+‘</td><td>‘+n[2]+‘</td><td>‘+n[3]+‘</td><td>‘+n[4]+‘</td>‘
- html += ‘<td><a href=#>删除</a></td></tr>‘;
- });
- html += ‘</table>‘;
- $(‘#Searchresult‘).html(html);
- //分页-只初始化一次
- if($("#Pagination").html().length == ‘‘){
- $("#Pagination").pagination(total, {
- ‘items_per_page‘ : items_per_page,
- ‘num_display_entries‘ : 10,
- ‘num_edge_entries‘ : 2,
- ‘prev_text‘ : "上一页",
- ‘next_text‘ : "下一页",
- ‘callback‘ : pageselectCallback
- });
- }
- }
- });
- }
- function pageselectCallback(page_index, jq){
- getDataList(page_index);
- }
- $(document).ready(function(){
- getDataList(page_index);
- });
4，前端html
Html代码
- <dl id="Searchresult">
- <dt>Search Results will be inserted here ...</dt>
- </dl>
- <br style="clear:both;" />
- <div id="Pagination" class="pagination"></div>
- <br style="clear:both;" />
批注：
（1）jquery.js和jquery.pagination.js插件的加载有先后顺序，不能颠倒。特别是在复杂的页面中。
（2）jquery.pagination.js实现可以有很多种。不同的分页插件，使用时可能会有差别，所以最好有足够的js功底，读懂那些插件是如何实现，以及如何引用。
（3）pagination.css是样式，可以独立出来。也即可以使用很多种不同的样式修饰，不必是给出的那一个。
当然这样的话数据会重复加载2次
--第一次
$(document).ready(function(){
getDataList(page_index);
});
---第二次
‘callback‘: pageselectCallback
暂时解决方法是：
第一次加载且求出数据和分页大小，分页count等，等callback的时候判断一个DOM或input的状态，然后修改即可，
如：
$(document).ready(function() {
$.ajax({
type: "get",
data: "page=‘‘ &S=" + S + "&domain=" + domain + "&pagesize="+dopagesize,
url: "<?php echo $cmsapi; ?>/news",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "jsonpNewsList",
success: function(data) {
if (data.result == 200) {
$(‘#aresult‘).empty();
if (!$.isEmptyObject(data.data.list)) {
$.each(data.data.list, function(a, list) { //装载对应分页的内容
$("#aresult").append(‘<li><span><a href=" detail-‘ + list.id + ‘.html"><div>‘ + list.title + ‘</div></a></span></li>‘);
});
} else {
$("#aresult").append(‘<li><span class="s_check"> 暂无数据</span></li>‘);
}
}
/**
* 初始化完成 显示分页
*/
initPagination(data.data.pages.itemCount, dopagesize);
},
error: function() {
alert(‘参数错误‘);
}
});
});
function initPagination(count, pagesize) {
// 创建分页
$("#Pagination").pagination(count, {//共24条
num_edge_entries: 1, //边缘页数 隐藏之前或之后个数
num_display_entries: 4, //主体页数显示8个多出隐藏
callback: pageselectCallback,
items_per_page: pagesize, //每页显示的3条目数 $this->pagesize
prev_text: "前一页",
next_text: "后一页"
});
}
function pageselectCallback(page_index, jq) { //page_index 前一个表示您当前点击的那个分页的页数索引值
/**
* 扩展: 查询客户的关键字搜索
*/
var search_type = $("#search_type").val();
var orderby = $("#orderby").val();
var keywords = ‘‘;
var search = {};
var online_ajax = $("#online_ajax").val();
if (online_ajax != 1) {
$.ajax({
type: "get",
data: "page=" + (page_index + 1) + " &S=" + S + "&domain=" + domain + "&pagesize=3",
url: "<?php echo $cmsapi; ?>/news",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "jsonpNewsList",
success: function(data) {
if (data.result == 200) {
$(‘#aresult‘).empty();
if (!$.isEmptyObject(data.data.list)) {
$.each(data.data.list, function(a, list) { //装载对应分页的内容
$("#aresult").append(‘<li><span><a href=" detail-‘ + list.id + ‘.html"><div>‘ + list.title + ‘</div></a></span></li>‘);
});
} else {
$("#aresult").append(‘<li><span class="s_check"> 暂无数据</span></li>‘);
}
}
},
error: function() {
alert(‘参数错误‘);
}
});
} else {
$("#online_ajax").val(‘2‘);
}
return false;
}
*********************************************************************************************************************
可以参考下如下改进：
说明
-----------
当您有很多很多数据，需要在网页中以分页的形式显示出来时，这个插件将会帮您创建分页。
使用说明
-----
在页面中引用jQuery和本分页的js及对应的css文件.
在body中创建一对容纳分页链接的标签。
给这个标签加上一个id或class属性(如： "News-Pagination").
这个属性将被用于jQuery选择器。
接下来，写一个含有new_page_index和paging_container这两个参数的js方法。这个方法是在你单击分页链接后的回调函数。
当你单击页码时，对应的页码会被选中。
function handlePaginationClick(new_page_index, pagination_container) {
// 这将选择20个内容数组中的元素
for(var i=new_page_id;i<;i++) {
$(‘#MyContentArea‘).append(content[i]);
}
return false;
}
这个回调函数中需要用到jQuery对dom操作的相关知识。
里面的代码就可以自己去写。
在页面初始化中，当你知道有很多记录要显示出来时，创建如下的分页元素：
// 第一个参数: 记录总数
// 第二个参数: 对象options
$("#News-Pagination").pagination(122, {
items_per_page:20, //pageSize每页最多显示多少条
callback:handlePaginationClick
});
这将在容器中创建分页的导航链接。您会看到
数字1-7，第一个数字是高亮显示的。当您单击另一个页码数字时，
高亮将会改变并且回调函数“handlePaginationClick”
被调用。
通过option和一些元素可以高度配置本插件。
可用的Options：
-----------------
以下为options的具体描述：
callback
当用户单击页码时，回调函数被调用.这个函数接收到两个参数: 新的页码index和分页容器（dom）.
如果回调函数返回false，则事件不执行.
分页中这个回调函数是必不可少的！
它应该包括你所补充的一些代码。
为了加快用户体验，你不应该在此通过AJAX来加载内容。相反，您可以预加载一些内容然后通过此函数来分页浏览。
默认值: "function(){return false;}".
current_page
分页初始化时，被选中的那一页. 也就是当前页
默认值: 0
items_per_page
pageSize，每页最多显示的记录数。
默认值: 10
link_to
分页上的链接. 通常分页是通过onclick事件来触发的. 如果这个链接包含id之类的参数等
, 它将会替换掉原始的分页链接.
默认值: "#"
num_display_entries
可见的页码数量. 建议设置为奇数（对称好看些）
默认值: 11
next_text
“下一页”的文字
默认值: "Next"
next_show_always
是否总是显示“下一页”。
默认值: `true`
prev_text
“上一页”的文字。
默认值: "Previous"
prev_show_always
是否总是显示“上一页”。
默认值: true
num_edge_entries
如果设置为1，则显示“首页”与“尾页”。你也可以把它设置大点的数，以便显示更多的链接。
默认值: 0
ellipse_text
当页码数之间的数字相差很远时，比如：1 2 3 ... 10 11 12
显示的字符(在span中)
默认值: "..."
load_first_page
如果为true则当插件初始化时回调函数被执行。如果你通过ajax来显示内容，那么在初始化分页插件时应把它设置为false;
默认值: true
自定义事件触发分页
----------------------------------------
// 跳到第5页
$("#News-Pagination").trigger(‘setPage‘, [4]);
// 下一页
$("#News-Pagination").trigger(‘nextPage‘);
// 上一页
$("#News-Pagination").trigger(‘prevPage‘);
注：如果指定的页码在页码的范围之内则触发分页事件，否则不触发。
下载地址：http://ishare.iask.sina.com.cn/f/21330704.html
说明下：
1：ie6下面CSS问题，由于IE6不支持多项选择类（如：".current .next"中间没有空格），导致样式不对。把pagination.css的最后一个样式去掉。
.pagination {
font-size: 80%;
}
.pagination a {
text-decoration: none;
border: solid 1px #AAE;
color: #15B;
}
.pagination a, .pagination span {
display: block;
float: left;
padding: 0.3em 0.5em;
margin-right: 5px;
margin-bottom: 5px;
min-width:1em;
text-align:center;
}
.pagination .current {
background: #eee;
color: #555;
border: solid 1px #AAE;
}
2：手动设置"link_to"属性（让页面的url地址像样，xxxxxx.html?id=123）：
[javascript] view
plaincopy
- <script type="text/javascript">
- // This is a very simple demo that shows how a range of elements can
- // be paginated.
- // The elements that will be displayed are in a hidden DIV and are
- // cloned for display. The elements are static, there are no Ajax
- // calls involved.
- /**
- * Callback function that displays the content.
- *
- * Gets called every time the user clicks on a pagination link.
- *
- * @param {int} page_index New Page index
- * @param {jQuery} jq the container with the pagination links as a jQuery object
- */
- function pageselectCallback(page_index, jq){
- var new_content = jQuery(‘#hiddenresult div.result:eq(‘+page_index+‘)‘).clone();
- $(‘#Searchresult‘).empty().append(new_content);
- //return false;
- }
- /**
- * Initialisation function for pagination
- */
- function initPagination() {
- // count entries inside the hidden content
- var num_entries = jQuery(‘#hiddenresult div.result‘).length;
- // Create content inside pagination element
- $("#Pagination").pagination(num_entries, {
- callback: pageselectCallback,
- items_per_page:3,// Show only one item per page
- num_edge_entries:2,
- link_to:"?id=__id__"//分页的js中会自动把"__id__"替换为当前的数。0为第一页
- });
- //页面加载时选中指定页
- $("#Pagination").trigger(‘setPage‘, [parseInt(getQueryString("id"))]);
- }
- // When document is ready, initialize pagination
- $(document).ready(function(){
- initPagination();
- });
- //获取url参数
- function getQueryString(name) {
- var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
- var r = window.location.search.substr(1).match(reg);
- if (r != null) return unescape(r[2]); return null;
- }
- </script>
3：ajax就很简单了。不说了。