bootstrap Table插件使用demo

最近研究bootstrap，它仅提供视觉效果，对于数据列表之类的并未涉及，网上找了一下，找到一个table插件。

名为bootstraptable。

官方地址：

github:

因为英文差，研究了半天，做了一个demo，将就看

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> 

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('reset'); 
        } 
      }); 
 
      //搜索 
      $("#searchbtn").click(function () { 
        $(this).button('loading'); 
        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 }; 
    } 

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)); 
    } 

有同学问pagemodel实体类，这里也分享一下，泛型实体类，因为该插件需要这些属性才能正常自动绑定

[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; 
      } 
    } 
  } 

展示数据结果如下：

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。