使用JQuery实现分页功能

导读：原文作者Rajeev H发表了一篇《Paginate with JQuery》，文中介绍了使用JQuery代码制作的既漂亮又好用的分页插件。以下是文章摘要：

分页功能是用户在屏幕上的点击纪录列表按钮，从而实现上一页和下一页的分页功能。当你页面有大量的文字、图片信息，屏幕显示过长时，分页功能就起到了的作用。

让我们来看如何使用JQuery实现分页功能的插件。在本篇文章中就不具体介绍如何设置JQuery的细节。现在我们直接进入主题，这个分页插件是在jquery.pagination.js文件中使用HTML编写，所以需要一个CSS的样式来定义分页元素。

这个插件是由几个的小链接图标组成的网页链接。每个链接表示一个页面，你点击这个链接就可以实现分页功能。下图是在网页中插件的图标。

在分页之前，您可以自由制定每个页面所显示的行数。JQuery的分页插件会自动计算你分开的网页数量，插件上会会显示出总共页面条数。

    <link rel="stylesheet" href="css/pagination.css" /> 
    <script type="text/javascript" src="js/pagination/jquery.pagination.js"></script> 
    <script type="text/javascript"> 
            var _EVENT; 
            var _MAX_DISPLAY_PAGES = 5; 
            var _ITEMS_PER_PAGE = 4; 
            jQuery(document).ready(function() {   
            initPagination(); 
            });        
             
            function initPagination() { 
                    _EVENT = "load"; 
                            var totalItemCount = formObj.totalItemCount.value;  
                jQuery("#pageLinks").pagination(totalItemCount, { 
                    callback: paginate, 
                    num_display_entries: _MAX_DISPLAY_PAGES , 
                    items_per_page: _ITEMS_PER_PAGE  
                }); 
             } 
            function paginate(pageIndex, container){ 
            var startOffset; 
            var endOffset; 
            var formObj = document.forms["dummyForm"]; 
            if (_EVENT != "load") { 
                endOffset = (pageIndex + 1) * 4; 
                startOffset = endOffset – 4; 
                formObj.startOffset.value = startOffset; 
                    jQuery.get("dummy.html?operation=viewList", params, function(data){ 
                       jQuery(‘#resultArea’).html(data); 
                    }); 
            } else { 
                _EVENT = ""; 
            } 
             
            return false; 
        } 
     
    </script> 
    <form name="paginationForm"> 
            <div id="resultArea"> 
                    <!– The list of records to paginate will come here; maybe in a table form –> 
            </div> 
            <div id="pageLinks"> 
                    <!– Page links will be rendered by JQuery plugin  
                    upon calling the paginate callback function for the first time –> 
            </div> 
              
            <input type="hidden" name="startOffset" />          
            <input type="hidden" name="totalItemCount" value="${pageList.totalItemCount}" />          
    </form> 

文档第一次加载时会记录总数。假设你的servlet自动保存了此次记录，会自动保存在名为totalItemCount中。如果将记录保存在指定的位置，需手动定义一个<div>元素来调用分页函数使用该<div>元素标识符。

原文链接：http://www.rajeevhathi.com/2011/01/paginate-with-jquery/