JS Component Bootstrap table use method detailed

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 approach to the first is more flexible when dealing with complex data, typically 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 (); Initialize Table Otableinit.init = function () {$ (' #tradeList '). bootstraptable ({url: '/vendermanager/tradeli
        St ',//Request background URL (*) method: ' Post ',//Request (*) 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 the general need to set this property (*) Pagina
        Tion:true,//whether to display the paging (*) Sortable:false,//whether to enable sorting SortOrder: "ASC",//sorting method queryparams:otableinit.queryparams,//Pass Parameter (*) sidepagination: "Server",//Paging: Client Client page paging, Server service end paging (* Pagenumber:1,///initialization Load first page, default first page pagesize:50,//per page record rows (*) PageList: [10, 2 5, 50, 100],//selectable number of rows per page (*) strictsearch:true, clicktoselect:true,//is enabled Click Select Row Height:  460,//row height, if the Height property is not set, the table automatically according to the number of records that the table height uniqueId: "id",//each row unique identification, general primary key column CardView:
          False,//whether to display the detailed view detailview:false,//whether to display a parent-child table columns: [{field: ' ID ', Title: ' Serial Number '}, {field: ' Liushuiid ', title: ' Transaction Number '}, {field: ' OrderID ', Title: ' Order Number '}, {field: ' Receivetime ', title: ' Transaction Time '}, {Fiel
          D: ' Price ', title: ' Amount '}, {field: ' Coin_credit ', title: ' Put Coin '}, { 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: ' Goodsname ', title: ' Product Name ' }, {field: ' Changestatus ', title: ' Pay '},{field: ' Sendstatus ', title: ' Out
    Goods '},]});
 
    };
        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:params.limit,//Page size Offset:params.offset,//page 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.tostr    ing ());    
 <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> ....

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

Turn from: http://www.jb51.net/article/79033.htm