今天分享一下bootstraptable的相关技能点，由于第一次接触，所以刚开始碰了好多壁，于是趁现在过去不久，先总结总结。
Bootstraptable简单的来说就是一个表格控件，但是这个表格可不是一般的表格，分页、排序、查询都自带了，你就给他一个json数据就可以了。
接下来我们就看看怎么用：
1.先在页面中引入所需的js文件和css文件
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>2.在我们所需要展示数据的表格上加个id，或者class都可以，在这里我以id为例。
<table id="table"></table>3.接下来就是给表格里面加数据了，我们可以在加载当前页面时利用ajax去请求控制器，查询所需要的数据，然后放在一个集合中，转换成json格式就可以了。
下面是js中相关代码：
$(function () {
caseTable();
});
//加载数据
function caseTable() {
$('#table').bootstrapTable({
method: "get", //提交方法
striped: true, //是否显示行间隔色
cache:true, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性
singleSelect: false, //设置True 将禁止多选
url: "/Home/GetAllAnJian",//查询的地址
dataType: "json", //服务器返回的数据类型
pagination: true, //是否分页
pageSize: 5, //页大小
pageNumber: 1, //当前页
search: false, //显示搜索框
contentType: "application/x-www-form-urlencoded", //发送到服务器的数据编码类型
queryParams:null, //参数
// function (parms) {
// return {
// aid: $("#aid").val(),
// };
//},
columns: [
{
title: "案件编号", //列标题
field: 'aid', //该列映射的data的参数名
align: 'center', //水平对齐方式
valign: 'middle', //垂直对齐方式
sortable: true //是否排序
},
{
title: '案件名称',
field: 'aname',
align: 'center',
valign: 'middle',
sortable: true
},
{
title: '案件类型',
field: 'atypename',
align: 'center',
valign: 'middle',
sortable: true
},
{
field: '',
title: '操作',
halign: 'center',
align: 'center',
'50px', //宽度
sortable: true, //下面是单独加的按钮
formatter: function (value,row,index) {
var e = '<button class="btn btn-primary" onclick="tijiao(\'' + row.aid + '\')">提交</button>';
return e;
},
}]
});
}4.后台查询数据的代码（以asp mvc为例）：
控制器是：HomeController
请求数据的方法：
//查询所有的案件信息
public JsonResult GetAllAnJian(string aid)
{
List<AnJian> anAll = (from a in entity.AnJian
where a.astatename.Equals("新建")
select a).ToList();
//将日期类型转换成string类型
for (int i = 0; i < anAll.Count; i++)
{
anAll[i].adate_formate = anAll[i].adate.ToString();
}
return Json(anAll, JsonRequestBehavior.AllowGet);
}下面是演示图（数据随便填的）：
对了，另外结合layui使用更好用哦，时候不早了，明天在说结合layui使用的方法。
往期内容推荐
layui如何实现添加数据时关闭页面层，并实时刷新表格数据？
你不知道ADO.Net中操作数据库的步骤【超详细整理】
2020-05-30
Photoshop中将图片拖不进软件的编辑区的解决方法，超详细
2020-05-29
eclipse下载与安装步骤详解，包含解决错误（最全最详细，多图）
2020-05-28
Boostrap技能点整理之【按钮样式】
2020-05-27
Boostrap技能点整理之【网格系统】
2020-05-26