在较小的设备中更改 DataTables (jQuery+Bootstrap4) 的 'pagingType' 选项

Question

我正在使用 DataTables，它启用了分页并显示 'next/previous' 带有页码（1,2,3,4,5,...,10）的按钮。

我正在尝试使用插件提供的 pagingType 选项在较小的设备（小于 768px）中将其更改为仅 'next/previous'。

我尝试过使用响应式方法，但它不起作用：

responsive: {
  pagingType: "simple"
}

我可以使用以下 css 解决方案，但我不想生成这些按钮里面 DOM

.dataTables_paginate ul.pagination .paginate_button:not(.previous):not(.next){    
  display: none;    
}

$(document).ready(function() {
  $("#dataTable").dataTable({
    searching: false,
    info: false,
    lengthChange: false,
    responsive: true,
    autoWidth: false,
    oLanguage: {
      oPaginate: {
        sNext: 'Next <i class="fas fa-angle-double-right"></i>',
        sPrevious: '<i class="fas fa-angle-double-left"></i> Previous'
      }
    },
    iDisplayLength: 5,
    responsive: {
      pagingType: "simple"
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/datatables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="card card-body card-panel mb-3">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/datatables.min.js"></script>

  <h4 class="card-title">Datatable Paging</h4>
  <table class="table" id="dataTable">
    <thead>
      <tr>
        <th class="all">Name</th>
        <th>Type</th>
        <th>Method</th>
        <th class="all">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
    </tbody>
  </table>
</div>

代码如下：Codepen

Answer 1

对于 Datatables+Bootstrap，使用 CSS 媒体查询：

@media (max-width: 767px){
    .pagination .paginate_button:not(.previous):not(.next){
        display: none;
    }
}

对于没有 Bootstrap 的数据表，使用：

@media (max-width: 767px){
    .dataTables_paginate span{
        display: none;
    }
}

代码：

$(document).ready(function() {
  $("#dataTable").dataTable({
    searching: false,
    info: false,
    lengthChange: false,
    responsive: true,
    autoWidth: false,
    oLanguage: {
      oPaginate: {
        sNext: 'Next <i class="fas fa-angle-double-right"></i>',
        sPrevious: '<i class="fas fa-angle-double-left"></i> Previous'
      }
    },
    iDisplayLength: 5,
    responsive: {
      pagingType: "simple"
    }
  });
});

@media (max-width: 767px) {
  .pagination .paginate_button:not(.previous):not(.next) {
    display: none;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/datatables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="card card-body card-panel mb-3">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/datatables.min.js"></script>

  <h4 class="card-title">Datatable Paging</h4>
  <table class="table" id="dataTable">
    <thead>
      <tr>
        <th class="all">Name</th>
        <th>Type</th>
        <th>Method</th>
        <th class="all">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

CSS 唯一的答案是：

.dataTables_paginate ul.pagination .paginate_button:not(.previous):not(.next){
  display: none;
}

$(document).ready(function() {
  $("#dataTable").dataTable({
    searching: false,
    info: false,
    lengthChange: false,
    responsive: true,
    autoWidth: false,
    oLanguage: {
      oPaginate: {
        sNext: 'Next <i class="fas fa-angle-double-right"></i>',
        sPrevious: '<i class="fas fa-angle-double-left"></i> Previous'
      }
    },
    iDisplayLength: 5,
    responsive: {
      pagingType: "simple"
    }
  });
});

.dataTables_paginate ul.pagination .paginate_button:not(.previous):not(.next) {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/datatables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="card card-body card-panel mb-3">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/datatables.min.js"></script>

  <h4 class="card-title">Datatable Paging</h4>
  <table class="table" id="dataTable">
    <thead>
      <tr>
        <th class="all">Name</th>
        <th>Type</th>
        <th>Method</th>
        <th class="all">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

这可以使用 pagingType 的 Window width 条件来完成。

pagingType: $(window).width() < 768 ? "simple" : "simple_numbers"

检查代码段以获取示例。请调整大小并刷新以查看输出。

在代码段中，如果分辨率为 more then 768，那么您将看到所有 number 以及 next and previous 按钮。

低于 768 您将只能看到 next and previous 按钮。

$(document).ready(function() {
  $("#dataTable").dataTable({
    searching: false,
    info: false,
    lengthChange: false,
    responsive: true,
    autoWidth: false,
    oLanguage: {
      oPaginate: {
        sNext: 'Next <i class="fas fa-angle-double-right"></i>',
        sPrevious: '<i class="fas fa-angle-double-left"></i> Previous'
      }
    },
    iDisplayLength: 5,
    pagingType: $(window).width() < 768 ? "simple" : "simple_numbers"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/datatables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/datatables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet" />
<div class="card card-body card-panel mb-3">
  <h4 class="card-title">Datatable Paging</h4>
  <table class="table" id="dataTable">
    <thead>
      <tr>
        <th class="all">Name</th>
        <th>Type</th>
        <th>Method</th>
        <th class="all">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
      <tr>
        <td>First Name</td>
        <td>Type 1</td>
        <td>M123456</td>
        <td>10/10/2019</td>
      </tr>
    </tbody>
  </table>
</div>

在较小的设备中更改 DataTables (jQuery+Bootstrap4) 的 'pagingType' 选项

Change 'pagingType' option of DataTables (jQuery+Bootstrap4) in smaller devices

html

datatable

paging

jquery

responsive-design