首页>>分页>>Jquery一页内翻页,类似于无刷新分页(2013-09-05)

Jquery一页内翻页,类似于无刷新分页

 注意本例实际上显示了所有的记录，如果自己使用时候注意数据不要太多了，可以使用在公告等地方

数据库与其他分页相同

css文件可以在演示页面查看源码

js文件里面的“$('#holder').sweetPages({perPage:3});”控制每页显示条数

Jquery一页内翻页,类似于无刷新分页
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 index.php

PHP Code复制内容到剪贴板
  1. <div id="main">  
  2.     <ul id="holder">  
  3. <?php  
  4. include '../../conn.php';  
  5. $sql_1209="select * from `content` where id>0";  
  6.       
  7. $sql_1209=$sql_1209." order by id";   
  8.   
  9.   
  10. $rs=mysql_query($sql_1209);  
  11. if ($myrow = mysql_fetch_array($rs))  
  12.   
  13. {  
  14.   
  15. do {  
  16.   
  17. $i++;  
  18.   
  19. ?>  
  20.       
  21.   <li><?PHP echo $myrow["message"];?></li>  
  22.   
  23.   
  24.   
  25.   
  26. <?php  
  27.   
  28. }  
  29.   
  30. while ($myrow = mysql_fetch_array($rs));  
  31.   
  32.   
  33. }  
  34.   
  35.   
  36. ?>  
  37.     </ul>  
  38. </div>  

 js文件

 

JavaScript Code复制内容到剪贴板
  1. (function($){  
  2.   
  3. // Creating the sweetPages jQuery plugin:  
  4. $.fn.sweetPages = function(opts){  
  5.       
  6.     // If no options were passed, create an empty opts object  
  7.     if(!opts) opts = {};  
  8.       
  9.     var resultsPerPage = opts.perPage || 3;  
  10.       
  11.     // The plugin works best for unordered lists, althugh ols would do just as well:  
  12.     var ul = this;  
  13.     var li = ul.find('li');  
  14.       
  15.     li.each(function(){  
  16.         // Calculating the height of each li element, and storing it with the data method:  
  17.         var el = $(this);  
  18.         el.data('height',el.outerHeight(true));  
  19.     });  
  20.       
  21.     // Calculating the total number of pages:  
  22.     var pagesNumber = Math.ceil(li.length/resultsPerPage);  
  23.       
  24.     // If the pages are less than two, do nothing:  
  25.     if(pagesNumber<2) return this;  
  26.   
  27.     // Creating the controls div:  
  28.     var swControls = $('<div class="swControls">');  
  29.       
  30.     for(var i=0;i<pagesNumber;i++)  
  31.     {  
  32.         // Slice a portion of the lis, and wrap it in a swPage div:  
  33.         li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');  
  34.           
  35.         // Adding a link to the swControls div:  
  36.         swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');  
  37.     }  
  38.   
  39.     ul.append(swControls);  
  40.       
  41.     var maxHeight = 0;  
  42.     var totalWidth = 0;  
  43.       
  44.     var swPage = ul.find('.swPage');  
  45.     swPage.each(function(){  
  46.           
  47.         // Looping through all the newly created pages:  
  48.           
  49.         var elem = $(this);  
  50.   
  51.         var tmpHeight = 0;  
  52.         elem.find('li').each(function(){tmpHeight+=$(this).data('height');});  
  53.   
  54.         if(tmpHeight>maxHeight)  
  55.             maxHeight = tmpHeight;  
  56.   
  57.         totalWidth+=elem.outerWidth();  
  58.           
  59.         elem.css('float','left').width(ul.width());  
  60.     });  
  61.       
  62.     swPage.wrapAll('<div class="swSlider" />');  
  63.       
  64.     // Setting the height of the ul to the height of the tallest page:  
  65.     ul.height(maxHeight);  
  66.       
  67.     var swSlider = ul.find('.swSlider');  
  68.     swSlider.append('<div class="clear" />').width(totalWidth);  
  69.   
  70.     var hyperLinks = ul.find('a.swShowPage');  
  71.       
  72.     hyperLinks.click(function(e){  
  73.           
  74.         // If one of the control links is clicked, slide the swSlider div   
  75.         // (which contains all the pages) and mark it as active:  
  76.   
  77.         $(this).addClass('active').siblings().removeClass('active');  
  78.           
  79.         swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow');  
  80.         e.preventDefault();  
  81.     });  
  82.       
  83.     // Mark the first link as active the first time this code runs:  
  84.     hyperLinks.eq(0).addClass('active');  
  85.       
  86.     // Center the control div:  
  87.     swControls.css({  
  88.         'left':'50%',  
  89.         'margin-left':-swControls.width()/2  
  90.     });  
  91.       
  92.     return this;  
  93.       
  94. }})(jQuery);  
  95.   
  96.   
  97. $(document).ready(function(){  
  98.     /* The following code is executed once the DOM is loaded */  
  99.       
  100.     // Calling the jQuery plugin and splitting the  
  101.     // #holder UL into pages of 3 LIs each:  
  102.       
  103.     $('#holder').sweetPages({perPage:3});  
  104.       
  105.     // The default behaviour of the plugin is to insert the   
  106.     // page links in the ul, but we need them in the main container:  
  107.   
  108.     var controls = $('.swControls').detach();  
  109.     controls.appendTo('#main');  
  110.       
  111. });  

 


原文地址:http://www.freejs.net/article_fenye_22.html