Question

我想使引导表中的列可排序，我在这里关注文档https://examples.bootstrap-table.com/#column-options/sortable.html 甚至我没有将data-sortable="true"添加到列和表中，我也没有排序功能。我只有排序功能的箭头，但它们不起作用

当我使用示例https://examples.bootstrap-table.com/#welcomes/from-data.html时-仅当我更改示例以使用数据中的数据（根据https://examples.bootstrap-table.com/#welcomes/from-data.html#view-source）时，可排序功能才能正常工作。

表定义

<div id="toolbar">
  <button id="remove" class="btn btn-danger" disabled>
    <i class="glyphicon glyphicon-remove"></i> Delete
  </button>
</div>
<table
  id="table"
  data-toolbar="#toolbar"
  data-search="true"
  data-show-refresh="true"
  data-show-toggle="true"
  data-show-fullscreen="true"
  data-show-columns="true"
  data-show-columns-toggle-all="true"
  data-detail-view="true"
  data-show-export="true"
  data-click-to-select="true"
  data-detail-formatter="detailFormatter"
  data-minimum-count-columns="2"
  data-show-pagination-switch="true"
  data-pagination="true"
  data-id-field="Name"
  data-page-list="[1, 5, 10, 25, 50, 100, all]"
  data-side-pagination="server"
  data-response-handler="responseHandler">


  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true" >Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>




</table>

脚本

$(function() {
    var data = [
      {
        'id': 0,
        'name': 'Item 0',
        'price': '$0'
      },
      {
        'id': 1,
        'name': 'Item 1',
        'price': '$1'
      },
      {
        'id': 2,
        'name': 'Item 2',
        'price': '$2'
      },
      {
        'id': 3,
        'name': 'Item 3',
        'price': '$3'
      },
      {
        'id': 4,
        'name': 'Item 4',
        'price': '$4'
      },
      {
        'id': 5,
        'name': 'Item 5',
        'price': '$5'
      }
    ]
    $table.bootstrapTable({data: data})
  })

Answer 1

现在更新了脚本标记并初始化了var $ table = $（'＃table'）

    <script>
  var $table = $('#table')

  $(function() {
    var data = [
      {
        'id': 0,
        'name': 'Item 0',
        'price': '$0'
      },
      {
        'id': 1,
        'name': 'Item 1',
        'price': '$1'
      },
      {
        'id': 2,
        'name': 'Item 2',
        'price': '$2'
      },
      {
        'id': 3,
        'name': 'Item 3',
        'price': '$3'
      },
      {
        'id': 4,
        'name': 'Item 4',
        'price': '$4'
      },
      {
        'id': 5,
        'name': 'Item 5',
        'price': '$5'
      }
    ]
    $table.bootstrapTable({data: data})
  })
</script>

如何使Bootstrap 4表中的列可排序

1 个答案: