• 保存到桌面加入收藏设为首页
服务器技术

使用JQuery实现分页功能

时间:2016-07-05 10:39:50   作者:老谭   来源:IDCSPED   阅读:6433   评论:0
内容摘要:导读:原文作者Rajeev H发表了一篇《Paginate with JQuery》,文中介绍了使用JQuery代码制作的既漂亮又好用的分页插件。以下是文章摘要:分页功能是用户在屏幕上的点击纪录列表按钮,从而实现上一页和下一页的分页功能。当你页面有大量的文字、图片信息,屏幕显示过长时,分墓δ芫推鸬搅说淖饔谩H梦颐抢纯...

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

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

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

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

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

  1. <link rel="stylesheet" href="css/pagination.css" /> 
  2. <script type="text/javascript" src="js/pagination/jquery.pagination.js"></script> 
  3. <script type="text/javascript"> 
  4.         var _EVENT; 
  5.         var _MAX_DISPLAY_PAGES = 5
  6.         var _ITEMS_PER_PAGE = 4
  7.         jQuery(document).ready(function() {   
  8.         initPagination(); 
  9.         });        
  10.          
  11.         function initPagination() { 
  12.                 _EVENT = "load"
  13.                         var totalItemCount = formObj.totalItemCount.value;  
  14.             jQuery("#pageLinks").pagination(totalItemCount, { 
  15.                 callback: paginate, 
  16.                 num_display_entries: _MAX_DISPLAY_PAGES , 
  17.                 items_per_page: _ITEMS_PER_PAGE  
  18.             }); 
  19.          } 
  20.         function paginate(pageIndex, container){ 
  21.         var startOffset; 
  22.         var endOffset; 
  23.         var formObj = document.forms["dummyForm"]; 
  24.         if (_EVENT != "load") { 
  25.             endOffset = (pageIndex + 1) * 4; 
  26.             startOffset = endOffset – 4; 
  27.             formObj.startOffset.value = startOffset; 
  28.                 jQuery.get("dummy.html?operation=viewList", params, function(data){ 
  29.                    jQuery(‘#resultArea’).html(data); 
  30.                 }); 
  31.         } else { 
  32.             _EVENT = ""
  33.         } 
  34.          
  35.         return false; 
  36.     } 
  37.  
  38. </script> 
  39. <form name="paginationForm"> 
  40.         <div id="resultArea"> 
  41.                 <!– The list of records to paginate will come here; maybe in a table form –> 
  42.         </div> 
  43.         <div id="pageLinks"> 
  44.                 <!– Page links will be rendered by JQuery plugin  
  45.                 upon calling the paginate callback function for the first time –> 
  46.         </div> 
  47.           
  48.         <input type="hidden" name="startOffset" />          
  49.         <input type="hidden" name="totalItemCount" value="${pageList.totalItemCount}" />          
  50. </form> 

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

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


IDCsped 提供最新的IT互联网资讯,本着分享传播的宗旨,我们希望能帮助更多人了解需要的信息!

部分文章转载自互联网、部分是IDCsped原创文章,如果转载,请注明出处:www.idcsped.com !
微信号:13430280788  欢迎加微信交流!

标签:javascript  图片  主题  文章  漂亮  
相关评论

销售电话:13430280788

Copyright © 2012-2017 | www.idcsped.com 版权所有

  粤公网安备 44010502001126号  粤ICP备12006439号-1