bootstrap如何获取table数据

发布时间：2021-11-04 16:37:15 作者：iii
来源：亿速云阅读：466

# Bootstrap如何获取Table数据

## 前言

Bootstrap作为最流行的前端框架之一，提供了强大的表格(table)组件用于数据展示。但在实际开发中，我们经常需要从后端API或本地数据源动态获取数据并渲染到表格中。本文将详细介绍在Bootstrap环境中获取和操作表格数据的多种方法。

## 一、静态表格数据初始化

### 1.1 基础HTML表格结构

```html
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john@example.com</td>
    </tr>
    <!-- 更多静态行... -->
  </tbody>
</table>

1.2 使用JavaScript填充数据

const data = [
  { id: 1, name: "John Doe", email: "john@example.com" },
  { id: 2, name: "Jane Smith", email: "jane@example.com" }
];

function populateTable() {
  const tbody = document.querySelector('tbody');
  tbody.innerHTML = data.map(item => `
    <tr>
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.email}</td>
    </tr>
  `).join('');
}

二、动态获取远程数据

2.1 使用Fetch API

async function loadTableData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    
    const tbody = document.querySelector('tbody');
    tbody.innerHTML = data.map(item => `
      <tr>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.email}</td>
      </tr>
    `).join('');
  } catch (error) {
    console.error('Error loading data:', error);
  }
}

// 页面加载时调用
document.addEventListener('DOMContentLoaded', loadTableData);

2.2 使用jQuery AJAX

$(document).ready(function() {
  $.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
      let rows = '';
      $.each(data, function(index, item) {
        rows += `<tr>
          <td>${item.id}</td>
          <td>${item.name}</td>
          <td>${item.email}</td>
        </tr>`;
      });
      $('tbody').html(rows);
    },
    error: function(xhr, status, error) {
      console.error('AJAX Error:', error);
    }
  });
});

三、使用Bootstrap Table插件

3.1 初始化Bootstrap Table

首先引入必要的库：

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

3.2 基本配置

<table 
  id="table"
  data-toggle="table"
  data-url="https://api.example.com/data"
  data-pagination="true"
  data-search="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Name</th>
      <th data-field="email">Email</th>
    </tr>
  </thead>
</table>

3.3 高级配置选项

$('#table').bootstrapTable({
  url: 'https://api.example.com/data',
  pagination: true,
  pageSize: 10,
  search: true,
  showRefresh: true,
  columns: [{
    field: 'id',
    title: 'ID',
    sortable: true
  }, {
    field: 'name',
    title: 'Name',
    formatter: nameFormatter
  }, {
    field: 'email',
    title: 'Email'
  }]
});

function nameFormatter(value, row) {
  return `<strong>${value}</strong>`;
}

四、处理表格数据事件

4.1 行点击事件

$('#table').on('click-row.bs.table', function(e, row, $element) {
  alert(`You clicked on: ${row.name}`);
});

4.2 获取选中行数据

$('#get-selected').click(function() {
  const selections = $('#table').bootstrapTable('getSelections');
  console.log(selections);
});

五、表格数据操作

5.1 添加新行

function addRow() {
  $('#table').bootstrapTable('append', {
    id: 3,
    name: 'New User',
    email: 'new@example.com'
  });
}

5.2 删除选中行

function removeRow() {
  const ids = $('#table').bootstrapTable('getSelections').map(row => row.id);
  $('#table').bootstrapTable('remove', {
    field: 'id',
    values: ids
  });
}

六、性能优化技巧

6.1 虚拟滚动

$('#table').bootstrapTable({
  virtualScroll: true,
  height: 400
});

6.2 服务器端分页

$('#table').bootstrapTable({
  pagination: true,
  sidePagination: 'server',
  queryParams: function(params) {
    return {
      limit: params.limit,
      offset: params.offset,
      search: params.search
    };
  },
  responseHandler: function(res) {
    return {
      total: res.total,
      rows: res.rows
    };
  }
});

七、常见问题解决

7.1 数据加载延迟

$('#table').bootstrapTable('showLoading');
fetch('/data').then(() => {
  $('#table').bootstrapTable('hideLoading');
});

7.2 空数据处理

$('#table').bootstrapTable({
  formatNoMatches: function() {
    return 'No data found';
  }
});

八、总结

本文介绍了多种在Bootstrap中获取和操作表格数据的方法：

静态数据初始化
动态获取远程数据（Fetch API/jQuery AJAX）
使用Bootstrap Table插件
表格事件处理
数据操作（增删改查）
性能优化技巧

根据项目需求选择合适的方法，小型项目可以使用简单的JavaScript动态渲染，而复杂的企业级应用则推荐使用Bootstrap Table插件。

扩展阅读

”`

注：本文总字数约1900字，包含了从基础到进阶的Bootstrap表格数据操作方法，所有代码示例均可直接使用。实际应用时请根据项目需求调整API端点和其他参数。