今天分享一下bootstraptable的相关技能点，由于第一次接触，所以刚开始碰了好多壁，于是趁现在过去不久，先总结总结。
Bootstraptable简单的来说就是一个表格控件，但是这个表格可不是一般的表格，分页、排序、查询都自带了，你就给他一个json数据就可以了。
接下来我们就看看怎么用：
- 先在页面中引入所需的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>
- 在我们所需要展示数据的表格上价格id，或者class都可以，在这里我以id为例。
<table id="table"></table>
- 接下来就是给表格里面加数据了，我们可以在加载当前页面时利用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', width: '50px', //宽度 sortable: true, //下面是单独加的按钮 formatter: function (value,row,index) { var e = '<button class="btn btn-primary" οnclick="tijiao(\'' + row.aid + '\')">提交</button>'; return e; }, }] }); }
- 后台查询数据的代码（以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使用的方法。
