DataTables

DataTables experimentation

by archon88

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>
<script src="https://cdn.jsdelivr.net/datatables.mark.js/2.0.0/datatables.mark.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<h2>DataTables Example</h2>

<div class="panel panel-default">
  <div class="panel-heading">Searchable DataTable</div>
  <div class="panel-body">
    <table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
      <thead>
        <tr>
          <th>Target</th>
          <th>Search text</th>
          <th>Regex search</th>
          <th>Smart search</th>
          <th>Case-sensitive search</th>
          <th>Hide column</th>
          <th>Global control buttons</th>
        </tr>
      </thead>
      <tbody>
        <tr id="filter_global">
          <td>Global search</td>
          <td...

CSS

body {
  margin: 15px;
}

div.search span {
  display: block;
}

div.panel {
  margin-bottom: 15px;
}

div.panel .panel-body p:last-child {
  margin-bottom: 0;
}

mark {
  padding: 0;
  background: #f1c40f;
}

.hidden {
  display: none;
}

/*Hide DataTables builtin filter box*/

.dataTables_filter {
  display: none;
}

.inputButton {
  width: 140px;
  height: 25px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  left: 50%;
  margin: 10px;
}

.highlight {
    background-color: #fff2ac;
    /*background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);*/
}

JavaScript

function redrawTable(){

console.log('Redrawing table!');

var oldTable = $('#testTable').DataTable();

oldTable.destroy();

var newTable = $('#testTable').DataTable({
"dom":"ilfrtp",
            "aaSorting": [],
            "scrollY": 530,
            "scrollCollapse": true,
            "lengthMenu": [
            [100, 400, 1000, 5000, -1],
            [100, 400, 1000, 5000, "All"]
        ],
        "retrieve": true
        });
        newTable.draw();
        
				$('#testTable thead th').on('dblclick', function(){
					console.log('double-clicked!');
					$(this).toggleClass('bg-primary');
				});
}

$(function() {
  $('.datatables-table').DataTable({
  	dom: 'Bfrtip',
    buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
    mark: true, //highlighting
    paging: true,
    scrollY: 300
  });
});

				$('#testTable thead th').on('dblclick', function(){
					console.log('double-clicked!');
					$(this).toggleClass('bg-primary');
				});

var table = $('#testTable').DataTable();

function filterGlobal () {
	table.search( 
		$('#global_filter').val(),
		$('#global_regex').prop('checked'), 
		$('#global_smart').prop('checked'),
    !($('#global_case').prop('checked'))
	).draw();
}

function filterColumn (i) {
	table.column(i).search( 
		$('#col'+i+'_filter').val(),
		$('#col'+i+'_regex').prop('checked'), 
		$('#col'+i+'_smart').prop('checked'),
    !($('#col'+i+'_case').prop('checked'))
	).draw();
}

function hideColumn (i) {
	if ($('#col'+i+'_hider').prop('checked')){
    table.column(i).visible(false);
  }
  else {
  	table.column(i).visible(true);
  }
}

$(function() {
	    $('#testTable .dataTables_filter input').on('keyup', function(e){
      var colIndices = [];
      $('#testTable thead th').each(function(i){
      console.log('Looking at column ' + i);
      if ($(this).hasClass('highlight')){
            colIndices.push(i);   
      }
      });      
      
        if((e.key === 'Enter') && (colIndices.length !== 0)){ //indices of...