Conditionally Show the Cell level Button

Conditionally Show the Cell level Button

by Hifni Nazeer

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Item 1</th>
						<th></th>
            <th>Item 2</th>
            <th>Item 3</th>
            <th>Item 4</th>
        </tr>
    </thead>
    <tbody>
        <tr data-child-value="hidden 1">
            <td class="details-control"></td>
            <td>data 1a</td>
						<td></td>
            <td>LK</td>
            <td>data 1c</td>
            <td>data 1d</td>
        </tr>
        <tr data-child-value="hidden 2">
            <td class="details-control"></td>
            <td>data 2a</td>
						<td></td>
            <td>UK</td>
            <td>data 2c</td>
            <td>data 2d</td>
        </tr>
				<tr data-child-value="hidden 2">
            <td class="details-control"></td>
            <td>data 2a</td>
						<td></td>
            <td>US</td>
            <td>data 2c</td>
            <td>data 2d</td>
        </tr>
				<tr data-child-value="hidden 2">
            <td class="details-control"></td>
            <td>data 2a</td>
						<td></td>
            <td>LK</td>
            <td>data 2c</td>
            <td>data 2d</td>
        </tr>
    </tbody>
</table>

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
 td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

function format(value) {
    return '<div>Hidden Value: ' + value + '</div>';
  }
  $(document).ready(function() {
    var table = $('#example').DataTable({
			"columnDefs": [
                {
                    "targets": [4],
                    "visible": false,
                    "searchable": false
                }
            ],
      "aoColumns": [{
          "mdata": null
        }, //0 
        {
          "mdata": null
        }, //1 
        {
          'mdata': null, //1 edit button
          'mRender': function(data, type, full) {
            // should get the mdata 7 above. im not sure if its the correct code for it
            if (full[3] != 'LK') {
              return "";
            }
            return "<button data-target=#editReserveModal data-toggle=modal>Accept</button>";
          }
        }, //2 use office column in place of status
        {
          "mdata": null
        }, //3
        {
          "mdata": null
        }, //4
        {
          "mdata": null
        }, //5
      ]

    });

    // Add event listener for opening and closing details
    $('#example').on('click', 'td.details-control', function() {
      var tr = $(this).closest('tr');
      var row = table.row(tr);

      if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      } else {
        // Open this row
        row.child(format(tr.data('child-value'))).show();
        tr.addClass('shown');
      }
    });
  });