File
Add library
Share
Login or Register
Help
HTML
 
<!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>
          </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>
          </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>
          </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>
          </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>
          </tr>
            <tr data-user="4">
            <td>
            </td>
            <td>Ashton Cox</td>
            <td>0</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
​
        </tbody>
      </table>
    </div>
  </body>
</html>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
$(document).ready( function () {
  
  var viewAction = false;
  var viewName = '';
  
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      
      // Show only active records... no inactive records upon table initialization OR if no "+" buttons have been pressed
      if (!viewAction) {
        return table.rows().column(2) == 1;  //this is pseudo code only
      }
      
      // Show all active records AND inactive records for the "+" button pressed.
      // (it would be great if a user could press Garret's "+" button and then press Ashton's "+"
      // button and all records would then be showing vs only Ashton's... but I'll take what I can get).
          return $(table.rows().column(2) == 1 || table.rows().column(1) == viewName);
      
      // Also, is there a way to have the inactive records always be below the active ones when shown since a user can
      // mess up any initial sort order by using the cool built-in sort/search functionality of the Datatable?.
      //Perhaps a sort on name every time a button is pressed... as long as the user is directed to the page of
      // of that pressed button as I imagine the pagination would change.  [[Really, the inactive records (whether
      // shown or not) don't need to be searched or sorted when a user uses the column toggles/search functionality
      // anyway.]]  If not, that's ok... I realize this is parent/child row behavior.)
      
    }
  );
​
  
  var table = $('#example').DataTable( {
      "columnDefs": [
          { "visible": false, "targets": 2 }
      ]
  });
  
  $("input[value='+']").on('click', function() {
      var clickedButton = event.target;
      var viewName = clickedButton.id;
      clickedButton.value = '-';
      clickedButton.style.backgroundColor = "#DB4C4C";
      viewAction = true;
      table.draw();
    
  });
  
   $("input[value='-']").on('click', function() {
      var clickedButton = event.target;
      var viewName = clickedButton.id;
      clickedButton.value = '+';
      clickedButton.style.backgroundColor = "#7fbf7f";
      clickedButton.style.fontWeight = "normal";
      viewAction = true;
      table.draw();
    
  });
} );
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers