Bootstrap Table plug-in uses demo and bootstraptable

Bootstrap Table plug-in uses demo and bootstraptable

A recent study of bootstrap, which only provides visual effects and does not involve data lists, found a Table plug-in on the Internet.

The name is bootstrapTable.

Official Address: http://bootstrap-table.wenzhixin.net.cn/examples/

Github: https://github.com/wenzhixin/bootstrap-table

Due to poor English, I studied it for a long time and made a demo.

HTML:

<Table class = "table" id = "dataShow"> <thead> <tr> <th data-checkbox = "true"> select </th> <th data-field = "rkey"> Supplier name </th> <th data-field = "rkey"> Supplier Code </th> <th data-field = "name"> material Code </ th> <th data-field = "sex"> application type </th> <th data-field = "birthdayString"> trial application code </th> <th data-field = "age"> trial status </th> <th data-field = "age"> factory </th> <th data-field = "age"> approval status </th> <th data-field = "birthday"> application time </th> <th data-field = "age"> trial result </th> </tr> </thead> </table>

JS:

Var currPageIndex = 0; var currLimit = 10; $ (function () {$ ("# dataShow"). bootstrapTable ({url: "TradHandler. ashx? Request = getTradList ", sortName:" rkey ", // sort column striped: true, // sidePagination:" server ", // server paging // showRefresh: true, // refresh function // search: true, // search function clickToSelect: true, // select the row to select checkbox singleSelect: true, // only allow single choice // searchOnEnterKey: true, // ENTER key search pagination: true, // enable paging escape: true, // filter the dangerous character queryParams: getParams, // carry the parameter pageCount: 10, // pageIndex: 0 for each page, // method of the actual page: "get", // request format // toolbar: "# toolBar", onPageChange: function (number, size) {currPageIndex = number; currLimit = size}, onLoadSuccess: function () {$ ("# searchBtn "). button ('reset') ;}}); // search $ ("# searchBtn "). click (function () {$ (this ). button ('loading'); var nullparamss ={};$ ("# dataShow "). bootstrapTable ("refresh", nullparamss) ;}); // enter key search $ ("# searchKey "). keydown (function (event) {if (event. keyCode = 13) {$ ("# searchBtn "). click () ;}}); // prevents the enter key from submitting the form $ ("# mainForm "). submit (function () {return false ;}); // carries the function getParams (params) {var searchKey =$ ("# searchKey") when loading by default "). val (); return {bysex: 1, limit: params. limit, offset: params. offset, search: searchKey };}

TradHandler. ashx:

/// <Summary> /// obtain the batch data example /// </summary> /// <param name = "context"> </param> private void getTradList (HttpContext context) {// The object used to serialize the object class JavaScriptSerializer jss = new JavaScriptSerializer (); # region simulates data acquisition List <SimpleModel> list = new List <SimpleModel> (); for (int I = 0; I <1000; I ++) {list. add (new SimpleModel () {age = 18, name = "Xiao Li" + I, rkey = I + 1, sex = "male "});} // The string bysex condition carried in the request = Context. request. params ["bysex"]; string searchKey = context. request. params ["search"]; // calculate the number of bytes in the center and the lower-level int dataIndex = Convert. toInt32 (context. request. params ["offset"]); int pageCount = Convert. toInt32 (context. request. params ["limit"]); // query the List of data that meets the conditions <SimpleModel> 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 ;}# endregion // Add a column of serial number columns to the result Dictionary <int, SimpleModel> testModel = new Dictionary <int, simpleModel> (); for (int I = 0; I <getList. count; I ++) {testModel. add (I + 1, getList [I]);} // assign PageModels <SimpleModel> model = new PageModels <SimpleModel> (); model. total = getList. count; if (getList. count % pageCount = 0) model. page = getList. count/pageCount; else model. page = (getList. count/pageCount) + 1; // retrieve the corresponding data model. rows = testModel. where (t => t. key> dataIndex & t. key <= dataIndex + pageCount ). select (t => t. value ). toList (); // return the query result to context. response. write (jss. serialize (model ));}

Some people ask the pagemodel object class. Here we also share the generic object class, because this plug-in requires these attributes to be automatically bound normally.

[Serializable] public class TablePageModel <T >{/// <summary> /// total number of rows /// </summary> public long total {get; set ;} /// <summary> /// total number of pages /// </summary> public int page {get; set;} private List <T> _ rows; /// <summary> // data source // </summary> public List <T> rows {get {if (_ rows = null) _ rows = new List <T> (); return _ rows;} set {_ rows = value ;}}}

The data is displayed as follows:

 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.