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

问题描述 投票:0回答:3

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

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

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

responsive: {
  pagingType: "simple"
}

output

我可以使用以下 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

html jquery datatable pagination responsive-design
3个回答
3
投票

这可以使用

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>


2
投票

对于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>


1
投票

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>

© www.soinside.com 2019 - 2024. All rights reserved.