bootstrap-table.js adds a method to implement the function of jumping to page xx

This article mainly introduces the bootstrap-table.js extension paging toolbar and adds the function of jumping to page xx. Since the editor's level is at the dom level, this extension only supports tables on the page. If you have good Suggestions are welcome and I hope it can help everyone.

【Related video recommendation: Bootstrap tutorial】

New project, I am going to use the bootstrap-table control to display the table on the page, but I have no choice. The paging toolbar of this control does not have the function of jumping to page xx. In order to adapt to the annoying needs of the company's artists (artists who can only produce pictures, but ask me for this and that), I bit the bullet and changed the bootstrap-table. The source code implements this function.

Note: Since my js level remains at the dom level, this extension only supports a single table on the page. That is to say, 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

ok, cover the above code into the following code

  html.push(&#39;</p>&#39;,
        &#39;<p class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></p>&#39;,
        &#39;<p class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</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;);

At this point, the source code is modified

2. , then, add the following class in the global css file

.pageBtn {
  
}
.pageNum {
  width: 40px;
  border-radius: 3px;
}
.goPage {
  float: right;
  margin-left: 5px;
  margin-top: 13px;
  height: 30px;
}

If you need to customize the button style, you can define it yourself in pgeBtn

3. Add the jump method in the js file

function toPage() {
  var pageNum = $("#pageNum").val();
  if (pageNum) {
    $('#table').bootstrapTable('selectPage', parseInt(pageNum));
  }
}

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:

Related recommendations:

About ajax to jump to a new jsp page Method sharing

How to use JS to determine the current domain name and jump to the specified page

The path problem after Servlet jumps to the JSP page is related explain

The above is the detailed content of bootstrap-table.js adds a method to implement the function of jumping to page xx. For more information, please follow other related articles on the PHP Chinese website!