JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<h2>With mRender</h2>
<p><small><strong><em>Try searching for "href"</em></strong></small></p>
<table id="example">
<thead>
<tr>
<th>Date</th>
<th>String</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr><td><a href="#a">01/02/2013</a></td><td><a href="#a">-Z-</a></td><td><a href="#a">01</a></td></tr>
<tr><td><a href="#b">01/01/2014</a></td><td><a href="#b">-J-</a></td><td><a href="#b">50</a></td></tr>
<tr><td><a href="#c">05/05/2013</a></td><td><a href="#c">-L-</a></td><td><a href="#c">0100</a></td></tr>
<tr><td><a href="#c">05/05/2012</a></td><td><a href="#d">-A-</a></td><td><a href="#c">1</a></td></tr>
</tbody>
</table>
<br/><br/><hr/>
<h2>Without mRender</h2>
<table id="example2">
<thead>
<tr>
<th>Date</th>
<th>String</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr><td><a href="#a">01/02/2013</a></td><td><a href="#a">-Z-</a></td><td><a href="#a">01</a></td></tr>
<tr><td><a href="#b">01/01/2014</a></td><td><a href="#b">-J-</a></td><td><a href="#b">50</a></td></tr>
<tr><td><a href="#c">05/05/2013</a></td><td><a href="#c">-L-</a></td><td><a href="#c">0100</a></td></tr>
<tr><td><a href="#c">05/05/2012</a></td><td><a href="#d">-A-</a></td><td><a href="#c">1</a></td></tr>
</tbody>
</table>
CSS
* {
font-family: sans-serif;
}
JavaScript
var stripHtml = (function() {
var tmpDiv = document.createElement("DIV");
return function(html) {
tmpDiv.innerHTML = html;
return $.trim(tmpDiv.textContent || tmpDiv.innerText);
};
})();
var mRenderFactory = function (colIndex) {
return function (data, type, full) {
var cache = MRenderCache.getCache(full);
if (type === "filter" || type === "sort" || type === "type") {
return cache.getOrElse(colIndex, data, stripHtml)
}
return data;
};
};
var MRenderCache = function () {
this.full = [];
}
MRenderCache.getCache = function (full) {
var cache = full[full.length - 1];
if (cache == null || !cache.MRenderCache) {
cache = new MRenderCache();
full.push(cache);
}
return cache;
}
MRenderCache.prototype.MRenderCache = true;
MRenderCache.prototype.getOrElse = function (colIndex, rawData, convert) {
var result = this.full[colIndex];
if (result === undefined) {
result = convert(rawData);
this.full[colIndex] = result;
}
return result;
}
$('#example').dataTable( {
"aoColumns": [
{ "mRender": mRenderFactory(0) },
{ "mRender": mRenderFactory(1) },
{ "mRender": mRenderFactory(2) }
]
} );
$('#example2').dataTable( {
"aoColumns": [ null, null, null ]
} );