Bootstrap-table table client paging example

I. Introduction

1. Using the bootstrap-table form plugin, as long as there is a data source in json data format, you can do whatever you want

2. This blog only shows examples of front-end paging (PS: There are two paging methods for this plugin: front-end paging and server-side paging )

3. Not much nonsense, the example begins

2. Example demo

1. Introduce the resource section

<script src="http://code.jquery.com/jquery-latest.js"></script>  
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">  
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>  

2.html+js

<table id="table"></table>    
        <script type="text/javascript">    
        //No request, write 50 pieces of data by yourself    
        var datas = [];    
        for(var i=0;i<50;i++){    
            datas[i]={"name":i+"号","age":i+"岁"}    
        }    
            $('#table').bootstrapTable({    
                pagination: true,    
                pageSize: 20,    
                pageNumber:1,    
                sidePagination:'client',  
                paginationFirstText: "Home",  
                paginationPreText: "Previous page",  
                paginationNextText: "Next page",  
                paginationLastText: "Last page",  
                iconSize: 'pager',  
                columns: [{field:"name",title:"编号",align:"center",valign:"middle",sortable:"true"},    
                {field:"age",title:"年龄",align:"center",valign:"middle",sortable:"true"}],    
                date:dates,    
            });                                               
        </script>    

3. Summary

The demo can be used to load data locally (that is, the front-end is loaded after the data source is obtained). Of course, the format of the obtained data source must be in the json data format! Do not

I haven't systematically referenced this plugin for a long time. This time I will review it. The demo is simple but practical.

PS: I'm so nervous, so nervous, this is the first time to share the pose~~