About using bootstrap-table.js to implement extended paging toolbar functionality-JS Tutorial-php.cn

About using bootstrap-table.js to implement extended paging toolbar functionality

亚连

Release： 2018-06-14 16:33:56

Original

1805 people have browsed it

This article mainly introduces the bootstrap-table.js extension paging toolbar and adds the function of jumping to page xx. Since my level is stuck at the dom level, this extension only supports tables on the page. If you have any questions, Suggestions are welcome to propose

new projects. I plan to use the bootstrap-table control to display the table on the page. Unfortunately, the paging toolbar of this control does not have the function of jumping to the xx page. In order to adapt to the company's art (only An artist who knows how to produce pictures, but asked me for this and that), bit the bullet and changed the source code of bootstrap-table to implement this function.

Note: Since my js level is still at the dom level, this extension only supports a single table on the page, which means that if the same page references bootstrap-table twice, the jump will be invalid.

If any gods from all walks of life have a more perfect solution, please leave a message and tell me so that I can learn from it.

I won’t go into details about how to reference controls. Baidu on the Internet has said it better than me. Let’s go directly to the source code.

1. Download the source code of bootstrap-table.js (be careful not to download min. The version I downloaded is: version: 1.11.0). In the source code, use '

  html.push(&#39;</p>&#39;,
         &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;,
         &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;,
         &#39;<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);

Copy after login

html.push('</p>', '<p class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></p>', '<p class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</p>', '<p class="pull-' + this.options.paginationHAlign + ' pagination">', '<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">', '<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >' + this.options.paginationPreText + '</a></li>');

Note that my table id is defined as table. You need to replace $('#table').bootstrapTable with your own defined id

or above, and it can be achieved. Enter the page number to jump. The rendering is as follows:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

The above is the detailed content of About using bootstrap-table.js to implement extended paging toolbar functionality. For more information, please follow other related articles on the PHP Chinese website!