jQuery分頁插件未突出顯示第一頁

Question

在此jQuery代碼這個插件，有一個叫做選項activepage我解釋這是選項應該強調通過添加CSS類給出的第一個/活動頁面.selected-page 。 但這不會發生，僅在單擊時點亮。

執行此腳本后，如何使第一頁點亮？

 (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); $(document).ready(function() { $('#tableData').paging({ limit: 3, activePage: 1 }); }) 

 .paging-nav { text-align: left; padding-top: 2px; } .paging-nav a { margin: auto 1px; text-decoration: none; display: inline-block; padding: 1px 7px; background: #000; color: #abdae2; border-radius: 3px; } .paging-nav .selected-page { background: #abdae2; font-weight: bold; color: #000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script> <table id="tableData" class="table table-bordered table-striped"> <thead> <tr> <th>id</th> <th>first name</th> <th>surname</th> <th>number</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Frank</td> <td>Shoulder</td> <td>1246</td> </tr> <tr> <td>2</td> <td>John</td> <td>Jameson</td> <td>4564</td> </tr> <tr> <td>3</td> <td>Philip</td> <td>Jenkins</td> <td>4456</td> </tr> <tr> <td>4</td> <td>Maria</td> <td>Carlston</td> <td>4456</td> </tr> <tr> <td>5</td> <td>Julia</td> <td>Tampelton</td> <td>1246</td> </tr> <tr> <td>6</td> <td>Jane</td> <td>Conor</td> <td>4456</td> </tr> <tr> <td>7</td> <td>Susan</td> <td>Crane</td> <td>1246</td> </tr> <tr> <td>8</td> <td>Lucas</td> <td>Fenric</td> <td>4456</td> </tr> <tr> <td>8</td> <td>Mark</td> <td>Fenric</td> <td>4456</td> </tr> <tr> <td>9</td> <td>Hilde</td> <td>Mayer</td> <td>4456</td> </tr> <tr> <td>10</td> <td>John</td> <td>Tron</td> <td>1246</td> </tr> <tr> <td>11</td> <td>Hans</td> <td>Stark</td> <td>4564</td> </tr> </tbody> </table> 

Answer 1

我已經根據活動頁面添加了課程。 請檢查activePage

 (function($) { $(function() { $.widget("zpd.paging", { options: { limit: 5, rowDisplayStyle: 'block', activePage: 1, 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), "class": this.options.activePage && i == (this.options.activePage - 1) ? "selected-page":"" }).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); $(document).ready(function() { $('#tableData').paging({ limit: 3, activePage: 1 }); }) 

 .paging-nav { text-align: left; padding-top: 2px; } .paging-nav a { margin: auto 1px; text-decoration: none; display: inline-block; padding: 1px 7px; background: #000; color: #abdae2; border-radius: 3px; } .paging-nav .selected-page { background: #abdae2; font-weight: bold; color: #000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script> <table id="tableData" class="table table-bordered table-striped"> <thead> <tr> <th>id</th> <th>first name</th> <th>surname</th> <th>number</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Frank</td> <td>Shoulder</td> <td>1246</td> </tr> <tr> <td>2</td> <td>John</td> <td>Jameson</td> <td>4564</td> </tr> <tr> <td>3</td> <td>Philip</td> <td>Jenkins</td> <td>4456</td> </tr> <tr> <td>4</td> <td>Maria</td> <td>Carlston</td> <td>4456</td> </tr> <tr> <td>5</td> <td>Julia</td> <td>Tampelton</td> <td>1246</td> </tr> <tr> <td>6</td> <td>Jane</td> <td>Conor</td> <td>4456</td> </tr> <tr> <td>7</td> <td>Susan</td> <td>Crane</td> <td>1246</td> </tr> <tr> <td>8</td> <td>Lucas</td> <td>Fenric</td> <td>4456</td> </tr> <tr> <td>8</td> <td>Mark</td> <td>Fenric</td> <td>4456</td> </tr> <tr> <td>9</td> <td>Hilde</td> <td>Mayer</td> <td>4456</td> </tr> <tr> <td>10</td> <td>John</td> <td>Tron</td> <td>1246</td> </tr> <tr> <td>11</td> <td>Hans</td> <td>Stark</td> <td>4564</td> </tr> </tbody> </table> 

Answer 2

您可以如下添加類：

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

初始化插件后（分頁）。

 (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); $(document).ready(function() { $('#tableData').paging({ limit: 3, activePage: 1 }); $('.paging-nav a[data-page="0"]').addClass('selected-page'); }) 

 .paging-nav { text-align: left; padding-top: 2px; } .paging-nav a { margin: auto 1px; text-decoration: none; display: inline-block; padding: 1px 7px; background: #000; color: #abdae2; border-radius: 3px; } .paging-nav .selected-page { background: #abdae2; font-weight: bold; color: #000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script> <table id="tableData" class="table table-bordered table-striped"> <thead> <tr> <th>id</th> <th>first name</th> <th>surname</th> <th>number</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Frank</td> <td>Shoulder</td> <td>1246</td> </tr> <tr> <td>2</td> <td>John</td> <td>Jameson</td> <td>4564</td> </tr> <tr> <td>3</td> <td>Philip</td> <td>Jenkins</td> <td>4456</td> </tr> <tr> <td>4</td> <td>Maria</td> <td>Carlston</td> <td>4456</td> </tr> <tr> <td>5</td> <td>Julia</td> <td>Tampelton</td> <td>1246</td> </tr> <tr> <td>6</td> <td>Jane</td> <td>Conor</td> <td>4456</td> </tr> <tr> <td>7</td> <td>Susan</td> <td>Crane</td> <td>1246</td> </tr> <tr> <td>8</td> <td>Lucas</td> <td>Fenric</td> <td>4456</td> </tr> <tr> <td>8</td> <td>Mark</td> <td>Fenric</td> <td>4456</td> </tr> <tr> <td>9</td> <td>Hilde</td> <td>Mayer</td> <td>4456</td> </tr> <tr> <td>10</td> <td>John</td> <td>Tron</td> <td>1246</td> </tr> <tr> <td>11</td> <td>Hans</td> <td>Stark</td> <td>4564</td> </tr> </tbody> </table>