当前位置：首页 > 行业动态 > 正文

bootstraptable cdn

admin
行业动态
2025-02-06
6

Bootstrap Table是基于Bootstrap的jQuery表格插件，通过简单设置即可实现单选、多选、排序、分页等功能，支持编辑、导出和过滤等扩展功能。

Bootstrap Table 是一个功能强大的 jQuery 插件，用于在网页上创建交互式的表格，它提供了分页、排序、搜索等功能，并且支持多种数据源和扩展，以下是关于 Bootstrap Table 使用 CDN 的详细介绍：

引入方式

1、通过 CDN 引入：

CSS：

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.css">

JavaScript：

 <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>

本地化文件（以中文为例）：

bootstraptable cdn

 <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/locale/bootstrap-table-zh-CN.min.js"></script>

2、通过 Bower 安装：

 bower install bootstrap-table

使用方法

1、通过 data 属性启用：

无需编写 JavaScript，只需在普通的<table> 元素上设置data-toggle="table" 即可。

 <table data-toggle="table">
     <thead>
       <tr>
         <th>Item ID</th>
         <th>Item Name</th>
         <th>Item Price</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>1</td>
         <td>Item 1</td>
         <td>$1</td>
       </tr>
       <tr>
         <td>2</td>
         <td>Item 2</td>
         <td>$2</td>
       </tr>
     </tbody>
   </table>

2、通过 JavaScript 启用：

bootstraptable cdn

可以通过设置远程 URL 来加载数据，

 <table id="table"></table>
   <script>
     $('#table').bootstrapTable({
       columns: [{
         field: 'id',
         title: 'Item ID'
       }, {
         field: 'name',
         title: 'Item Name'
       }, {
         field: 'price',
         title: 'Item Price'
       }],
       data: [{
         id: 1,
         name: 'Item 1',
         price: '$1'
       }, {
         id: 2,
         name: 'Item 2',
         price: '$2'
       }]
     });
   </script>

示例代码

以下是一个使用 Bootstrap Table 的完整示例：

序号	名称	价格
1	苹果	$3
2	香蕉	$2
3	橙子	$4

FAQs

1、如何更改表格的分页大小？

可以通过在 JavaScript 初始化对象中设置pageSize 选项来更改分页大小。

bootstraptable cdn

 $('#table').bootstrapTable({
     pageSize: 5 // 每页显示5条数据
   });

2、如何添加自定义按钮到工具栏？

可以通过在 JavaScript 初始化对象中设置buttons 选项来添加自定义按钮。

 $('#table').bootstrapTable({
     buttons: [{
       text: '自定义按钮',
       action: function (e, value, row, index) {
         alert('点击了自定义按钮');
       }
     }]
   });