Question

有codepen demo如何使用搜索过滤器和分页来执行响应式数据表。但是，它仅与Bootstrap集成。我查看了MDL讨论论坛，但发现此类数据表没有MDL theme的现有实现。

我猜我必须自己编写集成，因为似乎没有。我将非常感谢如何整合html elements生成的动态jquery datatables。一个简单的步骤是将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>

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

1 个答案: