JS分頁第一頁<a>活動分類

我有這個JS分頁代碼，幾乎就像我想要的那樣工作，除了我希望selected-page類被添加到第一個頁面號<a>之前它被點擊？現在只在當前頁面被點擊後才添加。JS分頁第一頁<a>活動分類

(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); 
       this.showPage(0); 
      }, 
      _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; //it has to be numeric 
       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'); 
        } 
       } 
      }, 
      pageClickHandler: function(event) { 
       event.preventDefault(); 
       $(event.target).siblings().attr('class', ""); 
       $(event.target).attr('class', "selected-page"); 
       var pageNum = $(event.target).attr('data-page'); 
       this.showPage(pageNum); 
      }, 
      pageStepHandler: function(event) { 
       event.preventDefault(); 
       //get the direction and ensure it's numeric 
       var dir = $(event.target).attr('data-direction') * 1; 
       var pageNum = this.options.activePage + dir; 

       //if we're in limit, trigger the requested pages link 
       if (pageNum >= 0 && pageNum < this.options.rows.length) { 
        $("a[data-page=" + pageNum + "]", $(event.target).parent()).click(); 
       } 



      } 
     }); 
    }); 
})(jQuery);

來源

2017-02-22 Fjott

你可以發佈你的HTML嗎？ –

在這裏，您_create功能你是顯示0

this.showPage(0);

您可以用替換此頁碼程序化點擊您的第一個<a>,

$("a[data-page='0']").click();

或簡單地添加類名稱，而不是點擊：

$("a[data-page='0']").addClass("selected-page");

來源

2017-02-22 21:25:32

沒有你的HTML，我不能告訴你一個開箱即用的解決方案。但是，您可以編寫jQuery：

$("a:first-child").addClass("selected-page");

或其他類似於此的選擇器。

來源

2017-02-22 21:20:20

我認爲，當你創建的頁面，你可以做這個鏈接

$('<a>', { 
    href: '#', 
    text: (i + 1), 
    "data-page": (i), 
    "class": i == 0 ? "selected-page" : "" <----- ADD THIS 
    })

來源

2017-02-22 21:23:15

JS分頁第一頁<a>活動分類

回答

相關問題