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 Search 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>Treat as regex</th>
							<th>Use smart search</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_filter" id="global_regex"></td>
							<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
						</tr>
						<tr id="filter_col1" data-column="0">
							<td>Column &ndash; Name</td>
							<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
							<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
							<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
						</tr>
						<tr id="filter_col2" data-column="1">
							<td>Column &ndash;...

CSS

body {
  margin: 15px;
}

div.search span {
  display: block;
}

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

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


/**
 * Styles for datatables.mark.js
 */

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

JavaScript

$(function() {
  $('.datatables-table').DataTable({
    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')
	).draw();
}

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

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

	$('input.global_filter').on( 'keyup click', function (event) {
  	if (table.count() > 10) {
    	if (event.keyCode === 13){
		filterGlobal();
    	}
    }
    else{
    filterGlobal();
    }
	} );

	$('input.column_filter').on( 'keyup click', function () {
		filterColumn( $(this).parents('tr').attr('data-column') );
	} );
} );

//Extract data from row of table
$('#testTable tbody').on('click', 'tr', function () {
	console.log(table.row(this).data());
} )