最近研究bootstrap，它仅提供视觉效果，对于数据列表之类的并未涉及，网上找了一下，找到一个Table插件。
名为bootstrapTable。
官方地址：http://bootstrap-table.wenzhixin.net.cn/examples/
github:https://github.com/wenzhixin/bootstrap-table
因为英文差，研究了半天，做了一个demo，将就看
HTML:
JS:
$(function () {
$("#dataShow").bootstrapTable({
url: "TradHandler.ashx?request=getTradList",sortName: "rkey",//排序列
striped: true,//條紋行
sidePagination: "server",//服务器<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>
//showRefresh: true,//刷新<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>
//search: true,//<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a><a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>
clickToSelect: true,//选择行即选择check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>
singleSelect: true,//仅允许单选
//searchOnEnterKey: true,//ENTER键<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>
pagination: true,//启用<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>
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');
}
});
//<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>
$("#searchBtn").click(function () {
$(this).button('loading');
var nullparamss = {};
$("#dataShow").bootstrapTable("refresh",nullparamss);
});
//enter键<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>
$("#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：
/// 获取批量数据示例
///
///
private void getTradList(HttpContext context)
{
//用于序列化实体类的对象
JavaScriptSerializer jss = new JavaScriptSerializer();
#region 模拟数据<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>
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"]);
//<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>满足条件的数据
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
//将结果<a href="https://www.jb51.cc/tag/zengjia/" target="_blank" class="keywords">增加</a>一列序号列
Dictionary<int,SimpleModel> testModel = new Dictionary<int,SimpleModel>();
for (int i=0;i< getList.Count;i++)
{
testModel.Add(i + 1,getList[i]);
}
//给<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>实体赋值
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();
//将<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>结果返回
context.Response.Write(jss.Serialize(model));
} 有同学问pagemodel实体类，这里也分享一下，泛型实体类，因为该插件需要这些属性才能正常自动绑定
{
///
/// 總行數
///
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;
}
} }
展示数据结果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/bootstrap/37334.html