как получить сгруппированные заголовки с помощью getuikit и datatables - PullRequest
Новая
       18

как получить сгруппированные заголовки с помощью getuikit и datatables

0 голосов
/ 19 сентября 2019

Каков правильный способ достижения этого типа «сгруппированных» строк с помощью GetUiKit и Datatables?(так, чтобы вы могли сортировать по всем заголовкам)?

https://getuikit.com/docs/table https://datatables.net/examples/styling/uikit.html

<table border="1">
  <tr>
    <th>creating date</th>
    <th>name</th>
    <th>location</th>
  </tr>
  <tr>
    <th>update date</th>
    <th colspan="2">comment</th>
  </tr>
<tbody>
  <tr>
    <td>20180901</td>
    <td>john</td>
    <td>paris</td>
  </tr>
  <tr>
    <td>20190901</td>
    <td colspan="2">bblbablbalbal</td>
  </tr>
  <tr>
    <td>20180902</td>
    <td>may</td>
    <td>london</td>
  </tr>
  <tr>
    <td>20190902</td>
    <td colspan="2">bblbablbalbal</td>
  </tr>
</tbody>
</table>

Я пробовал следующим образом, но заголовки для сортировки не активируются: 

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.uikit.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.uikit.min.js"></script>
</head>
<body>
<table id="example" class="uk-table uk-table-hover uk-table-striped" style="width:100%">
   <thead>
      <tr>
        <th>creating date</th>
        <th>name</th>
        <th>location</th>
      </tr>
      <tr>
        <th>update date</th>
        <th colspan="2">comment</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>20180901</td>
        <td>john</td>
        <td>paris</td>
      </tr>
      <tr>
        <td>20190901</td>
        <td colspan="2">bblbablbalbal</td>
      </tr>
      <tr>
        <td>20180902</td>
        <td>may</td>
        <td>london</td>
      </tr>
      <tr>
        <td>20190902</td>
        <td colspan="2">bblbablbalbal</td>
      </tr>
    </tbody>
    </table>

<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>
...