$(document).ready( function () {

  var viewAction = false;

  var viewName = '';

  var orderFlag = -1;  // track order of Name column

  $.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 (!tableInit) {

      //  return data[2] == 1;

        //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).

      // 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;

      //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( {

    order: [[1, 'asc']],

      "columnDefs": [

        { "visible": false, "targets": 2,

         render: function (data, type, row) {

           if (type === 'sort') {

             console.log(orderFlag)

             return data * orderFlag;

           }

           return data;

         }

        },

        { "orderData": [ 1,2 ],    "targets": 1 },

      ],

  });

  $('#example').on( 'preDraw.dt', function () {

    // This will show: "Ordering on column 1 (asc)", for example

    var order = table.order();

    for (i=0; i<order.length; i++) {

        col = order[i];

        if (col[0] === 1) {

    console.log('order', col[1])

          if (col[1] === 'asc') {

            orderFlag = -1;

          } else {

            orderFlag = 1;

          }

          table.rows().invalidate().draw();  // Make sure to run render for all rows.

        }

    }

} );

  // 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();

  });

} );

​