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>Button</th>
            <th>Name</th>
            <th>Active</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Show Active Flag</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
             <th>Button</th>
            <th>Name</th>
            <th>Active</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Show Active Flag</th>
          </tr>
        </tfoot>
​
        <tbody>
          <tr data-user="1">
            <td></td>
            <td>Garrett Winters</td>
            <td>0</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>0</td>
          </tr>
          <tr data-user="2">
            <td>
                <input type="button" id="Garrett Winters" value="+" style="width:1.5rem; background-color:#7fbf7f; color:white; font-weight:normal; border:1px solid #979797"/>
            </td>
            <td>Garrett Winters</td>
            <td>1</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
            <td>0</td>
          </tr>
          <tr data-user="3">
            <td>
                <input type="button" id="Ashton Cox" value="+" style="width:1.5rem; background-color:#7fbf7f; color:white; font-weight:normal; border:1px solid #979797"/>
            </td>
            <td>Ashton Cox</td>
            <td>1</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$5,600</td>
            <td>0</td>
          </tr>
            <tr data-user="4">
            <td>
            </td>
            <td>Ashton Cox</td>
            <td>0</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2012/03/29</td>
            <td>$4,800</td>
            <td>0</td>
          </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 () {
  
  var viewName = '';
  
  // Make sure active column is always sorted in the same direction
  // with active = 1 above active = 0.
  $.extend( $.fn.dataTable.ext.type.order, {
    "active-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    },
  
    "active-asc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
  } );
  
  
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      
      // Always show active === 1
      if ( data[2] == 1 ) {
        return true;
      }
      
      // Otherwise is active flag is 1 then show or if 0 hide
      return data[7] == 1;
    }
  );
​
  
  var table = $('#example').DataTable( {
    order: [[1, 'asc']],
      "columnDefs": [
        { "visible": false, "targets": 2, type: 'active'
        },
        { "orderData": [ 1,2 ],    "targets": 1 },
      ],
        
  });
        
​
  
  // name = Name to find inactive rows.
  // flag = Flag to display inactive rows - 1=display, 0=hide.
  function updateShowActive(name, flag) {
     // Itereate all rows where name equals name clicked.
     table.rows( function ( idx, data, node ) {
        return data[1] === 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[7] = 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";
        
      // Get row clicked.
      var row = $(this).closest('tr');
      // Get name.
      var name = table.row( row ).data()[1];
      // Update show active flag 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()[1];
      // Update show active flag to hide.
      updateShowActive(name, 0);
​
      table.draw();
    
  });
} );
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers