File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
​
      
      
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Lead Record Flag</th>
            <th>Multiple Record Flag</th>
            <th>Button</th>
            <th>Name</th>
            <th>Active Ind</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Show Other</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Lead Record Flag</th>
            <th>Multiple Record Flag</th>
            <th>Button</th>
            <th>Name</th>
            <th>Active Ind</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Show Other</th>
          </tr>
        </tfoot>
​
        <tbody>
          
          <tr data-user="1">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>1</td>
            <td>
              <div style="display:inline-block; width:9.5rem">
                <input type="button" value="+" name="view_history" style="width:1.5rem; background-color:#7fbf7f; color:white; font-weight:normal; border:1px solid #979797; margin-right:.1rem"/>
                <input type="submit" value="modify" name="modify" style="margin-right:.11rem"/>
                <input type="submit" value="disable" name="disable"/>
              </div>
            </td>
            <td>Garrett Winters</td>
            <td>Y</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>0</td>
            </form>
          </tr>
            
          <tr data-user="2">
            <form action = "example_update" method="POST">
              <td>0</td>
              <td>1</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            
            <td>Garrett Winters</td>
            <td>N</td>
            <td>Edinburgh</td>
            <td>60</td>
            <td>2010/04/25</td>
            <td>$5,300</td>
            <td>0</td>
           </form>
          </tr>
          
          <tr data-user="3">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>1</td>
              <td>
              <div style="display:inline-block; width:9.5rem">
                <input type="button" value="+" style="width:1.5rem; background-color:#7fbf7f; color:white; font-weight:normal; border:1px solid #979797; margin-right:.1rem"/>
                <input type="submit" value="reactivate" name="reactivate"/>
              </div>
              </td>
            <td>Ashton Cox</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
            
          <tr data-user="4">
            <form action = "example_update" method="POST">
              <td>0</td>
              <td>1</td>
            <td>
              <div style="display:inline-block; width:9.5rem">
                <input type="submit" value="reactivate" name="reactivate"/>
              </div>
            </td>
            
            <td>Ashton Cox</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$5,600</td>
            <td>0</td>
            </form>
          </tr>
            
          
          <tr data-user="5">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>0</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            <td>Placeholder1</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
          
           <tr data-user="6">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>0</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            <td>Placeholder2</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
          
           <tr data-user="7">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>0</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            <td>Placeholder3</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
          
           <tr data-user="8">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>0</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            <td>Placeholder4</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
          
          <tr data-user="9">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>0</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            <td>Placeholder5</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
          
          <tr data-user="10">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>0</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            <td>Placeholder5</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
          
            <tr data-user="11">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>0</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            <td>Placeholder6</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
          
         <tr data-user="12">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>0</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            <td>Placeholder7</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
          
         <tr data-user="13">
            <form action = "example_update" method="POST">
              <td>1</td>
              <td>1</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="button" value="+" name="view_history" style="width:1.5rem; background-color:#7fbf7f; color:white; font-weight:normal; border:1px solid #979797; margin-right:.1rem"/>
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            <td>Placeholder8</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
          
          <tr data-user="14">
            <form action = "example_update" method="POST">
              <td>0</td>
              <td>1</td>
              <td>
                <div style="display:inline-block; width:9.5rem">
                  <input type="submit" value="reactivate" name="reactivate"/>
                </div>
              </td>
            <td>Placeholder8</td>
            <td>N</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
           </form>
          </tr>
​
        </tbody>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready( function () {
​
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      return data[0] == 1 || data[9] == 1 ? true : false;
    }
  );
​
  
  var table = $('#example').DataTable( {
      "order": [],
      "columnDefs": [
        {"type": "html-input", "targets": [4,5,6,7,8,9]},
        { "visible": false, "targets": [0,1,9]},
        {"orderable": false, "targets": "_all"}
      ],
        
  });
        
​
​
  function updateShowActive(name, flag) {
     // Iterate all rows where name equals name clicked
     table.rows( function ( idx, data, node ) {
        return data[3] === name ? true : false;
        } )
      .every( function ( rowIdx, tableLoop, rowLoop ) {
        // Get the data for the row
        var data = this.data();
        
        // If inactive row then set the flag
        if (data[0] == 0) {
          data[9] = flag;
          this.data( data );  // Update the row data
        }
      } );       
        }
                  
  $('#example tbody').on('click', "input[value='+']", function() {
      var clickedButton = event.target;
      var viewName = clickedButton.id;
      clickedButton.value = '-';
      clickedButton.style.backgroundColor = "#DB4C4C";
      clickedButton.style.fontWeight = "bold";
        
      // Get row clicked
      var row = $(this).closest('tr');
      // Get name
      var name = table.row( row ).data()[3];
      // Update to show
      updateShowActive(name, 1);
​
      table.draw();
    
  });
  
   $('#example tbody').on('click', "input[value='-']", function() {
      var clickedButton = event.target;
      var viewName = clickedButton.id;
      clickedButton.value = '+';
      clickedButton.style.backgroundColor = "#7fbf7f";
      clickedButton.style.fontWeight = "normal";
​
      // Get row clicked
      var row = $(this).closest('tr');
      // Get name
      var name = table.row( row ).data()[3];
      // Update to hide
      updateShowActive(name, 0);
​
      table.draw();
    
  });
} );
​
1 warning
Line 32: Use '===' to compare with '0'.
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers