jquery【插件】 pagination使用

果学网 -专注IT在线www.prismcollege.com原文：http://zccst.iteye.com/blog/1415848，http://blog.csdn.net/luoyeyu1989/article/details/7000865
http://my.oschina.net/alexgaoyh/blog/225397
先分享一个jquery分页插件演示大全，很强大啊。http://tool.oschina.net/jquery1，下载3个文件分别为：jquery-1.7.1.js、jquery.pagination.js、pagination.css2，准备好服务器端返回结果主要代码如下：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，前端htmlHtml代码
<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->pagesizeprev_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分页初始化时，被选中的那一页. 也就是当前页默认值: 0items_per_pagepageSize，每页最多显示的记录数。默认值: 10link_to分页上的链接. 通常分页是通过onclick事件来触发的. 如果这个链接包含id之类的参数等, 它将会替换掉原始的分页链接.默认值: "#"num_display_entries可见的页码数量. 建议设置为奇数（对称好看些）默认值: 11next_text“下一页”的文字默认值: "Next"next_show_always是否总是显示“下一页”。默认值: `true`prev_text“上一页”的文字。默认值: "Previous"prev_show_always是否总是显示“上一页”。默认值: truenum_edge_entries如果设置为1，则显示“首页”与“尾页”。你也可以把它设置大点的数，以便显示更多的链接。默认值: 0ellipse_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 contentvar 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 pagenum_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就很简单了。不说了。

jquery.pagination.js 新增 首页 尾页 功能

在使用 jquery.pagination.js 的时候，发现现有的jquery.pagination.js文件并不包含 首页 尾页 的功能，只有 上一页 下一页 的功能，故修改了第三方的 jquery.pagination.js 的文件，使他可以实现 首页 尾页 的功能，以下为修改后的文件，并加上update的注释废话不多说，直接上修改后的代码，修改部分已经用 update 注释包含17-20行99-103行141-145行?