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

      "data": [[1,1,"Garrett Winters","Y","Edinburgh",61,"2011/04/25","$6,100",0],[0,1,"Garrett Winters","N","Edinburgh",60,"2010/04/25","$5,300",0]],

      "order": [],

                    "columns": [

                    { "data": 0 },

                    { "data": 1 },

                    {

                    render: function (data, type, row, meta) {

                        return '<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"/> </div>';}

                     },

                    { "data": 2 },

                    { "data": 3 },

                    { "data": 4 },

                    { "data": 5 },

                    { "data": 6 },

                    { "data": 7 },

                    { "data": 8 }

                    ],

      //"columnDefs": [

        //{"type": "html-input", "targets": [4,5,6,7,8,9]},

        //{ "visible": false, "targets": [0,1,9]},

        //{"orderable": false, "targets": "_all"}

      //],

      "deferRender": true

  });

​

​

  function updateShowActive(name, flag) {

     // Iterate all rows where Name column 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();

       // Get the row's Show Other column cell data

        var cell = table.cell(this.index(), 9);

        var cellData = cell.data();

        // If not a lead record then change the Show Other column value

        if (data[0] == 0) {

          cellData = flag;

          cell.data( cellData );  // Update the cell data

        }

      } );       

        }

  $('#example tbody').on('click', "input[value='+']", function() {

      var clickedButton = event.target;

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

  });

   $('#example tbody').on('click', "input[value='-']", function() {

      var clickedButton = event.target;

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

  });

} );

​