Change 'pagingType' option of DataTables (jQuery+Bootstrap4) in smaller devices
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
Solution
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>- Animate toggle height from 0 to auto or 100%
- How does the "position: sticky;" property work?
- Disabling android's chrome pull-down-to-refresh feature
- Placing national flags at start of sentence
- Clear-Site-Data "*" : Different behavior in both Firefox and Chrome
- How to programmatically Download a file from Google Drive, using Javascript and HTML? (NOT Google Drive API)
- Add CSS3 transition expand/collapse
- Remove content of p tag
- Email formatting basics (links in plain text emails)
- css file won't load when opening my website
- Should I use the .htm or .html file extension? Which one is correct?
- Can't figure out why element's height is not what I set it to
- How to submit form only once after multiple clicking on submit?
- Remove whitespace from SVG
- Why does CSS ::part override JavaScript element.style?
- Remove "content" CSS property "onclick" button for the entire website
- ReactJS - .JS vs .JSX
- Markdown no break (nobr)?
- Not able to trim displayed value in Dropdown
- Transition between routes in react-router-dom v6.3
- Show div even if empty
- some code i don't understand well in jquery
- Make Search Box closes if user clicks anywhere?
- How to handle required fields in display:"none"
- How to make a DIV visible and invisible with JavaScript?
- Blinking animation
- formvalidation.io external submit button
- webpage templates vs building from scratch
- How to add static text inside an input form
- Google Chrome Developer tools shows browser default font size as 18 pixels?