Change 'pagingType' option of DataTables (jQuery+Bootstrap4) in smaller devices-Twitter bootstrap

SureshKaria
August 28, 2019
262 views
2 votes
3 Answers

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

Answers

Chosen as BEST ANSWER

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>

(Edit)

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.