本篇文章主要介绍了bootstrap table插件使用demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
最近研究bootstrap，它仅提供视觉效果，对于数据列表之类的并未涉及，网上找了一下，找到一个table插件。
名为bootstraptable。
官方地址：http://bootstrap-table.wenzhixin.net.cn/examples/
github:https://github.com/wenzhixin/bootstrap-table
因为英文差，研究了半天，做了一个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;
}
}
}
展示数据结果如下：
以上就是bootstrap table插件的使用详解的详细内容。