Open In App

How to Select all Checkboxes in all Pages in jQuery DataTable ?

Last Updated : 13 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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:


selectALLCheckGIF


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:


selectALLCheckGIF


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:


selectALLCheckGIF


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to get all selected checkboxes in an array using jQuery ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to handle DataTable specific events using jQuery DataTable plugin ?
            

        
    
        
            

                Accelerated Mobile Pages (AMP pages)
            

        
    
        
            

                How to Move DataTable Search Filter to a Different Row with jQuery ?
            

        
    
        
            

                How to uncheck all other checkboxes apart from one using jQuery ?
            

        
    
        
            

                How to get all selected checkboxes in an array using jQuery ?
            

        
    
        
            

                Angular PrimeNG Skeleton DataTable
            

        
    
        
            

                Angular PrimeNG DataTable Scroll
            

        
    
        
            

                How to enable or disable nested checkboxes in jQuery ?
            

        
    
        
            

                How to remove all the options of a select box and then add one option and select it using JQuery ?
            

        
    
        
            

                How to Show and Hide div elements using Checkboxes ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        abhish8rzd                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox