在较小的设备中更改DataTables(jQuery + Bootstrap4)的'pagingType'选项 [英] Change 'pagingType' option of DataTables (jQuery+Bootstrap4) in smaller devices
本文介绍了在较小的设备中更改DataTables(jQuery + Bootstrap4)的'pagingType'选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用
我可以使用以下CSS解决方案，但我不想生成这些按钮内部DOM
.dataTables_paginate ul.pagination .paginate_button:not(.previous):not(.next){显示:无；}
$(document).ready(function(){$(#dataTable").dataTable({搜索:错误，资讯:错误，lengthChange:假，响应式的:是的，autoWidth:false，语言:{o分页:{sNext:下一个< i class ="fas fa-angle-double-right"></i>'，sPrevious:'< i class ="fas fa-angle-double-left"></i>以前的'}}，iDisplayLength:5回应式:{pageingType:简单"}});}); < 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">数据表分页</h4>< table class ="table" id ="dataTable">< thead>< tr>< th class ="all">名称</th>< th>类型</th>< th>方法</th>< th class ="all">日期</th></tr></thead>< tbody>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr></tbody></table></div> 以下是代码: Codepen
解决方案
这可以使用 pagingType 的窗口宽度条件来完成.
pagingType:$(窗口).width()<768?"simple":"simple_numbers" 查看示例片段.请调整大小并刷新以查看输出.
在代码段中，如果分辨率为大于768 ，那么您将看到所有 number 以及 next和previous 按钮.
然后降低到 768 ，您将只看到 next and previous 按钮.
$(document).ready(function(){$(#dataTable").dataTable({搜索:错误，资讯:错误，lengthChange:假，响应式的:是的，autoWidth:false，语言:{o分页:{sNext:下一个< i class ="fas fa-angle-double-right"></i>'，sPrevious:'< i class ="fas fa-angle-double-left"></i>以前的'}}，iDisplayLength:5pagesType:$(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">数据表分页</h4>< table class ="table" id ="dataTable">< thead>< tr>< th class ="all">名称</th>< th>类型</th>< th>方法</th>< th class ="all">日期</th></tr></thead>< tbody>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr>< tr>< td>名字</td>< td>类型1</td>< td> M123456</td>< td> 10/10/2019</td></tr></tbody></table></div> 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
解决方案
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>
这篇关于在较小的设备中更改DataTables(jQuery + Bootstrap4)的'pagingType'选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
