jQuery数据表搜索突出显示不起作用

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.