bootstrap-table使用

梦里梦外; 2022-10-02 04:50 225阅读 0赞

## Bootstrap-table的基本使用 ##

这是一款很好的前端分页和表格显示的插件  
官方地址：[https://bootstrap-table.com/][https_bootstrap-table.com]  
**效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70]

## 开始使用 ##

1.  使用该插件需要几个必须的库  
    因为该插件是基于bootstrap的，所以jQuery和bootstrap是必不可少的

//css库
    	<link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-table.css">
      
        //js库
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/bootstrap-table.js"></script>
        
        //中文语言包
        <script src="locale/bootstrap-table-zh-CN.js"></script>

1.  表格的内容是动态加载出来的，需要在body中设置table标签

1.  推荐使用js方法渲染表格中的内容

$("#table").bootstrapTable({
    	                url: "data2.json",   //获取表格数据的url
    	                pagination: true,    //是否分页显示，默认false
    	                cache: false,        //Ajax请求缓存，默认true
    	                showRefresh: true,   //是否显示刷新，默认false
    	                search: true,        //是否显示搜索框，默认false
    	                pageSize: 10,        //设置表格每页显示的数据
    	                pageList: [10],	     //设置页面大小选择列表，如果包含'All'或'Unlimited'选项，则所有记录都将显示在表格中
    	                columns: [{			 //设置表格的表头
    	                    field: "student_number",
    	                    title: "学号",
    	                    align: "center", //居中显示
    	                    width: 250       //设置宽度
    	                }, {
    	                    field: "student_major",
    	                    title: "班级",
    	                    align: "center",
    	                    width: 250
    	                }, {
    	                    field: "student_name",
    	                    title: "姓名",
    	                    align: "center",
    	                    width: 250
    	                }, {
    	                    field: "student_seat",
    	                    title: "座位",
    	                    align: "center",
    	                    width: 250
    	                }, {
    	                    field: "stu-sex",
    	                    title: "性别",
    	                    align: "center",
    	                    width: 250
    	                }, {
    	                    field: "stu-phone",
    	                    title: "电话",
    	                    align: "center",
    	                    width: 250
    	                }, {
    	                    title: "操作",
    	                    align: "center",
    	                    width: 250,
    	                    formatter: function (value, row, index) { 
    	                        return '<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#stu-change">修改</button>  <button class="btn btn-danger btn-sm" onclick="delRow(\''+row.student_number+'\')">删除</button>'
    	                    }
    	                }]
    	            });
    	        });

data1.json，截取一部分

[
    	  {
    	    "id": 1,
    	    "student_number": "2016010382",
    	    "student_name": "shc",
    	    "student_major": "tx161",
    	    "stu-sex": "man",
    	    "stu-phone": "110"
    	  },
    	  {
    	    "id": 2,
    	    "student_number": "2016010382",
    	    "student_name": "shc",
    	    "student_major": "tx161",
    	    "stu-sex": "man",
    	    "stu-phone": "110"
    	  }
    	]

1.  使用bootstrap-table可以完成从服务器端拿取数据，然后显示在表格中，由于本人不会后端操作，所以自己编写了一个json格式的数据来凑一凑。如果采用服务器端的数据还要引入相关的一些参数

**具体的参数可以参考官方文档：[https://bootstrap-table.com/docs/api/table-options/][https_bootstrap-table.com_docs_api_table-options]**

[https_bootstrap-table.com]: https://bootstrap-table.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzI3ODg5_size_16_color_FFFFFF_t_70]: /images/20220113/20dd688d95934b2a9644054bdaccc1fe.png
[https_bootstrap-table.com_docs_api_table-options]: https://bootstrap-table.com/docs/api/table-options/