Now, an app management and background configuration system needs to be customized for different cities, and some background data are also displayed and manipulated, so each module will basically have the form of a table. The advantage of this is intuitive and convenient operation.The bootstrap tables plug-in is undoubtedly the bootstrap tables, the powerful documentation is complete, and our project is also based on the bootstrap layout, so I chose him, and then pasted some project code to show (for reference only) and took notes for myself.

First, the bootstrap Tab is used to toggle different tables for display, and the toggle menu code is as follows:

1 　　　　<div class="report-count">Number of times reported: ${count}second</div>
2       <ul class="report-btn nav nav-tabs" id="myTab" >
3              <li class="pending active"><a href="#padding" onclick="freashTable(0)"  data-toggle="tab">To be processed: ${stateCountList[0]}second</a><i class=""></i></li>
4              <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">The report is established: ${stateCountList[1]}second</a></li>
5              <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">Failure to report: ${stateCountList[2]}second</a></li>
6        </ul> 

Believed to be familiar with bootstrap, add data-toggle=tab to each tag that needs to be switched and add an anchor to match the corresponding switching sub-content anchor: href= #padding, switch the corresponding word content code as follows:

　　<div class="table-view tab-content">
                        <div class=" tab-pane fade in active"  id="padding">
                            <div class="table-header clear">
                                <c:forEach items="${complainCount1}" varStatus="i" var="c" >
                                    <div>${c.complain_reason}: ${c.count}second</div>
                                </c:forEach>
                            </div>
                            <div class="line addStyle"></div>
                            <div>
                                <table class="table"></table>
                            </div>
                        </div>
                        <div class="tab-pane fade"  id="success-report">
                            <div class="table-header clear">
                                <c:forEach items="${complainCount2}" varStatus="i" var="c" >
                                    <div>${c.complain_reason}: ${c.count}second</div>
                                </c:forEach>
                            </div>
                            <div class="line addStyle"></div>
                            <div>
                                <table class="table"></table>
                            </div>
                        </div>
                        <div class="tab-pane fade"  id="fail-report">
                            <div class="table-header clear">
                                <c:forEach items="${complainCount3}" varStatus="i" var="c" >
                                    <div>${c.complain_reason}: ${c.count}second</div>
                                </c:forEach>
                            </div>
                            <div class="line addStyle"></div>
                            <div>
                                <table class="table"></table>
                            </div>
                        </div>
                    </div>

By setting the id #padding corresponding to the anchor point above for each child content element that needs to be switched, and don't forget to add tab-content to the outer container, and class to the child element container (tab-pane fade in active), active is selected by default.Each subcontent has a table element, so here is the table we need, and switching each tab refreshes the table data that displays it.Here we load the data by dynamically generating tables.

 1 var $table=$('.table')
 2 function initTable(index){
 3      $table.bootstrapTable({
 4         url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index,  //Request Data Address url
 5         height: getHeight(),  //Get row height
 6         striped: true,  //Set to true Will have interlaced discoloration effect
 7         search: true, //by true There will be a search box
 8         showRefresh: true, //by true There is a refresh button
 9         showColumns: true,  //Whether to show the content column drop-down box
10         minimumCountColumns: 2,//The Content Column drop-down box is hidden when the number of columns is less than this value
11         clickToSelect: true,  //Click Row Yes checkbox perhaps rediobox Selected
12         detailView: true,  //Set to true Detailed page mode can be displayed. table The first line will have+Number, click for more detailed line information
13         detailFormatter: 'detailFormatter',  //Format the view in detail page mode.
14         pagination: true, //Show with page breaks
15         paginationLoop: false,  //Circular Paging
16         sidePagination: 'server',  //Set where to page, optional value is 'client' perhaps 'server'. Set up 'server'The server data address must be set ( url)Or rewrite ajax Method
17         silentSort: false,  //Set to false Sort items are automatically remembered when the Page Break button is clicked.Only in sidePagination Set to server Effective at 19         escape: true, //Escape the HTML string, replace the &, <, >,', `, and'characters.
20         searchOnEnterKey: true, //Set to true Press Enter to trigger the search method, otherwise automatically trigger the search method
21         idField: 'systemId', //Specify Primary Key
22         maintainSelected: true, //Set to true When you click on the Page Break button or the Search button, you will remember checkbox Selection
23         toolbar: '#toolbar', //One jQuery Selector, specifying custom toolbar 
24         columns: [
25                 {field: 'complain_reason', title: 'Report type',align: 'center'},
26                 {field: 'nick_name', title: 'informant',align: 'center'},
27                 {field: 'create_time', title: 'Reporting time',formatter:'timeFormat' },
28                 {field: 'complain_state', title: 'Reporting Status',formatter:'stateFormat'}
29                 {field: 'action', title: 'operation', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
30             ]
31         });
32 }    

This is the function that initializes the table. Index is passed to request different addresses to refresh different tables when switching, because there is onclick event function freashTable (index) in each tab switching menu. I have commented on all the configurations used by the table in the code above. For more detailed configurations, see Official Network Configuration (http://bootstrap-table.wenzhixin.net.cn/zh)-cn/documentation/).columns configures each row, field is the field key value to be displayed for each column, title is the header of each column, formatter is the custom function to format each column, and only the time formatting function code is shown below:

1 function timeFormat(value,row,index){
2     value = row.modifyTime==null?value:row.modifyTime;
3     return new Date(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,' ');
4 }

The line where the corresponding field is action is the action button, and the code for the formatting action button is as follows:

1 function actionFormatter(value, row, index) {
2     return [
3         '<a class="update" href="javascript:;" onclick="editdateAction(\'' + row.systemId + '\')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
4         '<a class="delete" href="javascript:;" onclick="deleteRowAction(\''+row.systemId+'\')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
5     ].join('');
6 }

At the same time, the paging bootstrap has provided a complete configuration (including the number of lines per page, paging buttons, total bars, total pages, etc.) but has not jumped to the specified line, so we need to write our own style to locate the corresponding paging column, but he has the relevant methods to provide it.

SelectectPage is to jump to the specified page, and we can do it by ourselves:

1 function goPage(){
2     var page=$('#pageNum').val();
3     $table.bootstrapTable('selectPage',page)
4 }

When using its methods, use $table.bootstrapTable('selectPage',page).