利用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使用的方法。