jquery - 使用 MDL 主题更新 jquery 数据表布局

Question

有这个codepen demo如何使用搜索过滤器和分页制作响应式数据表。但是，它仅与 Bootstrap 集成。我检查了 MDL 讨论论坛，但没有发现针对这种数据表的 MDL 主题 的现有实现。

我猜我将不得不自己编写集成，因为似乎没有。我将感谢有关如何集成由 jquery datatables 生成的动态 html 元素 的指示。一个简单的步骤就是将 Search 框主题从 Bootstrap 更改为 MDL 主题。我将感谢有关如何执行该基本步骤的指示。然后我可以重复它进行分页和下拉。

Answer 1

它正在技术审查中，但 DataTables 确实有 MDL 主题，这里是一个小例子:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.material.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.material.min.css">
<section class="mdl-grid content">
  <div class="posts-container mdl-cell mdl-cell--12-col mdl-grid">
    <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet
                  mdl-cell--12-col-desktop">
      <div class="mdl-card__title mdl-color-text--grey-800">
        <h2 class="mdl-card__title-text" id="users_list">Users List</h2>
      </div>
      <div class="mdl-card__supporting-text mdl-color-text--grey-600">
        <table id='users-activity-table' class="display">
          <thead>
            <tr>
              <th>Action</th>
              <th>User Name</th>
              <th>Time-stamp</th>
            </tr>
          </thead>
          <tbody id="usbody">
            <tr>
              <td> Login </td>
              <td> Mark Van-Helen2 </td>
              <td> Today </td>
            </tr>
            <tr>
              <td> Logout </td>
              <td> Mark Van-Helen </td>
              <td> Also Today </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
<script>
  $(document).ready(function() {
    $('#users-activity-table').DataTable({
      columnDefs: [{
        targets: [0, 1, 2],
        className: 'mdl-data-table__cell--non-numeric'
      }]
    });
  });
</script>