There are many kinds of foreground table plug-ins. datatable and gridtable have been used before. To try a new one, we choose bootstrap table. The main purpose is to design the interface with bootstrap, so we choose this one. The official website of bootstrap table is http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ , which has a detailed description of various problems in the table. OK, let's not talk about it. Let's explain the steps of bootstrap table writing in detail.
1. Import file

<!-- Introduce bootstrap css file -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- Introduce bootstrap table css file -->
<link href="../css/bootstrap-table.css" rel="stylesheet">
<!-- Introduce jquery file -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.js"></script>
<!-- Introduce Chinese language pack -->
<script src="../js/bootstrap-table-locale-all.js"></script>

Download these files from the Internet and put them under the specified folder
2. bootstrap table js in order to facilitate the application in the future, I extract js and put it into a separate js, and then pass parameters. As long as the parameters passed meet the requirements, the modified table can be displayed on the interface.

/**
 * bootstrap Paging Methods
 */
var TableInitSearch = function() {
    var oTableInit = new Object();
    //oTableInit.bootstrapTable('destroy');  
    // Initialize Table
    oTableInit.Init = function(id, url,columns,searchArgs) {
        //---Destroy form first---
        $(id).bootstrapTable('destroy');  
        $(id).bootstrapTable({
            url : url, // Request background URL (*)
             method: 'post',
             contentType: "application/x-www-form-urlencoded",
             //Query settings
             /* queryParamsType The default value of is' limit '. By default, the parameters passed to the server are: offset,limit,sort
                               Set to '' the parameters passed to the server in this case are: pageSize,pageNumber */
             queryParamsType:'', 
             striped : false, // Display color separation between lines
             cache : false, // Whether to use cache is true by default, so you need to set this property (*)
             toolbar : '#toolbar', // Which container does the tool button use
             queryParams: function queryParams(params) {  
               var param = {  
                   pageNumber: params.pageNumber,    //pageNumber when received in the background
                   pageSize: params.pageSize //pageSize when receiving in the background
               }; 
               for(var key in searchArgs){
                   param[key]=searchArgs[key]//Parameters passed to the background when querying here
               }  
               return param;                   
             }, 
             //[other settings]
             locale:'zh-CN',//Chinese support
             pagination: true,//Turn on paging (*)
             sortOrder : "asc", // sort order
             pageNumber:1,//Initialize load first page, default first page
             pageSize: 10,//Record lines per page (*)
             pageList: [ 10, 25, 50, 100 ], // Number of rows per page to choose from (*)
             sidePagination: "server", //Paging mode: client paging, server paging (*)
             search : false, // Whether to display table search? This search is a client search and will not enter the server. Therefore, it is not meaningful for me
             strictSearch : true,
             minimumCountColumns : 2, // Minimum number of columns allowed
             clickToSelect : true, // Enable Click to select row
             showRefresh:false,//Refresh button
             //[style setting]
              height: 500,//Height of table
             cardView : false, // Show detailed view or not
             detailView : false, // Show parent-child table or not
            columns : columns,
        });

    };
    return oTableInit;
};

It can be seen from the above figure that three parameters, id, url to the background and column, need to be passed.
3. jsp interface

<table id="table"></table>

<script>
var id = "#table";
var  url = "${pageContext.request.contextPath}/user/userlist";
var  columns = [
                {
                    field : 'id',
                    title : 'User number',
                    align : 'center',
                    valign : 'middle'
                },
                {
                    field : 'name',
                    title : 'Full name',
                    align : 'center',
                    valign : 'middle'
                },
                {
                    field : 'age',
                    title : 'Age',
                    align : 'center',
                    valign : 'middle'
                }];
//1. Initialize Table
var oTable = new TableInitSearch();
var searchArgs = {
        id:null,
        name:null
}
//Interface initialization
$(function() {
            oTable.Init(id, url, columns, searchArgs);
        });
function toSearch() {
var name= $("input[name='name']").val();//Get the name value entered in the input box
var id= $("input[name='id']").val();//Get the id value entered in the input box
    searchArgs = {
        id: id,
        name: name
    }
    oTable.Init(id, url, columns, searchArgs);                          
} 
</script>

4. Background conctroller

@RequestMapping("/userlist")
@ResponseBody 
//ajax call
public Map<String, Object> getUsers(Integer pageSize,
        Integer pageNumber,String name,String id) {
    Map<String, Object> result = new HashMap<String, Object>();
    List<User> userlist = ........//Here is the background call to get the user's method
    result.put("total", total);//Get total number of lists
    result.put("rows", userlist);/Get number of userslist
}

As expected, I don't know if I don't write. Once I write, I really understand that others really don't write. Some things are really subconscious neglect.