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 align="center"><input...

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 {
visibility: hidden;
}

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

JavaScript

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

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);
  }
}

$(document).ready(function() {
	$('#testTable').DataTable();

	$('input.global_filter').on( 'keyup click', function (event) {
  	if (table.rows().count() > 10) { //If >10 entries, perform global search only on pressing return
    	if (event.keyCode === 13){
		filterGlobal();
    	}
    }
    else {
    filterGlobal();
    }
	} );

	$('input.column_filter').on( 'keyup click', function () {
		filterColumn( $(this).parents('tr').attr('data-column') );
	} );
  
  $('input.column_hider').on('click', function () {
		hideColumn( $(this).parents('tr').attr('data-column') );
	} );
  
  $('#btnAllColsVis').click(function() {
    table.columns().every( function () {
    this.visible(true);
    } );
   	$(".column_hider").prop("checked", false);     
  } );
  
  $('#btnResetSearch').click(function() {
		 table.search('')
     .columns().search('')
     .draw();
     document.getElementById('global_filter').value='';
     var filterList = document.getElementsByClassName('column_filter');
     for (i = 0; i < filterList.length; ++i) {
     	filterList[i].value='';
}
     });
} );

//Default to using regex...