datatable

To implement features in datatable

by archon88

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<select id="mySelect">
  <option value="0">0</option>
  <option value=">0">>0</option>
  <option value="">All</option>
</select>
<input type="button" id="d" value="export" />
<div id='control_sh'>
  <input type="checkbox" class="hide_show"><span>Hide a</span>
  <input type="checkbox" class="hide_show"><span>Hide b</span>
  <input type="checkbox" class="hide_show"><span>Hide c</span>
  <input type="checkbox" class="hide_show"><span>Hide d</span>
  <input type="checkbox" class="hide_show"><span>Hide e</span>
  <input type="checkbox" class="hide_show"><span>Hide f</span>
</div>
<table border="0" cellpadding="5" cellspacing="5">
  <tbody>
    <tr>
      <td>ade:</td>
      <td>
        <input type="text" id="myInput"...

CSS

table {
  border: 1px solid blue;
}

tr {
  border: 1px solid blue;
}

td {
  border: 1px solid blue;
}

tfoot input {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
}

JavaScript

// http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
$(document).ready(function() {
  var table = $('#mine').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ]
  });

  $('#mine thead td').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
  });

  $('#myInput').keyup(function() {
    table.draw();
  });
  $('input.column_filter').on('keyup click', function() {
    filterColumn($(this).parents('tr').attr('data-column'));
  });
  $("#hide_show_all").on("change", function() {
    var hide = $(this).is(":checked");
    $(".hide_show").prop("checked", hide);

    if (hide) {
      $('#mine tr th').hide(100);
      $('#mine tr td').hide(100);
    } else {
      $('#mine tr th').show(100);
      $('#mine tr td').show(100);
    }
  });
  var tr_hidden = [];
  $(document).on("click change keyup", ".paginate_button, .sorting_asc input ", function() {
    console.log(tr_hidden);
$('#mine tr td, #mine tr th').show();

    $.each(tr_hidden, function(ti) {
      var i = ti;
      $('#mine tr').each(function() {
          //$('td, th', this).show();
          $('td:eq(' + i + ')', this).hide();
          $('th:eq(' + i + ')', this).hide();

      });
    });
  });
  $(".hide_show").on("change", function() {
    var hide = $(this).is(":checked");

    var all_ch = $(".hide_show:checked").length == $(".hide_show").length;

    var ti = $(this).index(".hide_show");

    $('#mine tr').each(function() {
      if (hide) {
        $('td:eq(' + ti + ')', this).hide(100);
        $('th:eq(' + ti + ')', this).hide(100);
        if (tr_hidden.indexOf(ti) == -1) tr_hidden.push(ti);
      } else {

        $('td:eq(' + ti + ')', this).show(100);
        $('th:eq(' + ti + ')', this).show(100);
        if (tr_hidden.indexOf(ti) > -1) {
          tr_hidden.splice(tr_hidden.indexOf(ti), 1);
        }
      }
    });
  });

});

function...