JS pagination первая страница <a> active class

Question

У меня есть код JG для разбивки на страницы, который работает почти так, как я хочу, кроме того, что я хочу, чтобы класс selected-page был добавлен к первому номеру страницы <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); 

Answer 1

Здесь в вашем _create функции вы показываете номер страницы 0.

this.showPage(0); 

Вы можете заменить это с программный нажмите на ваш первый <a>,

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

или просто добавьте к нему имя класса, а не нажмите:

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

Answer 2

Без вашего HTML, я не могу сказать вам решение, которое работает из коробки. Однако вы можете написать jQuery:

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

или другой подобный селектор.

Answer 3

я думаю, что вы можете сделать это при создании страниц ссылки

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