Web Analytics Made Easy -
StatCounter Checkbox that triggers a table row to open when it's clicked - CodingForum

Announcement

Collapse
No announcement yet.

Checkbox that triggers a table row to open when it's clicked

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Checkbox that triggers a table row to open when it's clicked

    I have a datatable that needs some specific functionality. I have a checkbox in the table header that when clicked selects all checkboxed rows in the table which works fine. I created a table row (id="table-row-span) that spans across the table that I want to open when the checkbox id="checkbox-main" is clicked. I made a few attemps but since my JS is not strong nothing happened.


    Code:
    <script>
    $(document).ready(function () {
        $('#checkbox-main').change(function () {
            if (!this.checked) 
                $('#table-row-span').fadeIn('slow');
            else 
                $('#table-row-span').fadeOut('slow');
        });
        $('#checkbox-main').change();
    });
    </script>
    
    <script>
        $(document).ready(function() {
      $('#overflow').DataTable( {
         "dom": '<"top"f>rt<"bottom"ilp><"clear">',  
    
    
    
    	colReorder: true,
    
    		'language': {
    		        'search': '_INPUT_',
    		        'searchPlaceholder': ' Search Within:'
    		    },
    
    
         "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
    
       } );
     } );
    
     </script> 
    
    <!----------------------------Tables---------------------------->  
    <div class="col-lg-9" id="datatables">   
                        
                    <div class="row overflow">
                        <table id="overflow" class="datatable colinput table table-striped col-md-12 col-xs-6">
                        
                            <thead>                                            
                                <tr style="background-color: #CCCCCC; border-bottom: 2px solid black;">
                                    <th style="width:50px;"><input type="checkbox" id="select_all" /></th>
                                    <th style="width:120px;">Name</th>
                                    <th>Type</th>
                                    <th style="width:120px;">Workflows</th>
                                    <th>Last Executed</th>
                                    <th style="width:120px;">Groups</th>
                                    <th>Description</th> 
                                </tr>
                                
                                <tr>
        							<th colspan="7" class="text-center" id="table-row-span" style="font-size:12px; font-weight: normal;">All 10 entries on this page are selected. <a href="#">Select all 52 entries in this table.</a></th>
      							</tr>   
                            </thead>
                            
    
                            
                            
                            <tfoot>
                                <tr>
                                	
                                    <th></th>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Workflows</th>
                                    <th>Last Executed</th>
                                    <th>Groups</th>
                                    <th>Description</th>
                                </tr>
                            </tfoot>
                            <tbody>
                            
    
     
                                <tr>
                                    <td><input type="checkbox" class="checkbox" id="checkbox-main" value="1" style="margin-left:10px;"></td>
                                    <td>Rule 11</td> 
                                    <td>Validation</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/16/2016 : 9:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="2" style="margin-left:10px;"></td>
                                    <td>Rule 2</td> 
                                    <td>Modification</td>
                                    <td>2</td>
                                    <td class="rightAlign">07/15/2016 : 10:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                                          
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="3" style="margin-left:10px;"></td>
                                    <td>Rule 4</td> 
                                    <td>Resources</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/15/2016 : 7:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="4" style="margin-left:10px;"></td>
                                    <td>Rule 6</td> 
                                    <td>Modification</td>
                                    <td>7</td>
                                    <td class="rightAlign">07/15/2016 : 12:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="5" style="margin-left:10px;"></td>
                                    <td>Rule 8</td> 
                                    <td>Resources</td>
                                    <td>12</td>
                                    <td class="rightAlign">07/15/2016 : 8:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="6" style="margin-left:10px;"></td>
                                    <td>Rule 1</td> 
                                    <td>Modification</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/16/2016 : 9:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="7" style="margin-left:10px;"></td>
                                    <td>Rule 3</td> 
                                    <td>Resources</td>
                                    <td>2</td>
                                    <td class="rightAlign">07/15/2016 : 10:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
    
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="8" style="margin-left:10px;"></td>
                                    <td>Rule 15</td> 
                                    <td>Validation</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/15/2016 : 7:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="9" style="margin-left:10px;"></td>
                                    <td>Rule 6</td> 
                                    <td>Service</td>
                                    <td>7</td>
                                    <td class="rightAlign">07/15/2016 : 12:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="10" style="margin-left:10px;"></td>
                                    <td>Rule 6</td> 
                                    <td>Modification</td>
                                    <td>12</td>
                                    <td class="rightAlign">07/15/2016 : 8:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>  
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="1" style="margin-left:10px;"></td>
                                    <td>Rule 11</td> 
                                    <td>Validation</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/16/2016 : 9:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="2" style="margin-left:10px;"></td>
                                    <td>Rule 2</td> 
                                    <td>Validation</td>
                                    <td>2</td>
                                    <td class="rightAlign">07/15/2016 : 10:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
    
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="3" style="margin-left:10px;"></td>
                                    <td>Rule 4</td> 
                                    <td>Resources</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/15/2016 : 7:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="4" style="margin-left:10px;"></td>
                                    <td>Rule 6</td> 
                                    <td>Modification</td>
                                    <td>7</td>
                                    <td class="rightAlign">07/15/2016 : 12:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="5" style="margin-left:10px;"></td>
                                    <td>Rule 8</td> 
                                    <td>Service</td>
                                    <td>12</td>
                                    <td class="rightAlign">07/15/2016 : 8:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="6" style="margin-left:10px;"></td>
                                    <td>Rule 1</td> 
                                    <td>Resources</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/16/2016 : 9:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="7" style="margin-left:10px;"></td>
                                    <td>Rule 3</td> 
                                    <td>Modification</td>
                                    <td>2</td>
                                    <td class="rightAlign">07/15/2016 : 10:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
    
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="8" style="margin-left:10px;"></td>
                                    <td>Rule 15</td> 
                                    <td>Validation</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/15/2016 : 7:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="9" style="margin-left:10px;"></td>
                                    <td>Rule 6</td> 
                                    <td>Modification</td>
                                    <td>7</td>
                                    <td class="rightAlign">07/15/2016 : 12:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="10" style="margin-left:10px;"></td>
                                    <td>Rule 6</td> 
                                    <td>Validation</td>
                                    <td>12</td>
                                    <td class="rightAlign">07/15/2016 : 8:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr> 
                                
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="1" style="margin-left:10px;"></td>
                                    <td>Rule 11</td> 
                                    <td>Resources</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/16/2016 : 9:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="2" style="margin-left:10px;"></td>
                                    <td>Rule 2</td> 
                                    <td>Modification</td>
                                    <td>2</td>
                                    <td class="rightAlign">07/15/2016 : 10:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
    
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="3" style="margin-left:10px;"></td>
                                    <td>Rule 4</td> 
                                    <td>Validation</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/15/2016 : 7:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="4" style="margin-left:10px;"></td>
                                    <td>Rule 6</td> 
                                    <td>Modification</td>
                                    <td>7</td>
                                    <td class="rightAlign">07/15/2016 : 12:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="5" style="margin-left:10px;"></td>
                                    <td>Rule 8</td> 
                                    <td>Service</td>
                                    <td>12</td>
                                    <td class="rightAlign">07/15/2016 : 8:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="6" style="margin-left:10px;"></td>
                                    <td>Rule 1</td> 
                                    <td>Validation</td>
                                    <td>4</td>
                                    <td class="rightAlign">07/16/2016 : 9:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
       
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="9" style="margin-left:10px;"></td>
                                    <td>Rule 6</td> 
                                    <td>Service</td>
                                    <td>7</td>
                                    <td class="rightAlign">07/15/2016 : 12:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox" value="10" style="margin-left:10px;"></td>
                                    <td>Rule 6</td> 
                                    <td>Modification</td>
                                    <td>12</td>
                                    <td class="rightAlign">07/15/2016 : 8:00am</td>
                                    <td>3</td>
                                    <td>User defined description...</td>
                                </tr> 
                                
                                                          
                            </tbody>
                        </table>
                        </div>
                        
        </div>
    <!---------------------- Close Tables--------------------------->
    Last edited by vinyl-junkie; Sep 23, 2016, 08:07 PM. Reason: added code tags

  • #2
    Could you please put your code inside of [php] tags? It's the only way to ensure it's readable and nothing gets cut off.

    Off the top of my head you should really have your script tags UNDER your HTML to ensure you're not trying to access anything that doesn't exist yet. Also I recommend using jQuery delegates with the document.body object instead of a selector with a specific ID.

    I'll look at it some more when I can test out your code.
    I almost always format my code examples with [php][/php] tags because it looks nicer than the regular [code] tag. That does not mean the code example is in PHP.

    Comment


    • #3
      I've looked this over and noticed a few things and actually mostly with your HTML:

      1. Your code works fine, thought it is a bit backwards. When you click on the checkbox with an ID of checkbox-main it toggles the visibility of a <th> with the ID of table-row-span.

      The thing is, this thing starts off visible, and your code only makes it visible when the checkbox is unchecked! Also this piece of code:

      PHP Code:
       $('#checkbox-main').change() 
      That literally does nothing; I don't know why it's there. The jQuery .change() function is for binding an event to the "on changed" handler. So if you just type change() with nothing inside ... it doesn't do anything at all. If you wanted to change the checked/unchecked property of the checkbox with code you'd do this:

      PHP Code:
      $( "#checkbox-main" ).prop"checked"true ); 
      I would change your code and get rid of the ! in your if statement:


      PHP Code:
          <script>
              $(
      document).ready(function () {

                  $(
      '#checkbox-main').change(function () {

                      if (
      this.checked){
                          $(
      '#table-row-span').fadeIn('slow');
                      } else {
                          $(
      '#table-row-span').fadeOut('slow');
                      }
                  });
                  $(
      '#checkbox-main').change();
              });
          </
      script
      3. Your HTML has some strange things. Why is checkbox-main in your very first row of the <tbody>? You already have a checkbox in your <th> called select_all, wouldn't that be more appropriate? Because you're using the "first" <tr> in the body tag, if you sort the table with DataTable's sorting feature, it will move that first row and then you have no idea where your special checkbox went.

      More importantly, your special span table-row-span starts off visible so your checkbox code wouldn't really do anything at first since it's already visible. You'd want to use CSS to have it start out hidden.

      Here is a full HTML file I used for testing with several optimizations to try out, including using jQuery Delegates for the events. Generally it's a good practice to put your <script> tags below your HTML so you never have to worry about them accessing non-existing elements.

      Note: I had to comment out some tags near the end for this forum, you need to un-comment them if you want this code to actually run.

      PHP Code:
      <!DOCTYPE html>
      <
      html xmlns="http://www.w3.org/1999/xhtml">
      <
      head>
          <
      title></title>

          <
      link rel="stylesheet" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" type="text/css" />

      </
      head>
      <
      body>
          <!----------------------------
      Tables---------------------------->
          <
      div class="col-lg-9" id="datatables">

              <
      div class="row overflow">
                  <
      table id="overflow" class="datatable colinput table table-striped col-md-12 col-xs-6">

                      <
      thead>
                          <
      tr style="background-color: #CCCCCC; border-bottom: 2px solid black;">
                              <
      th style="width:50px;"><input type="checkbox" id="select_all" /></th>
                              <
      th style="width:120px;">Name</th>
                              <
      th>Type</th>
                              <
      th style="width:120px;">Workflows</th>
                              <
      th>Last Executed</th>
                              <
      th style="width:120px;">Groups</th>
                              <
      th>Description</th>
                          </
      tr>
                          <
      tr>
                              <
      th colspan="7" class="text-center" id="table-row-span" style="font-size:12px; font-weight: normal;">
                                  &
      nbsp;
                                  <
      span id="select_all_prompt" style="display:none;">
                                      
      All 10 entries on this page are selected. <a href="#">Select all 52 entries in this table.</a>
                                  </
      span>
                              </
      th>
                          </
      tr>
                      </
      thead>
                      <
      tfoot>
                          <
      tr>
                              <
      th></th>
                              <
      th>Name</th>
                              <
      th>Type</th>
                              <
      th>Workflows</th>
                              <
      th>Last Executed</th>
                              <
      th>Groups</th>
                              <
      th>Description</th>
                          </
      tr>
                      </
      tfoot>
                      <
      tbody>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" id="checkbox-main" value="1" style="margin-left:10px;"></td>
                              <
      td>Rule 11</td>
                              <
      td>Validation</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/16/2016 9:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="2" style="margin-left:10px;"></td>
                              <
      td>Rule 2</td>
                              <
      td>Modification</td>
                              <
      td>2</td>
                              <
      td class="rightAlign">07/15/2016 10:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>

                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="3" style="margin-left:10px;"></td>
                              <
      td>Rule 4</td>
                              <
      td>Resources</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/15/2016 7:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="4" style="margin-left:10px;"></td>
                              <
      td>Rule 6</td>
                              <
      td>Modification</td>
                              <
      td>7</td>
                              <
      td class="rightAlign">07/15/2016 12:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="5" style="margin-left:10px;"></td>
                              <
      td>Rule 8</td>
                              <
      td>Resources</td>
                              <
      td>12</td>
                              <
      td class="rightAlign">07/15/2016 8:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>

                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="6" style="margin-left:10px;"></td>
                              <
      td>Rule 1</td>
                              <
      td>Modification</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/16/2016 9:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="7" style="margin-left:10px;"></td>
                              <
      td>Rule 3</td>
                              <
      td>Resources</td>
                              <
      td>2</td>
                              <
      td class="rightAlign">07/15/2016 10:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>

                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="8" style="margin-left:10px;"></td>
                              <
      td>Rule 15</td>
                              <
      td>Validation</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/15/2016 7:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="9" style="margin-left:10px;"></td>
                              <
      td>Rule 6</td>
                              <
      td>Service</td>
                              <
      td>7</td>
                              <
      td class="rightAlign">07/15/2016 12:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="10" style="margin-left:10px;"></td>
                              <
      td>Rule 6</td>
                              <
      td>Modification</td>
                              <
      td>12</td>
                              <
      td class="rightAlign">07/15/2016 8:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="1" style="margin-left:10px;"></td>
                              <
      td>Rule 11</td>
                              <
      td>Validation</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/16/2016 9:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="2" style="margin-left:10px;"></td>
                              <
      td>Rule 2</td>
                              <
      td>Validation</td>
                              <
      td>2</td>
                              <
      td class="rightAlign">07/15/2016 10:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>

                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="3" style="margin-left:10px;"></td>
                              <
      td>Rule 4</td>
                              <
      td>Resources</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/15/2016 7:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="4" style="margin-left:10px;"></td>
                              <
      td>Rule 6</td>
                              <
      td>Modification</td>
                              <
      td>7</td>
                              <
      td class="rightAlign">07/15/2016 12:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="5" style="margin-left:10px;"></td>
                              <
      td>Rule 8</td>
                              <
      td>Service</td>
                              <
      td>12</td>
                              <
      td class="rightAlign">07/15/2016 8:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>

                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="6" style="margin-left:10px;"></td>
                              <
      td>Rule 1</td>
                              <
      td>Resources</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/16/2016 9:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="7" style="margin-left:10px;"></td>
                              <
      td>Rule 3</td>
                              <
      td>Modification</td>
                              <
      td>2</td>
                              <
      td class="rightAlign">07/15/2016 10:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>

                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="8" style="margin-left:10px;"></td>
                              <
      td>Rule 15</td>
                              <
      td>Validation</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/15/2016 7:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="9" style="margin-left:10px;"></td>
                              <
      td>Rule 6</td>
                              <
      td>Modification</td>
                              <
      td>7</td>
                              <
      td class="rightAlign">07/15/2016 12:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="10" style="margin-left:10px;"></td>
                              <
      td>Rule 6</td>
                              <
      td>Validation</td>
                              <
      td>12</td>
                              <
      td class="rightAlign">07/15/2016 8:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>

                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="1" style="margin-left:10px;"></td>
                              <
      td>Rule 11</td>
                              <
      td>Resources</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/16/2016 9:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="2" style="margin-left:10px;"></td>
                              <
      td>Rule 2</td>
                              <
      td>Modification</td>
                              <
      td>2</td>
                              <
      td class="rightAlign">07/15/2016 10:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>

                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="3" style="margin-left:10px;"></td>
                              <
      td>Rule 4</td>
                              <
      td>Validation</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/15/2016 7:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="4" style="margin-left:10px;"></td>
                              <
      td>Rule 6</td>
                              <
      td>Modification</td>
                              <
      td>7</td>
                              <
      td class="rightAlign">07/15/2016 12:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="5" style="margin-left:10px;"></td>
                              <
      td>Rule 8</td>
                              <
      td>Service</td>
                              <
      td>12</td>
                              <
      td class="rightAlign">07/15/2016 8:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>

                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="6" style="margin-left:10px;"></td>
                              <
      td>Rule 1</td>
                              <
      td>Validation</td>
                              <
      td>4</td>
                              <
      td class="rightAlign">07/16/2016 9:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>

                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="9" style="margin-left:10px;"></td>
                              <
      td>Rule 6</td>
                              <
      td>Service</td>
                              <
      td>7</td>
                              <
      td class="rightAlign">07/15/2016 12:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>
                          <
      tr>
                              <
      td><input type="checkbox" class="checkbox" value="10" style="margin-left:10px;"></td>
                              <
      td>Rule 6</td>
                              <
      td>Modification</td>
                              <
      td>12</td>
                              <
      td class="rightAlign">07/15/2016 8:00am</td>
                              <
      td>3</td>
                              <
      td>User defined description...</td>
                          </
      tr>


                      </
      tbody>
                  </
      table>
              </
      div>

          </
      div>
          <!---------------------- 
      Close Tables--------------------------->
          

          
      // I had to comment these out because this forum does weird things when you have multiple <script>
          // tags in your code. Obviously you need to un-comment these if you want this example to work. 
          // <script src="../Scripts/jquery-2.1.0.js"></script>
          // <script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
          
      <script>
              $(
      document.body).on("change"'#select_all', function () {

                  if (
      this.checked) {
                      $(
      '#select_all_prompt').fadeIn('slow');

                      
      //The following code will instantly check all visible checkboxes
                      
      $("#overflow").find("input:checkbox").prop("checked"true);
                  }
                  else {
                      $(
      '#select_all_prompt').fadeOut('slow');
                      
                      
      //The following code will instantly uncheck all visible checkboxes
                      
      $("#overflow").find("input:checkbox").prop("checked"false);
                  }
              });

              $(
      document).ready(function () {
                  $(
      '#overflow').DataTable({
                      
      "dom"'<"top"f>rt<"bottom"ilp><"clear">',

                      
      colReordertrue,

                      
      'language': {
                          
      'search''_INPUT_',
                          
      'searchPlaceholder'' Search Within:'
                      
      },

                      
      "lengthMenu": [[102550, -1], [102550"All"]]
                  });
              });
          </
      script>

      </
      body>
      </
      html
      This has one big flaw that I see: If you select all 10 and then sort the table, your selection gets jumbled up. This can only select or deselect the ones that are on the screen so if you "select all" and then sort a row and then hit the checkbox again, only the currently-visible checkboxes will be unselected, others hidden by DataTables will still be selected. So it's up to you to figure out how to do the "Select all Rows in this Table" feature and to work out that bug.

      Data Tables actually already has a checkbox solution you can read about on their documentation: https://datatables.net/extensions/se.../checkbox.html - I recommend using their method and then figuring out a way to select top 10 or select all from within the API of DataTables instead of trying to do it like you are now.
      Last edited by sagebrushfire; Sep 24, 2016, 11:06 AM.
      I almost always format my code examples with [php][/php] tags because it looks nicer than the regular [code] tag. That does not mean the code example is in PHP.

      Comment

      Working...
      X