Как сгруппировать элементы в первом столбце таблицы с таблицей bootstrap

Question

Я хотел бы иметь таблицу с таблицей bootstrap, в которой первый столбец всегда сортируется первым, чтобы сгруппировать одинаковые значения.

Пример

Позволяет скажем, теперь он отсортирован по классу, тогда он будет выглядеть так:

| Class | Name  | Day |
|-------|-------|-----|
| 3C    | Ben   | 1   |
| 4A    | Aaron | 2   |
| 4A    | Tom   | 3   |

Когда таблица сортируется по дням, она должна выглядеть следующим образом:

| Class | Name  | Day |
|-------|-------|-----|
| 4A    | Aaron | 2   |
| 4A    | Tom   | 3   |
| 3C    | Ben   | 1   |

Проблема если бы это обычно выглядело бы так:

| Class | Name  | Day |
|-------|-------|-----|
| 4A    | Aaron | 2   |
| 3C    | Ben   | 1   |
| 4A    | Tom   | 3   |

Я знаю о расширении множественной сортировки, но я только узнал, что, когда один щелчок по столбцу и сдвиг щелкают по другому столбцу, он будет отсортирован в порядке одного щелчка. Моя проблема в том, что я хочу, чтобы первый столбец всегда сортировался первым, но я еще не выяснил, как это сделать.

Answer 1

Я создал огромный обходной путь для моей проблемы, который работает. Несмотря на то, что это не работает для хорошей производительности, и это не лучший способ, но все равно. Вот что я создал на примере:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>

<table id="table"
       data-editable="true"
       >
  <thead>
    <tr>
      <th data-field="what">Name</th>
      <th data-field="number" data-sortable="true">ID</th>
      <th data-field="sort" data-sortable="true">Something</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')
  $(function() {
    var sort = [
      {
        "sortName": "what",
        "sortOrder": "asc"
      }
    ]
    var data = [
      {
        'what': 'Group 1',
        'number': '2',
        'sort': 'something',
      },
      {
        'what': 'Group 2',
        'number': '5',
        'sort': 'no',
      },
      {
        'what': 'Group 1',
        'number': '8',
        'sort': 'ok',
      },
      {
        'what': 'Group 3',
        'number': '1',
        'sort': 'ye',
      }
    ]
    var order = "desc";
    var lastColumn = "";
    $table.bootstrapTable({
      onSort: function(name) {
        if(lastColumn == name) {
          if(order == "desc") {
            order = "asc";
          } else {
            order = "desc";
          }
        } else {
          lastColumn = name;
          order = "desc";
        }
        sort = [
          {
            "sortName": "what",
            "sortOrder": "asc"
          }, 
          {
            "sortName": name,
            "sortOrder": order
          }
        ]
        $table.bootstrapTable('multiSort', sort);
      },
      sortPriority: sort,
      data: data,
    })
  })
</script>

Как это работает?

Таким образом, при щелчке по одной строке (сортировке) происходит событие. Теперь, когда событие срабатывает, я выполняю команду, которая устанавливает multiSort-value для таблицы. multiSort всегда позволяет сначала отсортировать первую строку, а затем щелкнуть строку. При повторном щелчке по той же строке происходит сортировка в другом направлении. При щелчке по другой строке происходит сортировка со значением по умолчанию, а не с текущим, и можно снова щелкнуть, чтобы снова переключиться между c и des c.

Answer 2

Был ли у вас какой-либо успех при попытке использовать Bootstrap сортируемый плагин ? DataTables, насколько я знаю, является одним из самых популярных и простых в использовании решений для чего-то подобного.

• https://datatables.net/examples/basic_init/table_sorting.html

Существует также мощный Bookmarklet (с которым также легко работать), который я много раз использовал в прошлом, и который вам может пригодиться. Если вам нужны локальные результаты, попробуйте использовать введите описание ссылки здесь .