Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the use of bootstrap Table plug-in

巴扎黑
Release: 2017-08-11 11:08:46
Original
2150 people have browsed it

This article mainly introduces the demo of using the bootstrap Table plug-in. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.

I recently studied bootstrap. It only provides visual effects and does not cover data lists and the like. I searched online and found a Table plug-in.

Named bootstrapTable.

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

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

Because of my poor English, I studied for a long time and made a demo. I just looked at

HTML:


##

<table class="table" id="dataShow" > 
     <thead> 
       <tr> 
         <th data-checkbox="true">选择</th> 
         <th data-field="rkey">供应商名称</th> 
         <th data-field="rkey">供应商编码</th> 
         <th data-field="name">物料编码</th> 
         <th data-field="sex">申请类型</th> 
         <th data-field="birthdayString">试用申请编码</th> 
         <th data-field="age">试用状态</th> 
         <th data-field="age">厂别</th> 
         <th data-field="age">审批状态</th> 
         <th data-field="birthday">申请时间</th> 
         <th data-field="age">试用结果</th> 
       </tr> 
     </thead> 
  </table>
Copy after login

JS:


##

var currPageIndex = 0; 
    var currLimit = 10; 
 
    $(function () { 
      $("#dataShow").bootstrapTable({ 
        url: "TradHandler.ashx?request=getTradList", 
        sortName: "rkey",//排序列 
        striped: true,//條紋行 
        sidePagination: "server",//服务器分页 
        //showRefresh: true,//刷新功能 
        //search: true,//搜索功能 
        clickToSelect: true,//选择行即选择checkbox 
        singleSelect: true,//仅允许单选 
        //searchOnEnterKey: true,//ENTER键搜索 
        pagination: true,//启用分页 
        escape: true,//过滤危险字符 
        queryParams: getParams,//携带参数 
        pageCount: 10,//每页行数 
        pageIndex: 0,//其实页 
        method: "get",//请求格式 
        //toolbar: "#toolBar", 
        onPageChange: function (number, size) { 
          currPageIndex = number; 
          currLimit = size 
        }, 
        onLoadSuccess: function () 
        { 
          $("#searchBtn").button(&#39;reset&#39;); 
        } 
      }); 
 
      //搜索 
      $("#searchBtn").click(function () { 
        $(this).button(&#39;loading&#39;); 
        var nullparamss = {}; 
        $("#dataShow").bootstrapTable("refresh", nullparamss); 
         
      }); 
      //enter键搜索 
      $("#searchKey").keydown(function (event) { 
        if (event.keyCode == 13) 
        { 
          $("#searchBtn").click(); 
        } 
      }); 
      //阻止enter键提交表单 
      $("#mainForm").submit(function () { 
        return false; 
      }); 
 
       
    }); 
    //默认加载时携带参数 
    function getParams(params) { 
      var searchKey = $("#searchKey").val(); 
      return { bysex: 1, limit: params.limit, offset: params.offset, search: searchKey }; 
    }
Copy after login

TradHandler.ashx:


/// <summary> 
    /// 获取批量数据示例 
    /// </summary> 
    /// <param name="context"></param> 
    private void getTradList(HttpContext context) 
    { 
      //用于序列化实体类的对象 
      JavaScriptSerializer jss = new JavaScriptSerializer(); 
 
      #region 模拟数据获取 
      List<SimpleModel> list = new List<SimpleModel>(); 
      for (int i = 0; i < 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<SimpleModel> getList; 
      if (bysex != null && searchKey != null) 
      { 
        getList = (from p in list 
              where p.sex == (bysex == "0" ? "女" : "男") && p.name.Contains(searchKey.Trim()) 
              select p).ToList(); 
      } 
      else 
      { 
        getList = list; 
      } 
      #endregion 
 
      //将结果增加一列序号列 
      Dictionary<int, SimpleModel> testModel = new Dictionary<int, SimpleModel>(); 
      for (int i=0;i< getList.Count;i++) 
      { 
        testModel.Add(i + 1, getList[i]); 
      } 
       
      //给分页实体赋值 
      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; 
 
      //獲取對應頁的數據 
      model.rows = testModel.Where(t => t.Key > dataIndex && t.Key <= dataIndex + pageCount).Select(t => t.Value).ToList(); 
 
      //将查询结果返回 
      context.Response.Write(jss.Serialize(model)); 
    }
Copy after login

There are classmates Ask about the pagemodel entity class. I will also share here the generic entity class, because the plug-in requires these attributes to automatically bind normally


[Serializable] 
  public class TablePageModel<T> 
  { 
    /// <summary> 
    /// 總行數 
    /// </summary> 
    public long total { get; set; } 
 
    /// <summary> 
    /// 总页数 
    /// </summary> 
    public int page { get; set; } 
 
    private List<T> _rows; 
    /// <summary> 
    /// 數據源 
    /// </summary> 
    public List<T> rows 
    { 
      get 
      { 
        if (_rows == null) 
          _rows = new List<T>(); 
        return _rows; 
      } 
      set 
      { 
        _rows = value; 
      } 
    } 
  }
Copy after login

The display data results are as follows:

The above is the detailed content of Detailed explanation of the use of bootstrap Table plug-in. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template