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

拼搏现实的明天。 2023-02-14 08:00 13阅读 0赞

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

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

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

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

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

1.  接下来就是给表格里面加数据了，我们可以在加载当前页面时利用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;
                    },
                }]
        });
    }

1.  后台查询数据的代码（以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);
    	}

下面是演示图（数据随便填的）：  
![在这里插入图片描述][20200601222646160.png]

对了，另外结合layui使用更好用哦，时候不早了，明天在说结合layui使用的方法。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTM3Mzk3_size_16_color_FFFFFF_t_70]

[20200601222646160.png]: https://img-blog.csdnimg.cn/20200601222646160.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTM3Mzk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200601222740538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTM3Mzk3,size_16,color_FFFFFF,t_70