How to Select all Checkboxes in all Pages in jQuery DataTable ?
Last Updated :
30 Jul, 2024
Selecting all the table entries together at the same time in the jQuery data table can be achieved using the below methods. Before directly going to the implementation, first include the below CDN Links to your HTML document to implement the data table.
Using the fnGetNodes() method of dataTable
In this approach, we will use the fnGetNodes() method to select all the checkboxes of all pages of the data table and then check them by clicking on the Select All button.
Syntax:
const myTable = $('#myTable').dataTable({
stateSave: true
});
const allPagesCheckboxes = myTable.fnGetNodes();Example: The below code example implements the fnGetNodes() method to check all page checkboxes in jQuery dataTable.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to select all checkboxes in all
pages in Jquery DataTable?
</title>
<!-- Data table CSS CDN Link -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
integrity=
"sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.conatiner {
text-align: center;
}
.tableData {
margin: auto;
}
</style>
</head>
<body>
<div class="conatiner">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Select all the checkboxes of the table by
clicking the Select All button
</h3>
<table id="myTable" border="1px solid #ccc;"
class="tableData">
<thead>
<tr>
<th>
<button id="selectAll"
class="GFGSelect">
Select All
</button>
</th>
<th>Name</th>
<th>Age</th>
<th>Designation</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"
id="checbox1">
</td>
<td>Garvit Malhotra</td>
<td>25</td>
<td>Web Developer</td>
<td>Pune</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox2">
</td>
<td>Kunal Srivats</td>
<td>22</td>
<td>Software Engineer</td>
<td>Kolkata</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox3">
</td>
<td>Jordan Sandhu</td>
<td>32</td>
<td>Video Editor</td>
<td>Durban</td>
<td>South Africa</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox4">
</td>
<td>Sreenath Malinga</td>
<td>29</td>
<td>Head Coach</td>
<td>Colombo</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox5">
</td>
<td>Benjamin Smith</td>
<td>26</td>
<td>Blog/Content Writer</td>
<td>Melbourne</td>
<td>Australia</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- DataTable Script CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
integrity=
"sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- Custom Script -->
<script>
$(document).ready(() => {
const myTable = $('#myTable').dataTable({
stateSave: true
});
const allPagesCheckboxes = myTable.fnGetNodes();
console.log(allPagesCheckboxes);
$('#selectAll').click(function () {
const thisText = $(this).text();
if(thisText === "Unselect All"){
$('input[type="checkbox"]', allPagesCheckboxes)
.attr('checked', false);
$(this).text('Select All');
}
else{
$('input[type="checkbox"]', allPagesCheckboxes)
.attr('checked', true);
$(this).text('Unselect All');
}
});
});
</script>
</body>
</html>
Output:
Using the api().rows().nodes() methods
The api().rows().nodes() methods can also be used to select all rows of all the pages and then it can be used to check checkboxes of all the rows.
Syntax:
const myTable = $('#myTable').dataTable({
stateSave: true
});
const allPagesCheckboxes = myTable.api().rows().nodes();Example: The below code example uses the api().rows().nodes() method to select all the rows and check their checkboxes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to select all checkboxes in all
pages in Jquery DataTable?
</title>
<!-- Data table CSS CDN Link -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
integrity=
"sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.conatiner {
text-align: center;
}
.tableData {
margin: auto;
}
</style>
</head>
<body>
<div class="conatiner">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Select all the checkboxes of the table by
clicking the Select All button
</h3>
<table id="myTable" border="1px solid #ccc;"
class="tableData">
<thead>
<tr>
<th>
<button id="selectAll"
class="GFGSelect">
Select All
</button>
</th>
<th>Name</th>
<th>Age</th>
<th>Designation</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"
id="checbox1">
</td>
<td>Garvit Malhotra</td>
<td>25</td>
<td>Web Developer</td>
<td>Pune</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox2">
</td>
<td>Kunal Srivats</td>
<td>22</td>
<td>Software Engineer</td>
<td>Kolkata</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox3">
</td>
<td>Jordan Sandhu</td>
<td>32</td>
<td>Video Editor</td>
<td>Durban</td>
<td>South Africa</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox4">
</td>
<td>Sreenath Malinga</td>
<td>29</td>
<td>Head Coach</td>
<td>Colombo</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox5">
</td>
<td>Benjamin Smith</td>
<td>26</td>
<td>Blog/Content Writer</td>
<td>Melbourne</td>
<td>Australia</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- DataTable Script CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
integrity=
"sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- Custom Script -->
<script>
$(document).ready(() => {
const myTable = $('#myTable').dataTable({
stateSave: true
});
const allPagesCheckboxes = myTable.api().rows().nodes();
$('#selectAll').click(function () {
if($(this).text() === "Unselect All"){
$(allPagesCheckboxes).find('input[type="checkbox"]')
.attr('checked', false);
$(this).text('Select All');
}
else{
$(allPagesCheckboxes).find('input[type="checkbox"]')
.attr('checked', true);
$(this).text('Unselect All');
}
});
});
</script>
</body>
</html>
Output:
Using the api().cells().nodes() methods
The api().cells().nodes() methods are together used to select all the cells of the data table that can be used to check the checkboxes of all the pages and entries.
Syntax:
const myTable = $('#myTable').dataTable({
stateSave: true});
const allPagesCheckboxes = myTable.api().cells().nodes();Example: The below code example practically implements the above approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to select all checkboxes in all
pages in Jquery DataTable?
</title>
<!-- Data table CSS CDN Link -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
integrity=
"sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.conatiner {
text-align: center;
}
.tableData {
margin: auto;
}
</style>
</head>
<body>
<div class="conatiner">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Select all the checkboxes of the table by
clicking the Select All button
</h3>
<table id="myTable" border="1px solid #ccc;"
class="tableData">
<thead>
<tr>
<th>
<button id="selectAll"
class="GFGSelect">
Select All
</button>
</th>
<th>Name</th>
<th>Age</th>
<th>Designation</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"
id="checbox1">
</td>
<td>Garvit Malhotra</td>
<td>25</td>
<td>Web Developer</td>
<td>Pune</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox2">
</td>
<td>Kunal Srivats</td>
<td>22</td>
<td>Software Engineer</td>
<td>Kolkata</td>
<td>India</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox3">
</td>
<td>Jordan Sandhu</td>
<td>32</td>
<td>Video Editor</td>
<td>Durban</td>
<td>South Africa</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox4">
</td>
<td>Sreenath Malinga</td>
<td>29</td>
<td>Head Coach</td>
<td>Colombo</td>
<td>Sri Lanka</td>
</tr>
<tr>
<td>
<input type="checkbox"
id="checbox5">
</td>
<td>Benjamin Smith</td>
<td>26</td>
<td>Blog/Content Writer</td>
<td>Melbourne</td>
<td>Australia</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity=
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- DataTable Script CDN Link -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
integrity=
"sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- Custom Script -->
<script>
$(document).ready(() => {
const myTable = $('#myTable').dataTable({
stateSave: true
});
const allPagesCheckboxes = myTable.api().cells().nodes();
$('#selectAll').click(function () {
if($(this).text() === "Unselect All"){
$(allPagesCheckboxes).find('input[type="checkbox"]')
.attr('checked', false);
$(this).text('Select All');
}
else{
$(allPagesCheckboxes).find('input[type="checkbox"]')
.attr('checked', true);
$(this).text('Unselect All');
}
});
});
</script>
</body>
</html>
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing