Bootstrap table Use method detailed introduction _javascript skill

Bootstrap-table is a very useful form of plug-ins, providing a lot of tools and paging, search and other functions.

First we need the following files,

 <span style= "FONT-SIZE:18PX;" ><!--Bootstrap table--> <script type= "Text/javascript" src= "${pagecontext.request.contextpath}/res/" Jquery-1.10.2/jquery.js "></script> <!--bootstrap--> <link rel=" stylesheet "type=" Text/css "href=" ${pagecontext.request.contextpath}/res/bootstrap/css/bootstrap.css "/> <script type=" Text/javascript "src=" $ {pagecontext.request.contextpath}/res/bootstrap/js/bootstrap.js "></script> <link rel=" stylesheet " Type= "Text/css" href= "${pagecontext.request.contextpath}/res/bootstrap-table/bootstrap-table.css"/> < Script type= "Text/javascript" src= "${pagecontext.request.contextpath}/res/bootstrap-table/bootstrap-table.js" ></script> <!--bootstrap table Chinese package--> <script type= "Text/javascript" src= "${" Pagecontext.request.contextpath}/res/bootstrap-table/locale/bootstrap-table-zh-cn.js "></script></ Span> 

Chinese package seems to prevent some bugs

If you introduce these files individually and cause style errors, download the full bootstrap-table

The following is the loading of the bootstrap-table

<span style= "FONT-SIZE:18PX;" 
 ><script type= "Text/javascript" > $ (function () {//1. initialize table var otable = new Tableinit (); 
Otable.init (); 
 
 
}); 
 var tableinit = function () {var otableinit = new Object (); Initialize Table Otableinit.init = function () {$ (' #tb_departments '). bootstraptable ({url: ' ${pagecontext.request.cont Extpath}/alarminfo/list ',//Request background URL (*) method: ' Get ',//Request (*) toolbar: ' #toolbar ',//tool button with which container St Riped:false,//whether to display row interval color cache:false,//whether to use the cache, the default is true, so the general need to set this property (*) Pagination:true,//Whether it is obvious Page (*) Sortable:false,//whether to enable sorting SortOrder: "ASC",//Sort queryparams:otableinit.queryparams,//Pass parameters (  *) Sidepagination: "Server",//Paging mode: Client client paging, Server service end Paging (*) pagenumber:1,//Initialize load first page, default first page pageSize: 10,//per page of the number of rows (*) PageList: [10, 25, 50, 100],///selectable number of rows per page (*) Search:false,//whether to display a form search, this search is the client search, will not enter the service Business end, so that the sense of personal feeling is not strictsearch:trUE, SHOWCOLUMNS:TRUE,//whether to display all columns Showrefresh:false,//whether to display the refresh button minimumcountcolumns:2,//minimum allowable number of columns      Clicktoselect:true,//Whether to enable tap Select Row height:500,//row height, if the Height property is not set, the table automatically finds the table height uniqueId according to the number of records: "id", Unique identification of each row, general primary key column showtoggle:true,//whether to display the Detailed view and List view toggle button Cardview:true,//whether to display a detailed view Detailview:false ,//whether to display the parent-child table columns: [{checkbox:true}, {field: ' Id ', title: ' Number '}, {field: ' Name 
    
   ', title: ' Name '}, {field: ' Type ', title: ' Types '},{field: ' Time ', title: ' Times '} 
 ] 
  }); 
 
}; </script>  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.