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>
<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 type="text" class="global_filter" id="global_filter"></td>
							<td align="center"><input type="checkbox" class="global_regex_filter" id="global_regex"></td>
							<td align="center"><input type="checkbox" class="global_smart_filter" id="global_smart"></td>
              <td align="center"><input type="checkbox" class="global_case_filter" id="global_case"></td>
              <td></td>
              <td><input id="btnAllColsVis" type="button" value="Unhide all columns" class="inputButton"/></td>
						</tr>
						<tr id="filter_col1" data-column="0">
							<td>Column &ndash; Name</td>
							<td align="center"><input type="text"...

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: 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).addClass('hidden');
    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='';
}
     });
}...