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>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.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...

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: 'Bifrtp',
    buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'
        ],
    mark: true, //highlighting
    paging: false,
    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 () {
        var myTable = $('#testTable').DataTable();
        var colId = $(this).parents('tr').attr('data-column');
        var myId = this.id;
        if (this.checked){
            console.log("Making column " + colId + " hidden " + myId[3]);
            myTable.column( $(this).parents('tr').attr('data-column') ).visible(false);
        }
        else{
            console.log("Making column " + colId + " visible; id is " + myId[3]);
            myTable.column( $(this).parents('tr').attr('data-column') ).visible(true);         
        }
    })
  
  $('#btnAllColsVis').click(function() {
   ...