JAVASCRIPT   21

jquery pajinate

Guest on 13th August 2022 12:38:36 AM

  1. ;
  2. (function($) { /*******************************************************************************************/
  3.         // jquery.pajinate.js - version 0.4
  4.         // A jQuery plugin for paginating through any number of DOM elements
  5.         //
  6.         // Copyright (c) , Wes Nolte (http://wesnolte.com)
  7.         // Licensed under the MIT License (MIT-LICENSE.txt)
  8.         // http://www.opensource.org/licenses/mit-license.php
  9.         //
  10.         /*******************************************************************************************/
  11.  
  12.         $.fn.pajinate = function(options) {
  13.                 // Set some state information
  14.                 var current_page = 'current_page';
  15.                 var items_per_page = 'items_per_page';
  16.  
  17.                 var meta;
  18.  
  19.                 // Setup default option values
  20.                 var defaults = {
  21.                         item_container_id: '.content',
  22.                         items_per_page: 10,
  23.                         nav_panel_id: '.page_navigation',
  24.                         nav_info_id: '.info_text',
  25.                         num_page_links_to_display: 20,
  26.                         start_page: 0,
  27.                         wrap_around: false,
  28.                         nav_label_first: 'First',
  29.                         nav_label_prev: 'Prev',
  30.                         nav_label_next: 'Next',
  31.                         nav_label_last: 'Last',
  32.                         nav_order: ["first", "prev", "num", "next", "last"],
  33.                         nav_label_info: 'Showing {0}-{1} of {2} results',
  34.                         show_first_last: true,
  35.                         abort_on_small_lists: false,
  36.                         jquery_ui: false,
  37.                         jquery_ui_active: "ui-state-highlight",
  38.                         jquery_ui_default: "ui-state-default",
  39.                         jquery_ui_disabled: "ui-state-disabled"
  40.                 };
  41.  
  42.                 var options = $.extend(defaults, options);
  43.                 var $item_container;
  44.                 var $page_container;
  45.                 var $items;
  46.                 var $nav_panels;
  47.                 var total_page_no_links;
  48.                 var jquery_ui_default_class = options.jquery_ui ? options.jquery_ui_default : '';
  49.                 var jquery_ui_active_class = options.jquery_ui ? options.jquery_ui_active : '';
  50.                 var jquery_ui_disabled_class = options.jquery_ui ? options.jquery_ui_disabled : '';
  51.  
  52.                 return this.each(function() {
  53.                         $page_container = $(this);
  54.                         $item_container = $(this).find(options.item_container_id);
  55.                         $items = $page_container.find(options.item_container_id).children();
  56.  
  57.                         if (options.abort_on_small_lists && options.items_per_page >= $items.size()) return $page_container;
  58.  
  59.                         meta = $page_container;
  60.  
  61.                         // Initialize meta data
  62.                         meta.data(current_page, 0);
  63.                         meta.data(items_per_page, options.items_per_page);
  64.  
  65.                         // Get the total number of items
  66.                         var total_items = $item_container.children().size();
  67.  
  68.                         // Calculate the number of pages needed
  69.                         var number_of_pages = Math.ceil(total_items / options.items_per_page);
  70.  
  71.                         // Construct the nav bar
  72.                         var more = '<span class="ellipse more">...</span>';
  73.                         var less = '<span class="ellipse less">...</span>';
  74.                         var first = !options.show_first_last ? '' : '<a class="page-link first_link ' + jquery_ui_default_class + '" href="">' + options.nav_label_first + '</a>';
  75.                         var last = !options.show_first_last ? '' : '<a class="page-link last_link ' + jquery_ui_default_class + '" href="">' + options.nav_label_last + '</a>';
  76.  
  77.                         var navigation_html = "";
  78.  
  79.                         for (var i = 0; i < options.nav_order.length; i++) {
  80.                                 switch (options.nav_order[i]) {
  81.                                 case "first":
  82.                                         navigation_html += first;
  83.                                         break;
  84.                                 case "last":
  85.                                         navigation_html += last;
  86.                                         break;
  87.                                 case "next":
  88.                                         navigation_html += '<a class="page-link next_link ' + jquery_ui_default_class + '" href="">' + options.nav_label_next + '</a>';
  89.                                         break;
  90.                                 case "prev":
  91.                                         navigation_html += '<a class="page-link previous_link ' + jquery_ui_default_class + '" href="">' + options.nav_label_prev + '</a>';
  92.                                         break;
  93.                                 case "num":
  94.                                         navigation_html += less;
  95.                                         var current_link = 0;
  96.                                         while (number_of_pages > current_link) {
  97.                                                 navigation_html += '<a class="page-link page_link ' + jquery_ui_default_class + '" href="" longdesc="' + current_link + '">' + (current_link + 1) + '</a>';
  98.                                                 current_link++;
  99.                                         }
  100.                                         navigation_html += more;
  101.                                         break;
  102.                                 default:
  103.                                         break;
  104.                                 }
  105.  
  106.                         }
  107.  
  108.                         // And add it to the appropriate area of the DOM       
  109.                         $nav_panels = $page_container.find(options.nav_panel_id);
  110.                         $nav_panels.html(navigation_html).each(function() {
  111.  
  112.                                 $(this).find('.page_link:first').addClass('first');
  113.                                 $(this).find('.page_link:last').addClass('last');
  114.  
  115.                         });
  116.  
  117.                         // Hide the more/less indicators
  118.                         $nav_panels.children('.ellipse').hide();
  119.  
  120.                         // Set the active page link styling
  121.                         $nav_panels.find('.previous_link').next().next().addClass('active_page ' + jquery_ui_active_class);
  122.  
  123.                         /* Setup Page Display */
  124.                         // And hide all pages
  125.                         $items.hide();
  126.                         // Show the first page                 
  127.                         $items.slice(0, meta.data(items_per_page)).show();
  128.  
  129.                         /* Setup Nav Menu Display */
  130.                         // Page number slices
  131.                         total_page_no_links = $page_container.find(options.nav_panel_id + ':first').children('.page_link').size();
  132.                         options.num_page_links_to_display = Math.min(options.num_page_links_to_display, total_page_no_links);
  133.  
  134.                         $nav_panels.children('.page_link').hide(); // Hide all the page links
  135.                         // And only show the number we should be seeing
  136.                         $nav_panels.each(function() {
  137.                                 $(this).children('.page_link').slice(0, options.num_page_links_to_display).show();
  138.                         });
  139.  
  140.                         /* Bind the actions to their respective links */
  141.  
  142.                         // Event handler for 'First' link
  143.                         $page_container.find('.first_link').click(function(e) {
  144.                                 e.preventDefault();
  145.  
  146.                                 movePageNumbersRight($(this), 0);
  147.                                 gotopage(0);
  148.                         });
  149.  
  150.                         // Event handler for 'Last' link
  151.                         $page_container.find('.last_link').click(function(e) {
  152.                                 e.preventDefault();
  153.                                 var lastPage = total_page_no_links - 1;
  154.                                 movePageNumbersLeft($(this), lastPage);
  155.                                 gotopage(lastPage);
  156.                         });
  157.  
  158.                         // Event handler for 'Prev' link
  159.                         $page_container.find('.previous_link').click(function(e) {
  160.                                 e.preventDefault();
  161.                                 showPrevPage($(this));
  162.                         });
  163.  
  164.  
  165.                         // Event handler for 'Next' link
  166.                         $page_container.find('.next_link').click(function(e) {
  167.                                 e.preventDefault();
  168.                                 showNextPage($(this));
  169.                         });
  170.  
  171.                         // Event handler for each 'Page' link
  172.                         $page_container.find('.page_link').click(function(e) {
  173.                                 e.preventDefault();
  174.                                 gotopage($(this).attr('longdesc'));
  175.                         });
  176.  
  177.                         // Goto the required page
  178.                         gotopage(parseInt(options.start_page));
  179.                         toggleMoreLess();
  180.                         if (!options.wrap_around) tagNextPrev();
  181.                 });
  182.  
  183.                 function showPrevPage(e) {
  184.                         new_page = parseInt(meta.data(current_page)) - 1;
  185.  
  186.                         // Check that we aren't on a boundary link
  187.                         if ($(e).siblings('.active_page').prev('.page_link').length == true) {
  188.                                 movePageNumbersRight(e, new_page);
  189.                                 gotopage(new_page);
  190.                         }
  191.                         else if (options.wrap_around) {
  192.                                 gotopage(total_page_no_links - 1);
  193.                         }
  194.  
  195.                 };
  196.  
  197.                 function showNextPage(e) {
  198.                         new_page = parseInt(meta.data(current_page)) + 1;
  199.  
  200.                         // Check that we aren't on a boundary link
  201.                         if ($(e).siblings('.active_page').next('.page_link').length == true) {
  202.                                 movePageNumbersLeft(e, new_page);
  203.                                 gotopage(new_page);
  204.                         }
  205.                         else if (options.wrap_around) {
  206.                                 gotopage(0);
  207.                         }
  208.  
  209.                 };
  210.  
  211.                 function gotopage(page_num) {
  212.  
  213.                         page_num = parseInt(page_num, 10)
  214.  
  215.                         var ipp = parseInt(meta.data(items_per_page));
  216.  
  217.                         // Find the start of the next slice
  218.                         start_from = page_num * ipp;
  219.  
  220.                         // Find the end of the next slice
  221.                         end_on = start_from + ipp;
  222.                         // Hide the current page       
  223.                         var items = $items.hide().slice(start_from, end_on);
  224.  
  225.                         items.show();
  226.  
  227.                         // Reassign the active class
  228.                         $page_container.find(options.nav_panel_id).children('.page_link[longdesc=' + page_num + ']').addClass('active_page ' + jquery_ui_active_class).siblings('.active_page').removeClass('active_page ' + jquery_ui_active_class);
  229.  
  230.                         // Set the current page meta data                                                      
  231.                         meta.data(current_page, page_num);
  232.                         /*########## Ajout de l'option page courante + nombre de pages*/
  233.                         var $current_page = parseInt(meta.data(current_page)+1);
  234.                         // Get the total number of items
  235.                         var total_items = $item_container.children().size();
  236.                         // Calculate the number of pages needed
  237.                         var $number_of_pages = Math.ceil(total_items / options.items_per_page);
  238.                         /*##################################################################*/
  239.                         $page_container.find(options.nav_info_id).html(options.nav_label_info.replace("{0}", start_from + 1).
  240.                         replace("{1}", start_from + items.length).replace("{2}", $items.length).replace("{3}", $current_page).replace("{4}", $number_of_pages));
  241.  
  242.                         // Hide the more and/or less indicators
  243.                         toggleMoreLess();
  244.  
  245.                         // Add a class to the next or prev links if there are no more pages next or previous to the active page
  246.                         tagNextPrev();
  247.  
  248.                         // check if the onPage callback is available and call it
  249.                         if (typeof(options.onPageDisplayed) !== "undefined" ) {
  250.                                 options.onPageDisplayed.call(this, page_num + 1)
  251.                         }
  252.  
  253.                 }
  254.  
  255.                 // Methods to shift the diplayed index of page numbers to the left or right
  256.  
  257.  
  258.                 function movePageNumbersLeft(e, new_p) {
  259.                         var new_page = new_p;
  260.  
  261.                         var $current_active_link = $(e).siblings('.active_page');
  262.  
  263.                         if ($current_active_link.siblings('.page_link[longdesc=' + new_page + ']').css('display') == 'none') {
  264.  
  265.                                 $nav_panels.each(function() {
  266.                                         $(this).children('.page_link').hide() // Hide all the page links
  267.                                         .slice(parseInt(new_page - options.num_page_links_to_display + 1), new_page + 1).show();
  268.                                 });
  269.                         }
  270.  
  271.                 }
  272.  
  273.                 function movePageNumbersRight(e, new_p) {
  274.                         var new_page = new_p;
  275.  
  276.                         var $current_active_link = $(e).siblings('.active_page');
  277.  
  278.                         if ($current_active_link.siblings('.page_link[longdesc=' + new_page + ']').css('display') == 'none') {
  279.  
  280.                                 $nav_panels.each(function() {
  281.                                         $(this).children('.page_link').hide() // Hide all the page links
  282.                                         .slice(new_page, new_page + parseInt(options.num_page_links_to_display)).show();
  283.                                 });
  284.                         }
  285.                 }
  286.  
  287.                 // Show or remove the ellipses that indicate that more page numbers exist in the page index than are currently shown
  288.  
  289.  
  290.                 function toggleMoreLess() {
  291.  
  292.                         if (!$nav_panels.children('.page_link:visible').hasClass('last')) {
  293.                                 $nav_panels.children('.more').show();
  294.                         }
  295.                         else {
  296.                                 $nav_panels.children('.more').hide();
  297.                         }
  298.  
  299.                         if (!$nav_panels.children('.page_link:visible').hasClass('first')) {
  300.                                 $nav_panels.children('.less').show();
  301.                         }
  302.                         else {
  303.                                 $nav_panels.children('.less').hide();
  304.                         }
  305.                 }
  306.  
  307.                 /* Add the style class ".no_more" to the first/prev and last/next links to allow custom styling */
  308.  
  309.                 function tagNextPrev() {
  310.                         if ($nav_panels.children('.last').hasClass('active_page')) {
  311.                                 $nav_panels.children('.next_link').add('.last_link').addClass('no_more ' + jquery_ui_disabled_class);
  312.                         }
  313.                         else {
  314.                                 $nav_panels.children('.next_link').add('.last_link').removeClass('no_more ' + jquery_ui_disabled_class);
  315.                         }
  316.  
  317.                         if ($nav_panels.children('.first').hasClass('active_page')) {
  318.                                 $nav_panels.children('.previous_link').add('.first_link').addClass('no_more ' + jquery_ui_disabled_class);
  319.                         }
  320.                         else {
  321.                                 $nav_panels.children('.previous_link').add('.first_link').removeClass('no_more ' + jquery_ui_disabled_class);
  322.                         }
  323.                 }
  324.  
  325.         };
  326.  
  327. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.