jQuery分页插件定位问题

Question

I am using jquery ui 1.10.4 on a web application to paginate and display a select number of items from an ArrayList on a webpage. The problem is that the size of the list changes and the pagination buttons do not move with it. They stay fixed in their position at the bottom of the page despite the fact the list (on the last page where there are only a couple items left to look at in the list) has shrunk. When I used my developer tools on the site I discovered that if I remove the absolute position setting, the pagination buttons move with the list size like they are supposed to, so I tried overriding the positioning in the code with other settings like these...

http://www.w3schools.com/cssref/pr_class_position.asp

But this did not work. I tried going into the jquery file itself to change the css settings where the absolute positioning is set, but the file is huge and i'm not really sure which part i need to change exactly. And even if I found the right spot, I'm not really sure what the change it to to make it work. Can I just remove it so it behaves like it did when I removed it with my developer tools? I am new with this stuff so I have no clue!

Here is my html code where I am actually using the pagination, note the absolute position setting. I left this there intentionally for you to see. What can I change in here to make it so the position changes with the list size on the page and does not remain stuck in one place?

</table>
</form>
<div id="pager" class="pager" position="absolute">
        <form>
            <img src="includes/images/first.png" class="first"/>
            <img src="includes/images/prev.png" class="prev"/>
            <input type="text" class="pagedisplay"/>
            <img src="includes/images/next.png" class="next"/>
            <img src="includes/images/last.png" class="last"/>
            <select class="pagesize">
                <option value="10">10 per page</option>
                <option value="25">25 per page</option>
                <option value="50">50 per page</option>         
            </select>
            </form>
</div>

Here is the jquery file I am using for pagination where I am not sure where to change the absolute setting, if this is even necessary.

;(function($){
/*******************************************************************************************/    
// jquery.pajinate.js - version 0.4
// A jQuery plugin for paginating through any number of DOM elements
// 
// Copyright (c) 2010, Wes Nolte (http://wesnolte.com)
// Licensed under the MIT License (MIT-LICENSE.txt)
// http://www.opensource.org/licenses/mit-license.php
// Created: 2010-04-16 | Updated: 2010-04-26
//
/*******************************************************************************************/

    $.fn.pajinate = function(options){
        // Set some state information
        var current_page = 'current_page';
        var items_per_page = 'items_per_page';

        var meta;

        // Setup default option values
        var defaults = {
            item_container_id : '.content',
            items_per_page : 10,            
            nav_panel_id : '.page_navigation',
            nav_info_id : '.info_text',
            num_page_links_to_display : 20,         
            start_page : 0,
            wrap_around : false,
            nav_label_first : 'First',
            nav_label_prev : 'Prev',
            nav_label_next : 'Next',
            nav_label_last : 'Last',
            nav_order : ["first", "prev", "num", "next", "last"],
            nav_label_info : 'Showing {0}-{1} of {2} results',
            show_first_last: true,
            abort_on_small_lists: false,
            jquery_ui: false,
            jquery_ui_active: "ui-state-highlight",
            jquery_ui_default: "ui-state-default",
            jquery_ui_disabled: "ui-state-disabled"
        };
        var options = $.extend(defaults,options);
        var $item_container;
        var $page_container;
        var $items;
        var $nav_panels;
        var total_page_no_links;
        var jquery_ui_default_class = options.jquery_ui ? options.jquery_ui_default : '';
        var jquery_ui_active_class = options.jquery_ui ? options.jquery_ui_active : '';
        var jquery_ui_disabled_class = options.jquery_ui ? options.jquery_ui_disabled : '';

        return this.each(function(){
            $page_container = $(this);
            $item_container = $(this).find(options.item_container_id);
            $items = $page_container.find(options.item_container_id).children();

            if (options.abort_on_small_lists && options.items_per_page >= $items.size())
                return $page_container;

            meta = $page_container;

            // Initialize meta data
            meta.data(current_page,0);
            meta.data(items_per_page, options.items_per_page);

            // Get the total number of items
            var total_items = $item_container.children().size();

            // Calculate the number of pages needed
            var number_of_pages = Math.ceil(total_items/options.items_per_page);

            // Construct the nav bar
            var more = '<span class="ellipse more">...</span>';
            var less = '<span class="ellipse less">...</span>';
            var first = !options.show_first_last ? '' : '<a class="first_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_first +'</a>';
            var last = !options.show_first_last ? '' : '<a class="last_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_last +'</a>';

            var navigation_html = "";

            for(var i = 0; i < options.nav_order.length; i++) {
                switch (options.nav_order[i]) {
                case "first":
                    navigation_html += first;
                    break;
                case "last":
                    navigation_html += last;
                    break;
                case "next":
                    navigation_html += '<a class="next_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_next +'</a>';
                    break;
                case "prev":
                    navigation_html += '<a class="previous_link '+ jquery_ui_default_class +'" href="">'+ options.nav_label_prev +'</a>';
                    break;
                case "num":
                    navigation_html += less;
                    var current_link = 0;
                    while(number_of_pages > current_link){
                        navigation_html += '<a class="page_link '+ jquery_ui_default_class +'" href="" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
                        current_link++;
                    }
                    navigation_html += more;
                    break;
                default:
                    break;
                }

            }

            // And add it to the appropriate area of the DOM    
            $nav_panels = $page_container.find(options.nav_panel_id);           
            $nav_panels.html(navigation_html).each(function(){

                $(this).find('.page_link:first').addClass('first');
                $(this).find('.page_link:last').addClass('last');

            });

            // Hide the more/less indicators
            $nav_panels.children('.ellipse').hide();

            // Set the active page link styling
            $nav_panels.find('.previous_link').next().next().addClass('active_page '+ jquery_ui_active_class);

            /* Setup Page Display */
            // And hide all pages
            $items.hide();
            // Show the first page          
            $items.slice(0, meta.data(items_per_page)).show();

            /* Setup Nav Menu Display */
            // Page number slices

            total_page_no_links = $page_container.children(options.nav_panel_id+':first').children('.page_link').size();
            options.num_page_links_to_display = Math.min(options.num_page_links_to_display,total_page_no_links);

            $nav_panels.children('.page_link').hide(); // Hide all the page links

            // And only show the number we should be seeing
            $nav_panels.each(function(){
                $(this).children('.page_link').slice(0, options.num_page_links_to_display).show();          
            });

            /* Bind the actions to their respective links */

            // Event handler for 'First' link
            $page_container.find('.first_link').click(function(e){
                e.preventDefault();

                movePageNumbersRight($(this),0);
                gotopage(0);                
            });         

            // Event handler for 'Last' link
            $page_container.find('.last_link').click(function(e){
                e.preventDefault();
                var lastPage = total_page_no_links - 1;
                movePageNumbersLeft($(this),lastPage);
                gotopage(lastPage);             
            });         

            // Event handler for 'Prev' link
            $page_container.find('.previous_link').click(function(e){
                e.preventDefault();
                showPrevPage($(this));
            });


            // Event handler for 'Next' link
            $page_container.find('.next_link').click(function(e){
                e.preventDefault();             
                showNextPage($(this));
            });

            // Event handler for each 'Page' link
            $page_container.find('.page_link').click(function(e){
                e.preventDefault();
                gotopage($(this).attr('longdesc'));
            });         

            // Goto the required page
            gotopage(parseInt(options.start_page));
            toggleMoreLess();
            if(!options.wrap_around)
                tagNextPrev();
        });

        function showPrevPage(e){
            new_page = parseInt(meta.data(current_page)) - 1;                       

            // Check that we aren't on a boundary link
            if($(e).siblings('.active_page').prev('.page_link').length==true){
                movePageNumbersRight(e,new_page);
                gotopage(new_page);
            }else if(options.wrap_around){
                gotopage(total_page_no_links-1);   
            }

        };

        function showNextPage(e){
            new_page = parseInt(meta.data(current_page)) + 1;

            // Check that we aren't on a boundary link
            if($(e).siblings('.active_page').next('.page_link').length==true){      
                movePageNumbersLeft(e,new_page);
                gotopage(new_page);
            } else if (options.wrap_around) {
                gotopage(0);
            }

        };

        function gotopage(page_num){

            var ipp = parseInt(meta.data(items_per_page));

            var isLastPage = false;

            // Find the start of the next slice
            start_from = page_num * ipp;

            // Find the end of the next slice
            end_on = start_from + ipp;
            // Hide the current page    
            var items = $items.hide().slice(start_from, end_on);

            items.show();

            // Reassign the active class
            $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);                                      

            // Set the current page meta data                           
            meta.data(current_page,page_num);

            $page_container.find(options.nav_info_id).html(options.nav_label_info.replace("{0}",start_from+1).
                    replace("{1}",start_from + items.length).replace("{2}",$items.length));

            // Hide the more and/or less indicators
            toggleMoreLess();

            // Add a class to the next or prev links if there are no more pages next or previous to the active page
            tagNextPrev();
        };  

        // Methods to shift the diplayed index of page numbers to the left or right
        function movePageNumbersLeft(e, new_p){
            var new_page = new_p;

            var $current_active_link = $(e).siblings('.active_page');

            if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){

                $nav_panels.each(function(){
                            $(this).children('.page_link')
                                .hide() // Hide all the page links
                                .slice(parseInt(new_page - options.num_page_links_to_display + 1) , new_page + 1)
                                .show();        
                            });
            }

        } 

        function movePageNumbersRight(e, new_p){
            var new_page = new_p;

            var $current_active_link = $(e).siblings('.active_page');

            if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){

                $nav_panels.each(function(){
                            $(this).children('.page_link')
                                .hide() // Hide all the page links
                                .slice( new_page , new_page + parseInt(options.num_page_links_to_display))
                                .show();
                            });
            }
        }

        // Show or remove the ellipses that indicate that more page numbers exist in the page index than are currently shown
        function toggleMoreLess(){

            if(!$nav_panels.children('.page_link:visible').hasClass('last')){                   
                $nav_panels.children('.more').show();
            }else {
                $nav_panels.children('.more').hide();
            }

            if(!$nav_panels.children('.page_link:visible').hasClass('first')){
                $nav_panels.children('.less').show();
            }else {
                $nav_panels.children('.less').hide();
            }           
        }

        /* Add the style class ".no_more" to the first/prev and last/next links to allow custom styling */
        function tagNextPrev() {
            if($nav_panels.children('.last').hasClass('active_page')){
                $nav_panels.children('.next_link').add('.last_link').addClass('no_more ' + jquery_ui_disabled_class);
            } else {
                $nav_panels.children('.next_link').add('.last_link').removeClass('no_more ' + jquery_ui_disabled_class);
            }

            if($nav_panels.children('.first').hasClass('active_page')){
                $nav_panels.children('.previous_link').add('.first_link').addClass('no_more ' + jquery_ui_disabled_class);
            } else {
                $nav_panels.children('.previous_link').add('.first_link').removeClass('no_more ' + jquery_ui_disabled_class);
            }
        }

    };

})(jQuery);

Answer 1

I don't think it is a JS setting - at least, "pager" is not mentioned anywhere in your JS code. Here are some solutions try them individually to see if one works for you...

1) Raw css fix (put this as low as you can in CSS output):

#pager.pager { position: relative !important; }

2a) jQuery force style (as late in JS output as possible:

$(document).ready(function($){
    //force element with ID & class of pager to relative pos.
    $("#pager.pager").attr("style","position:relative !important;"); 
});

2b) jQuery remove attribute likely to cause abs. position

$(document).ready(function($){
    //remove position attribute from element with id and class of pager
    $("#pager.pager").removeAttr("position");
});

3) HTML - check if HTML element has position=absolute as an attribute

• If not, it's a JS issue because that attribute is applied dynamically.
• If yes, remove it.

Note your original html has a position ATTRIBUTE of "absolute". That means there is probably code that isn't listed which is looking for that attribute.

Generally, it seems like the accepted practice around here is complete code samples or JS bins. You might need to do dig for more code - there are missing pieces here.