Bootstarp-table Getting Started

IntroductionIntroduction of what, we go to the following website to see Bootstrap Chinese web: http://www.bootcss.com/Bootstrap Table demo:http://issues.wenzhixin.net.cn/bootstr ap-table/index.html Bootstrap Table Api:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/bootstrap Table Source: Https://github.com/wenzhixin/bootstrap-table Bootstrap datapicker:http://www.bootcss.com/p/ Bootstrap-datetimepicker/boostrap Table Extension api:http://bootstrap-table.wenzhixin.net.cn/extensions/ Initial version

First, add in our HTML

<div>
        <table id= "goods_table" class= "Table Table-hover" ></table>	
</div>

At the same time, the following JS and CSS must be introduced

<link  href= "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.css" rel= "stylesheet" >
< Link  href= "css/bootstrap-table.min.css" rel= "stylesheet" >
<script src= "http://apps.bdimg.com/libs/ Html5shiv/3.7/html5shiv.min.js "></script>
<script src=" http://apps.bdimg.com/libs/respond.js/ 1.4.2/respond.js "></script>
<script src=" Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js " ></script>
<script src= "Http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" >< /script>

<script src= "Script/bootstrap-table.min.js" ></script>
<script src= "script/ Bootstrap-table-zh-cn.min.js "></script>
<script src=" http://apps.bdimg.com/libs/jquery.cookie/ 1.4.1/jquery.cookie.js "></script>
<script src=" script/handler.js "type=" Text/javascript "> </script>

OK now let's take a look at this handler.js

JS code that holds the primary interaction logic $ (function () {//Initialize business logic script loadgoods ();}) function Loadgoods () {$ (' #goods_table '). bootstraptable ({url: '/beauty_ssm_cluster/goods/list.do ',//URL of request background Method: ' Get ',//Request Method (*) Pagination:true, search:true,//Show search box showtoggle:true,//Show Detailed View and columns
			
				
				Table View Toggle button sidepagination: "Server",//service-side processing paging showcolumns:true,//whether to display all columns showrefresh:true,//whether the refresh button is displayed 
							Columns: [{field: ' Goodsid ', title: ' Product ID '}, {field: ' title ', 
							Title: ' title '}, {field: ' Price ', title: ' Prices '}, {field: ' State ',
								Title: ' Status ', Formatter:function (value, row, index) {var ret = "";
								if (value = = 0) {ret = "bottom frame";
								} if (value = = 1) {ret = "normal";
							} return ret;
		}}, {field: ' Number ', title: ' Quantity '},				{field: ' Goodsid ', title: ' Operation ', formatter:function (value, row, index) {var ret = ' <button class= ' btn btn-info "onclick=" handler.goodsbuy (' + value + '); "
								> Purchase </button> ';
							return ret;
}
						}, ]
			}); }

Here I would like to say that the search box, after writing data in the search box, JS will directly pass the value to the background, from the background to the results of the direct refresh table We then look at the background processing logic

@RequestMapping (value = "/list", method = Requestmethod.get, produces = {"Application/json;charset=utf-8"}) @ResponseBo DY public bootstraptableresult<goods> list (integer offset, integer limit,string search) {log.info ("Invoke-------
		---/goods/list "); offset = offset = null? 0:offset;//default 0 limit = limit = null?
		50:limit;//default display 50 list<goods> list=null;




		System.out.println ("search" +search);
		if (search==null) {list= goodsservice.getgoodslist (offset, limit);
				}else {try {//here to transcode otherwise it would be a problem in theory should be the foreground to do transcoding search=new String (search.getbytes ("iso8859-1"), "Utf-8");
			SYSTEM.OUT.PRINTLN (search+ "PPP"); 
			} catch (Unsupportedencodingexception e) {e.printstacktrace ();
		} list= Goodsservice.querybyfield (offset, limit,search);
		} bootstraptableresult<goods> result= new bootstraptableresult<goods> (list);
		int Count=goodsservice.getgoodscount (search);
		System.out.println ("Count:" +count); Result.settotal (CounT);
	return result; }

There are two fields in this bootstraptableresult.
Private list<t> rows;
private int total;
Total amount of data stored
Finally, the backend returns a JSON to the foreground


Add search Version

Add  <div class= "panel-heading" > Query conditions </div>             <div class in HTML = "Panel-body" >                 <form id= "Formsearch" class= "form-horizontal ">                     <div class=" Form-group "style=" margin-top:1 5px >                         <label class= "Control-labe L col-sm-1 "for=" txt_search_departmentname "> Department name </label>                         <div class= "col-sm-3" >                 &N Bsp           <input type= "text" class= "Form-control" id= "Txt_search_departmentname" >                         </div>         &NBS P              <label class= "Control-label col-sm-1" for= "Txt_search_statu" > Status </label>                         <div class= "col-sm-3" >       &N Bsp                     <input type= "text" class= "Form-control" id= "txt_s Earch_statu >                         </div>   and nbsp                     <div class= "col-sm-4" style= "text-align:left;" >                           <button   type= "bu
Tton "style=" margin-left:50px "onclick=" reloadtable () "id=" Btn_query "class=" btn btn-primary "> Query </button>                         </div>       &NBS P       &NBsp     </div>                 </form>       &NBS P     </div> Of course we have to see what Reloadtable is. $ (function () {//Initialize business logic script    loadgoods ();}) in Boots traptable Add this parameter queryparams:function (param) {var temp = {      //the name of the key here and the variable name of the controller must always be, this way change, the controller Also need to be changed to the same             Limit:param.limit,  //page size           &N Bsp Offset:param.offset,  //page    //We #txt_search_departmentname the value in Departmentname to the backstage     & nbsp       Departmentname: $ ("#txt_search_departmentname"). Val (),             STA Tu: $ ("#txt_search_statu"). Val (),             search:param.search       &NBSP ;
};
        return temp; },

For example

Source Download

Https://github.com/cxyxd/beauty_ssm_cluster/archive/1.0.0.zip

Start reading from goodslist.html

In addition to paging and query you can look at this component

Http://botmonster.com/jquery-bootpag

$ (' #page-selection '). Bootpag ({    total: ${totalpage},     page: ${currentpage},     MAXVI
Sible:5,     leaps:true,     Firstlastuse:true,     First: ' ← ',     Last: ' → ',     Wrapclass: ' pagination ',     activeclass: ' Active ',     disabledclass: ' Disabled ', &nbsp ;   Nextclass: ' Next ',     prevclass: ' prev ',     lastclass: ' Last ',     firstclass: ' Fir St '}). On ("page", function (event,num) {    var url= "getallopponent.action?bypage=ture&currentpage=" +
num + "";
   var type= ' ${customer.type} ';
   var customername= ' ${customer.type} ';
   var clientname= ' ${clientname} ';    if (type!= "")//   <span style= "White-space:pre" > </span>url+= "customer.type="
+type;
   if (customername!= "")//       url+= "customer.name=" +customername;   &Nbsp;if (clientname!= "")//       url+= "clientname=" +clientname;
   alert (URL);


    location.href = URL;
 });

Referenceshttp://blog.csdn.net/song19890528/article/details/50299885 http://www.jb51.net/article/60965.htm The following blog must be seen, I've benefited a lot from this blog myself http://www.cnblogs.com/landeanfen/p/4976838.html?utm_source=tuicool&utm_medium=referral