问题
I am working with DataTables which is having paging enabled and shows 'next/previous' buttons with page-numbers(1,2,3,4,5,...,10).
I am trying to change this to only 'next/previous' in smaller devices (less than 768px) using pagingType option provided by plugin.
I have tried using responsive method but its not working:
responsive: {
pagingType: "simple"
}
I can have solution using following css but I want not to generate those buttons inside 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>Here is the code: Codepen
回答1:
This can be done using Window width condition for pagingType.
pagingType: $(window).width() < 768 ? "simple" : "simple_numbers"
Check Snippet for the example. Please resize and refresh to view the output.
In Snippet if resolution is more then 768 then you will see the all the number along with next and previous button.
and lower then 768 you will see only next and previous button.
$(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>回答2:
For Datatables+Bootstrap, use CSS media query:
@media (max-width: 767px){
.pagination .paginate_button:not(.previous):not(.next){
display: none;
}
}
For Datatble wothout Bootstrap, use:
@media (max-width: 767px){
.dataTables_paginate span{
display: none;
}
}
Code:
$(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>回答3:
CSS only answer will be:
.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>来源：https://stackoverflow.com/questions/57695135/change-pagingtype-option-of-datatables-jquerybootstrap4-in-smaller-devices