今天分享一下bootstraptable的相关技能点，由于第一次接触，所以刚开始碰了好多壁，于是趁现在过去不久，先总结总结。

Bootstraptable简单的来说就是一个表格控件，但是这个表格可不是一般的表格，分页、排序、查询都自带了，你就给他一个json数据就可以了。

接下来我们就看看怎么用：

1.先在页面中引入所需的js文件和css文件

2.在我们所需要展示数据的表格上加个id，或者class都可以，在这里我以id为例。

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',                width: '50px', //宽度                sortable: true, //下面是单独加的按钮                formatter: function (value,row,index) {                    var e = '提交';                    return e;                },            }]    });}

4.后台查询数据的代码（以asp mvc为例）：

控制器是：HomeController

请求数据的方法：

//查询所有的案件信息public JsonResult GetAllAnJian(string aid){List
    
      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使用的方法。

往期内容推荐