利用bootstraptable展示数据，对数据进行排序分页等操作

今天分享一下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',
                width: '50px',			//宽度
                sortable: true,			//下面是单独加的按钮
                formatter: function (value,row,index) {
                    var e = '<button class="btn btn-primary" οnclick="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使用的方法。