Как сделать сортировку колонки в таблице начальной загрузки 4 - PullRequest
Новая
       32

Как сделать сортировку колонки в таблице начальной загрузки 4

1 голос
/ 11 октября 2019

Я хочу сделать столбец в таблице начальной загрузки сортируемым, я следовал за документами здесь 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})
  })

1 Ответ

0 голосов
/ 11 октября 2019

Обновлен тег сценария и инициализирован 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>
...