3分钟内看完这,bootstraptable表格控件,受益匪浅！

左手的ㄟ右手 2022-12-25 01:56 208阅读 0赞

![format_png][]

今天分享一下**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 = '<button class="btn btn-primary" onclick="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);
      }

下面是演示图（数据随便填的）：

![format_png 1][]

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

往期内容推荐

[layui如何实现添加数据时关闭页面层，并实时刷新表格数据？][layui]

[2020-06-01][layui]

[![format_png 2][] ][layui] [你不知道ADO.Net中操作数据库的步骤【超详细整理】

2020-05-30

![format_png 3][] ][ADO.Net_ 2020-05-30 _format_png 3_] [Photoshop中将图片拖不进软件的编辑区的解决方法，超详细

2020-05-29

![format_png 4][] ][Photoshop_ 2020-05-29 _format_png 4_] [eclipse下载与安装步骤详解，包含解决错误（最全最详细，多图）

2020-05-28

![format_png 5][] ][eclipse_ 2020-05-28 _format_png 5_] [Boostrap技能点整理之【按钮样式】

2020-05-27

![format_png 6][] ][Boostrap_ 2020-05-27 _format_png 6_] [Boostrap技能点整理之【网格系统】

2020-05-26

![format_png 7][] ][Boostrap_ 2020-05-26 _format_png 7_]

![format_png 8][]

[format_png]: /images/20221120/ff38fc0892de4090bc0b8a13232ed4b8.png
[format_png 1]: /images/20221120/78809d0217dd46a6ab30bcdbaed83ec0.png
[layui]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1247a0fb9b5115242dc12884cdd47547c42f308146b20679e4562337078f02fbd92566d5&idx=1&mid=2247485606&scene=21&sn=c39cc8fc0ed5b966ef21804979afc760#wechat_redirect
[format_png 2]: /images/20221120/3281fa7827c84bd3a5f918e0e8d3b9b6.png
[format_png 3]: /images/20221120/9d9d38bba6d84b43be523e287f862f25.png
[ADO.Net_ 2020-05-30 _format_png 3_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c12e3a0fb9bf5d0ab379ca82dac81934868bd52016e87bd3b9e02aac19741f79f239c2934&idx=1&mid=2247485442&scene=21&sn=1268c5fd5096707115d335a13ca608ba#wechat_redirect
[format_png 4]: /images/20221120/af8832dfa0694db88a9a226828dbcd43.png
[Photoshop_ 2020-05-29 _format_png 4_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1d16a0fb9400dcac2487153744e4fda06d855c4a91cbaf8d8aea24d6f8c4787a12e1dee1&idx=1&mid=2247485431&scene=21&sn=6c1aeb75db35214d5596b2cf0d7139a4#wechat_redirect
[format_png 5]: /images/20221120/3e74b7c6913b4c7d985b54914fb95e26.png
[eclipse_ 2020-05-28 _format_png 5_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1d5ca0fb944a30542cb637385997f27633ccdb6dd3720e2389f2d553f9aa36f81afd0fd4&idx=1&mid=2247485373&scene=21&sn=6a6e9488ab9abdd20cb338823a927891#wechat_redirect
[format_png 6]: /images/20221120/d42cdaad66aa4734b1350dfd0c6d094c.png
[Boostrap_ 2020-05-27 _format_png 6_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1d41a0fb94571f7546e1260649a8ec0f27b22d709f497c773b8767303d99a8bf2f6f2d34&idx=1&mid=2247485344&scene=21&sn=1b25e7233e7532641b930e9ef6b96239#wechat_redirect
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9EWjlUaWF4ZFF4azIzOFhIeUw5akFpYVhUUlNxOW1QTTdUZEhkMUg3Q21LWU9Kb0N0TDFmdmliS3R2aWExeENhcFlvSThkaHl6NGxWa0N2cUJ5bEI4aDVwS0EvNjQw?x-oss-process=image/format,png
[Boostrap_ 2020-05-26 _format_png 7_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1d6aa0fb947c1fcb473ac896b27c51d1fcb7b9fa93a6651622b1d873041630cc56c6c86e&idx=1&mid=2247485323&scene=21&sn=b026ea8a3f45791efdd8f5b3230e432d#wechat_redirect
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EWjlUaWF4ZFF4azFVdG04ZGhwaWNWR0lxZ0tjZUxFVU84T1J4MXFFTXg1R2I4dkFQNXVIVEkxY0pKaEtsZXlhcXRWQTlvRnZzaWJGMGlhZDdIaGlhaWFJaWNwQXcvNjQw?x-oss-process=image/format,png