JS Component Bootstrap Table use method _javascript skills

Recently, customers put forward the demand, want to the original management system, do the optimization, through the mobile phone can also be a good show, think of 2 programs:

A scheme: Keep the original page, a new design for the mobile phone page, when the mobile phone access, into the m.zhy.com (Mobile page), PC device Access, into the www.zhy.com (PC page)

Plan B: Adopt bootstrap frame, replace the original page, automatically adapt to mobile phone, tablet, PC equipment

Adopt a scheme, need to design a set of interface, and want to write the interface for the page, taking into account the time and cost problems, so the project adopted a plan B

One, the effect shows

Second, BootStrap table simple Introduction

BootStrap table is a lightweight table plug-in that uses AJAX to get data in JSON format that is convenient for paging and data padding and supports internationalization
Iii. methods of Use

1, the introduction of JS, CSS

<!--CSS styles-->
<link href= "css/bootstrap/bootstrap.min.css" rel= "stylesheet" >
<link href= " Css/bootstrap/bootstrap-table.css "rel=" stylesheet ">
<!--js-->
<script src=" js/bootstrap/ Jquery-1.12.0.min.js "type=" Text/javascript "></script>
<script src=" js/bootstrap/ Bootstrap.min.js "></script>
<script src=" Js/bootstrap/bootstrap-table.js "></script>
<script src= "Js/bootstrap/bootstrap-table-zh-cn.js" ></script>

2. Table Data Fill

BootStrap table There are two ways to get data, one is to specify the data source through the table's Data-url property, and the other is to specify a URL to get the data through the JavaScript initialization table

<table data-toggle= "Table" >
 <thead>
 ...
 </thead>
</table>
 ...

$ (' #table '). bootstraptable ({
  URL: ' Data.json '
 });

  The second way to the first one is more flexible when dealing with complex data, generally using the second way to populate table data.

$ (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;
 
 };

The field field must correspond to the fields returned by the server side to show the data.

3, background to obtain data

A, the servlet gets the data

BufferedReader bufr = new BufferedReader (
 new InputStreamReader (Request.getinputstream (), "UTF-8"));
 StringBuilder Sbuilder = new StringBuilder ("");
 String temp = "";
 while (temp = Bufr.readline ())!= null) {
  sbuilder.append (temp);
 Bufr.close ();
 String json = sbuilder.tostring ();
 Jsonobject Json1 = Jsonobject.fromobject (JSON);
 String sdate= json1.getstring ("sdate");//Get Front-End data by this method ...
 

B, Springmvc controller The corresponding method to get the data

Public jsonresult getdepartment (int limit, int offset, string orderId, String sellerid,portid,cardnumber,success, Maxrows,tradetype)
{
 ...
}

4, paging (encountered the most problems)
With paging, the data returned from the server side must include rows and total, as follows:

... <br>gblst = sqlado.gettradelist (sql,pageindex,maxrows);
 Jsonarray jsondata=new Jsonarray ();
 Jsonobject Jo=null;
  for (int i=0,len=gblst.size (); i<len;i++) {Tradebean TB = gblst.get (i);
  if (tb==null) {continue;
  } jo=new Jsonobject ();
  Jo.put ("id", i+1);
  Jo.put ("Liushuiid", Tb.getliushuiid ());
  Jo.put ("Price", String.Format ("%1.2f", Tb.getprice ()/100.0));
  Jo.put ("Mobilephone", Tb.getmobilephone ());
  Jo.put ("Receivetime", Toolbox.getymdhms (Tb.getreceivetime ()));
  Jo.put ("Tradetype", Clsconst.trade_type_des[tb.gettradetype ()); Jo.put ("Changestatus", (Tb.getchangestatus ()!=0)? "
  Success ":" Failure "); Jo.put ("Sendstatus", (Tb.getsendstatus ()!=0)? "
  Success ":" Failure ");
   Jo.put ("Bill_credit", String.Format ("%1.2f", Tb.getbill_credit ()/100.0));
  Jo.put ("Changes", String.Format ("%1.2f", tb.getchanges ()/100.0));
  Jo.put ("Goodroadid", Tb.getgoodroadid ());
  Jo.put ("Smscontent", Tb.getsmscontent ());
  Jo.put ("OrderID", Tb.getorderid ());
  Jo.put ("Goodsname", Tb.getgoodsname ()); Jo. put ("Inneridname", Tb.getinneridname ());
  
  Jo.put ("Xmlstr", Tb.getxmlstr ());
 Jsondata.add (Jo);
 int totalcount=sqlado.gettraderowscount (SQL);
 Jsonobject jsonobject=new jsonobject (); Jsonobject.put ("Rows", jsondata);//jsonarray jsonobject.put ("Total", totalcount);//Record number Out.print ( Jsonobject.tostring ()); 
 <br>

5, pagination Interface content Introduction

The front end gets the paging data, and the code is as follows:

... <br>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;
 <br>

The back end gets the paging data as follows:

... <br>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> ....

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Table Use Tutorial

Bootstrap Plugin Usage Tutorial

The above is for everyone to share the bootstrap table use method, I hope to master the use of bootstrap table to help.