Поле даты сортировки (момент js) в bootstrap -таблице - PullRequest
Новая
       135

Поле даты сортировки (момент js) в bootstrap -таблице

0 голосов
/ 14 июля 2020

У меня есть JSON данных, которые я визуализирую в Bootstrap -таблицу (bootstrap -4). Я хочу, чтобы все столбцы можно было сортировать. Я не могу отсортировать дату ISO, преобразованную в момент. js формат (MMM DD, YYYY). Я не могу отсортировать дату по нажатию на заголовок . Возможно ли такое? 

 var $table = $('#table')

  $(function() {
    var data = [
      {
        'dt': '2020-05-04T00:00:00.000Z',
        'name': 'Item 1',
        'price': '$1'
      },
      {
        'dt': '2020-06-27T00:00:00.000Z',
        'name': 'Item 2',
        'price': '$2'
      },
      {
        'dt': '2020-06-17T00:00:00.000Z',
        'name': 'Item 3',
        'price': '$3'
      },
      {
        'dt': '2020-06-28T00:00:00.000Z',
        'name': 'Item 4',
        'price': '$4'
      },
      {
        'dt': '2020-05-08T00:00:00.000Z',
        'name': 'Item 5',
        'price': '$5'
      }
    ]
    
    data.forEach(d=>{
       d.dt = moment(d.dt).format('MMM DD, YYYY')
    });
    
    function datesSorter(a, b) {
      if (new Date(a) < new Date(b)) return 1;
      if (new Date(a) > new Date(b)) return -1;
       return 0;
    }
    
    $table.bootstrapTable({data: data})
  }) 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.31/moment-timezone-with-data.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.17.1/dist/bootstrap-table.min.js"></script>

<table id="table" 
       data-search="true">
  <thead>
    <tr>
      <th data-field="dt" data-sortable="true" data-sorter="datesSorter">Date</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

Есть ли что-то похожее на датируемую версию $.fn.dataTable.moment? Как отсортировать даты с помощью bootstrap -таблиц

1 Ответ

1 голос
/ 01 августа 2020

Решить вашу проблему довольно просто. Используйте сортировщик, который у вас уже есть (но переключите < и >). Затем удалите часть форматирования даты: 

data.forEach(d=>{
  dt = moment(d.dt).format('MMM DD, YYYY')
});

Теперь вы можете использовать форматировщик , чтобы вернуть формат даты. 

function dateFormatter(date) {
  return moment(date).format('MMM DD, YYYY')
}

(вы должны использовать data-formatter="dateFormatter" в столбце Дата)

Вы можете протестировать здесь .

...