CODEWITHSUNDEEP
jquerydatatables
Joey Pablo
Joey Pablo

Reputation: 327

Highlight search result in Datatables

I'm trying to use the plugin datatables.highlight for my search result but it doesn't work.. can someone tell me if i'm missing something ?

I have included the files above: 

dataTables.searchHighlight.css
jquery.highlight.js
dataTables.searchHighlight.min.js

and in my js code: 

$(document).ready(function() {
        var myTable = $('#dataTable').dataTable({
                dom: 'Blfrtip',
                retrieve: true,
                searchHighlight: true,
                buttons: [
                    {
                     ....
                    }    
                ]
        } );
        myTable.on( 'draw', function () {
            var body = $( myTable.table().body() );
            body.unhighlight();
            body.highlight( myTable.search() );  
        } );
....

Upvotes: 2

Views: 5936

Answers (2)

Shady Alset
Shady Alset

Reputation: 5714

Try verifying your included libraries links because it works by just adding searchHighlight: true, you don't have to use functions to highlight results.

See this JsFiddle

Upvotes: 1

Eric Guan
Eric Guan

Reputation: 15982

Listening for DataTable events can happen in 2 ways.

  1. If you save the DataTable reference with dataTable(), it returns a jQuery object. Thus, when listening for events you must append the .dt namespace, like so draw.dt.

  2. If you save the DataTable reference with DataTable(), it returns a DataTable api instance. In this case you can simply listen for draw. You can also listen for draw.dt but it's redundant.

https://jsfiddle.net/guanzo/9xs3zxcp/4/

I was having trouble with importing highlight.js so i pasted the code directly into the fiddle

Upvotes: 2

Related Questions