时间戳

首页 > 解决方案 > 在较小的设备中更改 DataTables (jQuery+Bootstrap4) 的“pagingType”选项

jquery - 在较小的设备中更改 DataTables (jQuery+Bootstrap4) 的“pagingType”选项

问题描述

我正在使用启用了分页并显示带有页码（1、2、3、4、5、...、10）的“下一个/上一个”按钮的DataTables 。

我正在尝试使用插件提供的pagingType选项将其更改为仅在较小设备（小于 768 像素）中的“下一个/上一个”。

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

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

标签： jqueryhtmldatatableresponsive-designpaging

解决方案

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

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

对于没有 Bootstrap 的 Datatble，请使用：

@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>

推荐阅读