我正在使用DataTables,它启用了分页并显示带有页码(1,2,3,4,5,...,10)的“下一个/上一个”按钮。
我正在尝试使用插件提供的 pagingType 选项将其更改为仅在较小设备(小于 768px)中的“下一个/上一个”。
我尝试过使用响应式方法,但它不起作用:
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
这可以使用
Window width
的 pagingType
条件来完成。
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+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>
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>