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
from Change 'pagingType' option of DataTables (jQuery+Bootstrap4) in smaller devices
No comments:
Post a Comment