更换bootstrap-table的data-url后无法加载数据求助

问题原因 #

你遇到的问题核心有两个：

• 你的自定义JSON数据源返回的是包含data属性的对象，而Bootstrap Table默认期望直接接收数组格式的数据，无法自动识别嵌套的data字段。
• 在切换导出类型时，你销毁表格后重新初始化，但没有传递data-url等核心配置，导致新表格根本没有请求数据源的地址。

修复步骤及代码 #

下面是修改后的完整代码，关键修复点已标注：

<html>
<body class="container">
  <h2><i class="bi bi-cart"></i> List Generator</h2>

  <link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free@5.12.1/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@10.7.2/styles/default.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hint.css@2.6.0/hint.min.css">

  <script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/tableExport.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF/jspdf.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/export/bootstrap-table-export.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sprintf-js@1.1.2/dist/sprintf.min.js"></script>
  <script src="https://unpkg.com/@highlightjs/cdn-assets@10.7.2/highlight.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked@3.0.8/marked.min.js"></script>
  <script src="https://unpkg.com/flexibility@2.0.1/flexibility.js"></script>

  <style>
    #toolbar {
      margin: 0;
    }
  </style>

  <div id="toolbar" class="select">
    <select class="form-control">
      <option value="selected">Export Selected</option>
      <option value="all">Export All</option>
    </select>
  </div>

  <!-- 保留基础配置，新增response-handler来解析自定义JSON结构 -->
  <table id="table" data-show-export="true" data-pagination="true" 
         data-side-pagination="client" data-click-to-select="true" 
         data-show-toggle="false" data-toolbar="#toolbar" 
         data-show-columns="false" data-search="true" 
         data-toggle="table" data-maintain-meta-data="true"
         data-url="https://jsonkeeper.com/b/A4MR"
         data-response-handler="responseHandler">
  </table>

  <script>
    var $table = $('#table')
    // 自定义响应处理函数，提取data字段里的数组数据
    function responseHandler(res) {
      return res.data;
    }

    $(function() {
      $('#toolbar').find('select').change(function() {
        var exportType = $(this).val();
        $table.bootstrapTable('destroy').bootstrapTable({
          exportDataType: exportType,
          // 修正exportTypes，保留有效类型，空值会导致导出菜单异常
          exportTypes: ['txt', 'pdf', 'csv', 'excel'],
          columns: [{
              field: 'state',
              checkbox: true,
              visible: exportType === 'selected'
            },
            {
              field: 'id',
              title: 'ID'
            }, {
              field: 'name',
              title: 'Item Name'
            }, {
              field: 'price',
              title: 'Item Price'
            }
          ],
          // 重新初始化时必须带上数据源地址和分页配置
          url: 'https://jsonkeeper.com/b/A4MR',
          sidePagination: 'client',
          responseHandler: responseHandler
        })
      }).trigger('change')
    })
  </script>
</body>
</html>

关键修复点说明 #

• 添加responseHandler函数：专门用来解析你的JSON结构，把返回对象里的data数组提取出来，交给Bootstrap Table渲染。
• 重新初始化时传递完整配置：销毁表格后重建，必须把url、sidePagination、responseHandler这些核心配置都带上，不然表格不知道从哪获取数据。
• 修正exportTypes：你之前写的空值会导致导出菜单出现无效选项，改成有效的导出类型即可。

内容的提问来源于stack exchange，提问作者Maverick