DataTables + HighLight
DataTables + HighLight
by seefeld
HTML
<script src="http://datatables.net/download/build/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<table id="resultTable">
<thead>
<tr>
<th>Name</th><th>Phone</th><th>Post Code</th><th>REG</th><th>ID</th></tr> </thead>
<tbody>
<tr><td>Rios, Patricia V.</td><td>1 79 826 2526-3908</td><td>W7 0YQ</td><td>E8C 8V6</td><td>XQL64CRI3HL</td></tr><tr><td>Johns, Whilemina B.</td><td>1 33 114 3023-9847</td><td>PQ2F 0XR</td><td>E5Z 5W4</td><td>NIM77PYE8ZJ</td></tr><tr><td>Webster, Bruce F.</td><td>1 67 293 8158-1106</td><td>O60 8CW</td><td>P7V 7N7</td><td>DRT32MMF7GK</td></tr><tr><td>Burke, Evan N.</td><td>1 51 267 7386-4621</td><td>Q2C 3AL</td><td>P5X 8H1</td><td>FPH71LXU1QC</td></tr><tr><td>Eaton, Wynne N.</td><td>1 64 614 3456-4929</td><td>GB2W 3ZZ</td><td>U9U 9O8</td><td>XVK52ART3BH</td></tr><tr><td>Landry, Timothy G.</td><td>1 24 217 2455-3532</td><td>V2F 6PT</td><td>Y6L 6Y5</td><td>YVA19NHC2MN</td></tr><tr><td>Alston, Sawyer X.</td><td>1 43 276 1986-6662</td><td>E5 2AP</td><td>L9C 7C3</td><td>FPE25PPS3FT</td></tr><tr><td>Bentley, Gemma L.</td><td>1 96 117 4326-3803</td><td>LI0A 5HO</td><td>C8G 4C9</td><td>VDK78MYO8HW</td></tr><tr><td>Nicholson, Jana T.</td><td>1 50 734 1345-6075</td><td>Q29 7RT</td><td>Q1R 1Z9</td><td>ALQ79RMI1OS</td></tr><tr><td>Christensen, Leigh K.</td><td>1 68 980 6103-8799</td><td>Y3E 4BY</td><td>K6L 7U0</td><td>LKE89BTX1IA</td></tr><tr><td>Park, Breanna W.</td><td>1 86 828 8602-7954</td><td>G4S 6PO</td><td>Q6H 5U6</td><td>NXI37AFB8AS</td></tr><tr><td>Daniels, Tobias L.</td><td>1 88 831 2787-3330</td><td>UI36 6UK</td><td>R0L 5A1</td><td>MGQ30NQE6JA</td></tr><tr><td>Pearson, Hamish K.</td><td>1 77 155 4910-7577</td><td>U2 7BW</td><td>C1K 7H0</td><td>DHL87DOV7BF</td></tr><tr><td>Diaz, Nathan H.</td><td>1 48 118 4910-0921</td><td>K4C 7WY</td><td>L0N 2S5</td><td>MLV78QVB5DB</td></tr><tr><td>Dominguez, Magee B.</td><td>1 64 294 6453-2472</td><td>AO4L...
CSS
body {padding: 20px;}
.filterMatches
{
background-color: #BFFF00;
}
/*
* Table wrapper
*/
table {width: 100%;}
.dataTables_wrapper {
position: relative;
clear: both;
*zoom: 1;
}
/*
* Page length menu
*/
.dataTables_length {
float: left;
}
/*
* Filter
*/
.dataTables_filter {
float: right;
text-align: right;
}
/*
* Table information
*/
.dataTables_info {
clear: both;
float: left;
}
/*
* Pagination
*/
.dataTables_paginate {
float: right;
text-align: right;
}
JavaScript
// HIGHLIGHT FCT
jQuery.fn.dataTableExt.oApi.fnSearchHighlighting = function(oSettings) {
// Initialize regex cache
oSettings.oPreviousSearch.oSearchCaches = {};
oSettings.oApi._fnCallbackReg( oSettings, 'aoRowCallback', function( nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Initialize search string array
var searchStrings = [];
var oApi = this.oApi;
var cache = oSettings.oPreviousSearch.oSearchCaches;
// Global search string
// If there is a global search string, add it to the search string array
if (oSettings.oPreviousSearch.sSearch) {
searchStrings.push(oSettings.oPreviousSearch.sSearch);
}
// Individual column search option object
// If there are individual column search strings, add them to the search string array
if ((oSettings.aoPreSearchCols) && (oSettings.aoPreSearchCols.length > 0)) {
for (var i in oSettings.aoPreSearchCols) {
if (oSettings.aoPreSearchCols[i].sSearch) {
searchStrings.push(oSettings.aoPreSearchCols[i].sSearch);
}
}
}
// Create the regex built from one or more search string and cache as necessary
if (searchStrings.length > 0) {
var sSregex = searchStrings.join("|");
if (!cache[sSregex]) {
var regRules = "("
, regRulesSplit = sSregex.split(' ');
regRules += "("+ sSregex +")";
for(var i=0; i<regRulesSplit.length; i++) {
regRules += "|("+ regRulesSplit[i] +")";
}
regRules += ")";
// This regex will avoid in HTML matches
cache[sSregex] = new RegExp(regRules+"(?!([^<]+)?>)", 'ig');
}
var regex = cache[sSregex];
}
// Loop through the rows/fields for matches
jQuery('td',...