BootStrap table Use method Analysis _javascript Skill

The example of this article for everyone to share the use of bootstrap table for your reference, the specific contents are as follows

Bootstrap table Git address:https://github.com/wenzhixin/bootstrap-table

Introducing Files

<link rel= "stylesheet" href= ". /bower_components/bootstrap/dist/css/bootstrap.min.css "/>
<link rel=" stylesheet "href=". /bower_components/bootstrap-table-develop/dist/bootstrap-table.min.css "/> 
<script type=" text/ JavaScript "src=". /bower_components/jquery/dist/jquery.min.js "></script>
<script type=" Text/javascript "src=". /bower_components/bootstrap/dist/js/bootstrap.min.js "></script>
<script type=" Text/javascript " Src= ". /bower_components/bootstrap-table-develop/dist/bootstrap-table.js "></script>
<script type=" text /javascript "src=". /bower_components/bootstrap-table-develop/dist/locale/bootstrap-table-zh-cn.js "></script> 

How to use

<table data-toggle= "table" data-url= "Data.json" >
  <thead>
  ... 
  </thead>

Or

<table id= "table" class= "mychar1-table" ></table>
$ (' #table '). bootstraptable ({
  URL: ' Data.json ' 
 }); 

The second is a better understanding of the point:

var $table = $ (' #mychart1 ');
$table. bootstraptable ({url:reqprojectname_w+ ' list/spectrumlist ', DataType: "JSON", toolbar: ' #toolbar ',//tool button with which container Striped:true,//whether to display row interval color singleselect:false, pagination:true,//pagination pagenumber:1,//Initialize load first page, default first page pagesize:10,/ /number of rows per page (*) PageList: [10, 25, 50, 100],//Available in rows per page (*) Search:false,//Display search box sidepagination: "Server",//server-side processing paging Colum
 NS: [{field: ' id ', title: ' Serial Number '}, {field: ' Liushuiid ', title: ' Transaction Number '}, {field: ' OrderID ', title: ' Order number ' }, {field: ' Receivetime ', title: ' Transaction Time '}, {field: ' Price ', title: ' Amount '}, {field: ' Coin_credit ', title:
  ' Put coins '}, {field: ' Bill_credit ', title: ' Put Money '}, {field: ' Changes ', title: ' Change '}, {field: ' Tradetype ', Title: ' Transaction type '},{field: ' Goodmachineid ', title: ' Freighter Number '},{field: ' Inneridname ', title: ' Goods Zheng Taigu '},{field: ' Go
 Odsname ', title: ' Product Name '}, {field: ' Changestatus ', title: ' Pay '},{field: ' Sendstatus ', title: ' Ship '}, {title: ' Operations ', field: ' ID ', align: ' center ', formatter:function (value,row,index) {var e = ' <a href= ' # ' 
   mce_href= "#" onclick= "edit (\ ' + row.id + ')" > Edit </a>; 
   var d = ' <a href= ' # "mce_href=" # "onclick=" del (\ "+ row.id + ' \") "> Delete </a>"; 
  return e+d;  } 
  }
  ]
 });

More information

$ (function () {//1. initialize table var otable = new Tableinit ();
 
 Otable.init ();
 2. Initialize button's Click event/* var obuttoninit = new Buttoninit (); Obuttoninit.init ();
 
 
 */
 
 });
 var tableinit = function () {var otableinit = new Object (); Initializes the table Otableinit.init = function () {$ (' #tradeList '). bootstraptable ({url: '/vendermanager/tradelist ',//request background URL (*) method: ' Post ',//Request Mode (*) toolbar: ' #toolbar ',//tool button with which container striped:true,//whether to display row interval color cache:false,/   /whether to use the cache, the default is true, so it is generally necessary to set this property (*) Pagination:true,//whether to display the paging (*) Sortable:false,//whether to enable sorting SortOrder: "ASC", Sort queryparams:otableinit.queryparams,//Pass Parameters (*) sidepagination: "Server",//Paging: Client client paging, Server service end Paging (*) p Agenumber:1,//initialization load first page, default first page pagesize:50,//page record rows (*) PageList: [10, 25, 50, 100],//number of rows available per page (*) strictsear Ch:true, Clicktoselect:true,//whether to enable clicking on the selected row height:460,//row height, if the Height property is not set, the table automatically finds the table height according to the number of records UNIQUEID: "id",// Unique identification for each row, general primary key column CardView: False,//whether to display the detailed view detailview:false,//whether to display the parent-child table columns: [{field: ' id ', title: ' Ordinal '}, {field: ' Liush uiID ', title: ' Transaction Number '}, {field: ' OrderID ', title: ' Order Number '}, {field: ' Receivetime ', title: ' Transaction Time '}, {field: ' Price ', title: ' Amount '}, {field: ' Coin_credit ', title: ' Put Coins '}, {field: ' Bill_credit ', ti Tle: ' Put money '}, {field: ' Changes ', title: ' Change '}, {field: ' Tradetype ', Title: ' Transaction type '},{field: ' Goo
  Dmachineid ', title: ' Freighter Number '},{field: ' Inneridname ', title: ' Goods Zheng Taigu '},{field: ' Goodsname ', title: ' Product Name '
 }, {field: ' Changestatus ', title: ' Pay '},{field: ' Sendstatus ', title: ' Shipping '},]};
 
 }; Parameters otableinit.queryparams = function (params) {var temp = {//Here's the name of the key and the variable name of the controller must always, this side changes, the controller also needs to change to the same limit:par Ams.limit,//Page size Offset:params.offset,//number sdate: $ ("#stratTime"). Val (), Edate: $ ("#endTime"). Val (), Sellerid: $ ("#sellerid"). Val (), OrderID: $("#orderid"). Val (), Cardnumber: $ ("#CardNumber"). Val (), Maxrows:params.limit, Pageindex:params.pageNumber, Portid : $ ("#portid"). Val (), Cardnumber: $ ("#CardNumber"). Val (), tradetype:$ (' input:radio[name= ' tradetype ']:checked '). val
  (), success:$ (' Input:radio[name= "Success"]:checked "). Val (),};
 return temp;
 };
 return otableinit; };

Request parameters

Otableinit.queryparams = function (params) {
  var temp = {//Here's the name of the key and the variable name of the controller must always be changed here, the controller also needs to be changed to the same
  limit: Params.limit,//The first few records
  Offset:params.offset,//show how many records a page
  sdate: $ ("#stratTime"). Val (),
 
  };
  return temp;
 

Background assembling test data

Jsonarray jsondata=new Jsonarray ();
 Jsonobject Jo=null;
 for (int i=0,len=10;i<len;i++) {
  jo=new jsonobject ();
  Jo.put ("id", i+ (j + +));
  Jo.put ("Liushuiid", i+1);
  Jo.put ("price");
  Jo.put ("Mobilephone");
  Jo.put ("Receivetime");
  Jo.put ("Tradetype");
  Jo.put ("Changestatus", "success");
  Jo.put ("Sendstatus", "failure");
  Jo.put ("Bill_credit");
  Jo.put ("Goodroadid");
  Jo.put ("Smscontent");
  Jo.put ("OrderID");
  Jo.put ("Goodsname");
  Jo.put ("Inneridname");
  Jo.put ("Xmlstr");
  Jsondata.add (Jo);
 }
 int totalcount=97;
 Jsonobject jsonobject=new jsonobject ();
 Jsonobject.put ("Rows", jsondata);//jsonarray
 jsonobject.put ("Total", totalcount);//Record number

Paging receive

int pageindex=0;
int offset = Toolbox.filterint (json1.getstring ("offset"));
int limit = Toolbox.filterint (json1.getstring ("limit")); 
if (offset!=0) {
 pageindex = offset/limit;
}
 pageindex+= 1;//The first few pages <br> ....

When paging, bootstrap table passes two paging fields to the back end: limit, offset, which represents the number of pages per page and defaults to 10, which represents the offset of the data when paging.

While searching, the search field is passed to the back end, which indicates the specific search content.

The server-side returned data also includes page (page), total (amount of data) two fields, the front end to be based on these two fields paging.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

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.