← Tutti gli articoli

Paginazione con jquery

28 marzo 2011  · jQuery · Article  ·  11 visite

Paginate for each 'content' div.

  1. < %@ Page  Title = ""   Language = "C#"   MasterPageFile = "~/Site.Master"   AutoEventWireup = "true"   CodeBehind = "WebForm1.aspx.cs"   Inherits = "WebApplication1.WebForm1"  % >   
  2. < asp:Content   ID = "Content1"   ContentPlaceHolderID = "HeadContent"   runat = "server" >   
  3.     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  4.     <script type="text/javascript">  
  5.         $(document).ready(function () {  
  6.   
  7.             //how much items per page to show  
  8.             var show_per_page = 5;  
  9.             //getting the amount of elements inside content div  
  10.             var number_of_items = $('#content').children().size();  
  11.             //calculate the number of pages we are going to have  
  12.             var number_of_pages = Math.ceil(number_of_items / show_per_page);  
  13.   
  14.             //set the value of our hidden input fields  
  15.             $('#current_page').val(0);  
  16.             $('#show_per_page').val(show_per_page);  
  17.   
  18.             //now when we got all we need for the navigation let's make it '  
  19.   
  20.             /*   
  21.             what are we going to have in the navigation?  
  22.             - link to previous page  
  23.             - links to specific pages  
  24.             - link to next page  
  25.             */  
  26.             var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';  
  27.             var current_link = 0;  
  28.             while (number_of_pages > current_link) {  
  29.                 navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a>';  
  30.                 current_link++;  
  31.             }  
  32.             navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';  
  33.   
  34.             $('#page_navigation').html(navigation_html);  
  35.   
  36.             //add active_page class to the first page link  
  37.             $('#page_navigation .page_link:first').addClass('active_page');  
  38.   
  39.             //hide all the elements inside content div  
  40.             $('#content').children().css('display', 'none');  
  41.   
  42.             //and show the first n (show_per_page) elements  
  43.             $('#content').children().slice(0, show_per_page).css('display', 'block');  
  44.   
  45.         });  
  46.   
  47.         function previous() {  
  48.   
  49.             new_page = parseInt($('#current_page').val()) - 1;  
  50.             //if there is an item before the current active link run the function  
  51.             if ($('.active_page').prev('.page_link').length == true) {  
  52.                 go_to_page(new_page);  
  53.             }  
  54.   
  55.         }  
  56.   
  57.         function next() {  
  58.             new_page = parseInt($('#current_page').val()) + 1;  
  59.             //if there is an item after the current active link run the function  
  60.             if ($('.active_page').next('.page_link').length == true) {  
  61.                 go_to_page(new_page);  
  62.             }  
  63.   
  64.         }  
  65.         function go_to_page(page_num) {  
  66.             //get the number of items shown per page  
  67.             var show_per_page = parseInt($('#show_per_page').val());  
  68.   
  69.             //get the element number where to start the slice from  
  70.             start_from = page_num * show_per_page;  
  71.   
  72.             //get the element number where to end the slice  
  73.             end_on = start_from + show_per_page;  
  74.   
  75.             //hide all children elements of content div, get specific items and show them  
  76.             $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');  
  77.   
  78.             /*get the page link that has longdesc attribute of the current page and add active_page class to it  
  79.             and remove that class from previously active page link*/  
  80.             $('.page_link[longdesc=' + page_num + ']').addClass('active_page').siblings('.active_page').removeClass('active_page');  
  81.   
  82.             //update the current page input field  
  83.             $('#current_page').val(page_num);  
  84.         }  
  85.     
  86. </ script >   
  87. < style >   
  88. #page_navigation a{  
  89.     padding:3px;  
  90.     border:1px solid gray;  
  91.     margin:2px;  
  92.     color:black;  
  93.     text-decoration:none  
  94. }  
  95. .active_page{  
  96.     background:darkblue;  
  97.     color:white !important;  
  98. }  
  99. </ style >   
  100. </ asp:Content >   
  101. < asp:Content   ID = "Content2"   ContentPlaceHolderID = "MainContent"   runat = "server" >   
  102.   
  103.   
  104.     <!-- the input fields that will hold the variables we will use -->  
  105.     <input type='hidden' id='current_page' />  
  106.     <input type='hidden' id='show_per_page' />  
  107.   
  108.     <!-- Content div. The child elements will be used for paginating(they don't have to be all the same,  
  109.         you can use divs, paragraphs, spans, or whatever you like mixed together). '-->  
  110.     <div id='content'>  
  111.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
  112.         <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p>  
  113.         <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</p>  
  114.         <p>Pellentesque ac sem ac sem tincidunt euismod.</p>  
  115.         <p>Duis hendrerit purus vitae nibh tincidunt bibendum.</p>  
  116.           
  117.       
  118.         <p>Proin dapibus nisi a quam interdum lobortis.</p>  
  119.         <p>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</p>  
  120.         <p>Mauris auctor suscipit tellus, at sodales nisi blandit sed.</p>  
  121.   
  122.     </div>  
  123.     <div id='content'>  
  124.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
  125.         <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p>  
  126.         <p>Cura</p>  
  127.     </div>  
  128.   
  129.     <!-- An empty div which will be populated using jQuery -->  
  130.     <div id='page_navigation'></div>  
  131.   
  132. </ asp:Content >