jQuery分页插件初始加载不高亮指定页的解决方法咨询

Got it, let's fix this issue with your jQuery paging plugin. The problem right now is that your activePage configuration sets the initial page content correctly, but it doesn't apply the selected-page highlight until someone clicks a page number. Here's how to fix this step by step, with clean, maintainable changes:

Step 1: Use the Configured activePage on Initialization #

Right now, the plugin hardcodes showPage(0) in the _create method, ignoring your activePage setting. Update it to use the configured value instead:

_create: function() {
    var rows = $("tbody", this.element).children();
    this.options.rows = rows;
    this.options.rowDisplayStyle = rows.css('display');
    var nav = this._getNavBar();
    this.element.after(nav);
    // Use the activePage from your config instead of defaulting to 0
    this.showPage(this.options.activePage);
},

Step 2: Add Highlight Logic to the showPage Method #

The showPage method is responsible for updating which rows are visible—let's extend it to also handle highlighting the correct page link. This centralizes the logic so it runs every time the page changes (whether on init or user click):

showPage: function(pageNum) {
    var num = pageNum * 1; // Ensure it's numeric
    this.options.activePage = num;
    var rows = this.options.rows;
    var limit = this.options.limit;

    // Show/hide rows based on current page
    for (var i = 0; i < rows.length; i++) {
        if (i >= limit * num && i < limit * (num + 1)) {
            $(rows[i]).css('display', this.options.rowDisplayStyle);
        } else {
            $(rows[i]).css('display', 'none');
        }
    }

    // Highlight the active page link
    var nav = this.element.next('.paging-nav');
    // Remove selected class from all page links
    nav.find('a[data-page]').removeClass('selected-page');
    // Add selected class to the current page link
    nav.find('a[data-page="' + num + '"]').addClass('selected-page');
},

Step 3: Simplify the pageClickHandler #

Now that the highlight logic lives in showPage, we can remove the manual class manipulation from the click handler to avoid redundant code:

pageClickHandler: function(event) {
    event.preventDefault();
    var pageNum = $(event.target).attr('data-page');
    this.showPage(pageNum);
},

Full Modified Plugin Code #

(function($) { 
    $(function() { 
        $.widget("zpd.paging", { 
            options: { 
                limit: 5, 
                rowDisplayStyle: 'block', 
                activePage: 0, 
                rows: [] 
            }, 
            _create: function() { 
                var rows = $("tbody", this.element).children(); 
                this.options.rows = rows; 
                this.options.rowDisplayStyle = rows.css('display'); 
                var nav = this._getNavBar(); 
                this.element.after(nav); 
                // Use configured activePage on initialization
                this.showPage(this.options.activePage); 
            }, 
            _getNavBar: function() { 
                var rows = this.options.rows; 
                var nav = $('<div>', { class: 'paging-nav' }); 
                for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) { 
                    this._on($('<a>', { href: '#', text: (i + 1), "data-page": (i) }).appendTo(nav), { click: "pageClickHandler" }); 
                } 
                // Create previous link 
                this._on($('<a>', { href: '#', text: '<<', "data-direction": -1 }).prependTo(nav), { click: "pageStepHandler" }); 
                // Create next link 
                this._on($('<a>', { href: '#', text: '>>', "data-direction": +1 }).appendTo(nav), { click: "pageStepHandler" }); 
                return nav; 
            }, 
            showPage: function(pageNum) { 
                var num = pageNum * 1; // Ensure numeric value
                this.options.activePage = num; 
                var rows = this.options.rows; 
                var limit = this.options.limit; 
                for (var i = 0; i < rows.length; i++) { 
                    if (i >= limit * num && i < limit * (num + 1)) { 
                        $(rows[i]).css('display', this.options.rowDisplayStyle); 
                    } else { 
                        $(rows[i]).css('display', 'none'); 
                    } 
                }
                // Add active page highlight logic
                var nav = this.element.next('.paging-nav');
                nav.find('a[data-page]').removeClass('selected-page');
                nav.find('a[data-page="' + num + '"]').addClass('selected-page');
            }, 
            pageClickHandler: function(event) { 
                event.preventDefault(); 
                var pageNum = $(event.target).attr('data-page'); 
                this.showPage(pageNum); 
            }, 
            pageStepHandler: function(event) { 
                event.preventDefault(); 
                // Get direction and ensure it's numeric
                var dir = $(event.target).attr('data-direction') * 1; 
                var pageNum = this.options.activePage + dir; 
                // Trigger click only if page is within valid range
                if (pageNum >= 0 && pageNum < Math.ceil(this.options.rows.length / this.options.limit)) { 
                    $("a[data-page=" + pageNum + "]", $(event.target).parent()).click(); 
                } 
            } 
        }); 
    }); 
})(jQuery); 

$(document).ready(function() { 
    $('#tableData').paging({ limit: 3, activePage: 1 }); 
});

Why This Works #

• Initialization: We now start on the exact page specified in your activePage config, and the highlight applies immediately.
• Centralized Logic: All page highlight code lives in one place, so you won't have to update multiple spots if you change the highlight behavior later.
• Cleaner Code: Removing duplicate class manipulation makes the plugin easier to read and maintain.

内容的提问来源于stack exchange，提问作者Fjott