Bootstrap Table plugin Using Demo

Recently studied Bootstrap, it only provides visual effects, not involved in the data list, online, find a Table plugin.

named bootstraptable.


Official address: http://bootstrap-table.wenzhiXin.net.cn/examples/


GitHub: https: //github.com/wenzhixin/bootstrap -Table

Because of the difference in English, I have been studying for a long time. I have done a demo. I will see

HTML:


 Select   Supplier Name  Supplier coding  material encoding  Trial state  Approval status  Application time  Trial result VAR CURRPAGEINDEX = 0 VAR CURRLIMIT = 10; $ (Function() {$ ("# DataShow"). Bootstraptable ({URL: "tradhandler.ashx? Request = gettradlist", SortName: "rkey", // race SIDEPAGINATION: "Server", // Server page // showrefresh: true, // Refresh feature // search: true, // Search Function Clicktoselect: true, // Select the line, select Checkbox Singleselect: true, // Allow radio // searchonterKey: True , // Enter, // Enable Paging Escape: True, // Filter Hazard Character Queryparams: getParams, // Carry Parameters PageIndex: 0, // Dark number PageIndex: 0, // : "Get", // Request format // Toolbar: "#toolbar", ONPAGECHANGE: Function (Number, size) {currpageindex = number; currimit = size}, onlineSuccess: function () {$ ("# searchBTN"). Button ('reset');}}}); // Search $ ("# searchbtn"). Click (Function () {$ (this) .Button ('loading'); var Nullparamss = {}; $ ("# DataShow"). Bootstraptable ("Refresh", NullParams);}; // Enter key search $ ("# searchkey"). Keydown (Event) {if (Event.KeyCode = = 13) {$ ("# searchbtn"). Click ();}}); // Block Enter to submit form $ ("# mainform"). Submit (function () {return false;};}); // By default load-carrying parameters Function getParams (params) {var searchkey = $ ("# searchkey"). Val (); return {bysex: 1, limited: params.limit, offset: params.offset, search: searchkey} } 
JS:
TradHandler.ashx:
///

/// Get batch data example ///
///

private void gettlist (httpcontext context) {// Object JavaScriptSerializer jss = new javascriptserialIzer (); #REGON analog data acquisition list list = new list
 (); for (int i = 0; i  getList ; if (bysex! = null && searchkey! = null) {getList = (from p in list where p.sex == (bysex == "0"? "female": "male") && p.name.contains SearchKey.trim ()) Select P) .tolist ();} else {getList = list;} #ENDREGON // Add a series of serial numbers Dictionary  TestModel = New Dictionary 
(); for (INT i = 0; i model = new PageModels
(); model.total =GetList.count; if (getlist.count% pagecount == 0) MODEL.PAGE = getList.count / pagecount; else model.page = (getList.count / pagecount) + 1; // Get the corresponding page Data Model.Rows = TestModel.where (t => T.key> DataIndex && T.key

t.value) .tolist (); // Return the query result back contese.write (jss.serialize (model));}

There are classmates asked PageModel entity, here also shared, generic entity class, because the plugin needs these attributes to automatically bind
     [Serializable] Public Class TablePageModel  {///  /// Total number / / /  public long {get; set;} /// < 1000; i++) 
      { 
        list.Add(new SimpleModel() { age = 18, name = "小李" + i, rkey = i + 1, sex = "男" }); 
      } 
 
 
      //请求中携带的条件 
      string bysex = context.Request.Params["bysex"]; 
      string searchKey = context.Request.Params["search"]; 
 
      //請求中攜帶的頁數和下標 
      int dataIndex = Convert.ToInt32(context.Request.Params["offset"]); 
      int pageCount = Convert.ToInt32(context.Request.Params["limit"]); 
 
      //查询满足条件的数据 
      List /// Total page ///  public int page {get; set;} private list  _rows; /// < getList.Count;i++) 
      { 
        testModel.Add(i + 1, getList[i]); 
      } 
       
      //给分页实体赋值 
      PageModels // data source ///  public List  ROWS{GET {IF (_ROWS == NULL) _ROWS = new list  (); return _rows;} set {_rows = value;}}} 


Display data The results are as follows:

The above is all the contents of this article, I hope that everyone’s learning is helpful, I hope everyone supports Tumi Cloud.
                    
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment