Bootstrap Table 是一個強大的基于 Bootstrap 的表格插件，可以幫助你快速創建功能豐富、交互性強的數據表格。

以下是使用 Bootstrap Table 的詳細步驟：

1. 引入依賴

   在頁面中引入 Bootstrap 和 jQuery 庫，以及 Bootstrap Table 插件的 CSS 和 JavaScript 文件。

2. 創建表格結構

   使用 HTML 創建一個<table>元素，為其添加一個唯一的 ID 或類名，以便后續操作。

3. 初始化表格

   在 JavaScript 中，通過選擇器選中相應的表格元素，并調用bootstrapTable()方法進行初始化。

   $(function() {
     $('#tableID').bootstrapTable();
   });

4. 配置數據源

   通過配置data屬性或通過 AJAX 請求從服務器獲取數據，將數據渲染到表格中。

使用靜態數據初始化表格：

     var data = [
       { id: 1, name: 'John Doe', age: 28 },
       { id: 2, name: 'Jane Smith', age: 32 }
     ];
     $('#tableID').bootstrapTable({
       data: data
     });

通過 AJAX 請求獲取數據并渲染：

     $('#tableID').bootstrapTable({
       url: 'url_to_server_data',
       method: 'get',
       dataType: 'json',
       queryParams: function(params) {
         // 可選參數，用于傳遞額外的請求參數
         return {
           limit: params.limit,  // 每頁記錄數
           offset: params.offset // 當前頁偏移量
         };
       },
       responseHandler: function(res) {
         // 可選的數據處理函數，用于從服務器響應中提取表格數據
         return res.data;
       }
     });

5. 配置列和其他選項

   通過配置columns 屬性定義列的標題、字段名及其他選項。

   $('#tableID').bootstrapTable({
     columns: [
       { field: 'id', title: 'ID' },
       { field: 'name', title: 'Name' },
       { field: 'age', title: 'Age' }
     ],
     // 其他選項...
   });

   你還可以使用其他選項來自定義表格的外觀和行為，例如分頁、排序、過濾等。

6. 進行其他操作

   Bootstrap Table 提供了許多方法和事件來進行表格操作，如動態添加、刪除、修改行數據，或響應用戶操作等。你可以參考官方文檔以獲取更多細節。

希望這些步驟能夠幫助你開始使用 Bootstrap Table 創建功能豐富的數據表格。記住，要根據自己的需求和實際情況對表格進行適當的配置和定制。