jQuery datatable search highlight not working

Question

I'm using jQuery datatable in our application to show tables. Now we want to highlight the search text which are searched by jQuery's in-built search textbox.

We are using jQuery's own site for reference .

Below is our code:

<link rel="stylesheet" href="/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="/css/dataTables.searchHighlight.css" />
<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/jquery.highlight.js"></script>
<script type="text/javascript" src="/dataTables.searchHighlight.min.js"></script>
<script th:inline="javascript">
$(document).ready(function() {
    var table = $('#pspTable').DataTable({
        pagingType: 'full_numbers',
        searchHighlight: true
    });
} );
</script>

However, whenever I'm running the application it's throwing the following error:

TypeError: jQuery.highlight is not a function

This is referencing to following code segment of jquery.highlight.js:

return this.each(function () {
        jQuery.highlight(this, re, settings.element, settings.className);
    });

Is there some bug in the library or I'm missing something here? Please help me with it.

Answer 1

Please open your developer tools and inspect the "Network" tab. It seems that jquery.highlight.js wasn't loaded, because this error will only be printed if the necessary highlighting function isn't available.

I also recommend you to use datatables.mark.js instead of jquery.hightlight.js as it's cross-browser unit tested, maintained and because it uses mark.js there are many options you can use.