Datatables data search and highlight with jmHighligh limit to one column (solution at the end)

Question

I'm working with Datatables.

Datatables allows you to have one single search box included in plug in, but with help of many of your posts I was able to make a single column search for each column (I know there was a plugin of Datatables for I was unable to make it work for me).

After this I've tried to implement the code to obtain search results highlighted in table after search (again with Datatable highlight plugin). I was able to do this, but than I wanted to add another highlight plugin for each search box I've created.

I was also able to deal with this metter (using jquery.jmHighlight.min.js code) but I've found 2 different problems:

I was unable to limit to a single column the highlighting
I was unable to avoid highlight disappear clicking on next search box.

Here is the part of code I'm using:

So my problems are:

limit to a single column the highlighting. When I use the code above ($('#example tbody').jmRemoveHighlight()/jmHighlight(keyword)) it works but all the words matching with the input are highlighted.
Avoid highlight disappear clicking on next search box. With that code, when I've something highlighted due to search box input, when I click on another search box, the highlighted word return normal, even deactivating jmRemoveHighlight().

It would be great to be able to add one search result highlighted to the next one, until you don't reset everything, limiting results to a single column each search box (only first search box would be a general search into the whole table).

UPDATE v. 0.1

That's true, I'm not really good with javascript and jquery, but I thought this would have worked, what's wrong?

 $(document).ready(function() {
     var table = $('#example').DataTable( {
     [all vars of plugin]
 } );

 //many listeners like
 // LINE FOR COL REORDER    
 new $.fn.dataTable.ColReorder( table );

 // LINE FOR ENLIGHT SELECTED ROW 
 $('#example tbody').on( 'click', 'tr', function () {
    $(this).toggleClass('selected');
 } );

 // HERE I've tried mine
 // TEST TEST
 $("input[name='keyword']").on("keyup", function () {
    window.alert("test");
    var datacol = table.column( 1 ).data(); //func of datatables to retrieve column data
    highilightMe( datacol ); //my function
});
// TEST TEST
[... many others working listeners]
});

//My function 
function highilightMe( datacol ) {
window.alert("HEY I AM HERE!");

// Read keyword
var keyword = $("input[name='keyword']").val(); //input for test highlight

//var table = $('#example').DataTable();
//var data = table.column( 0 ).data();
//Highlight the keyword inside the context
//$("#example, td, row").eq(1).jmRemoveHighlight();
//$("#example, td, row").eq(1).jmHighlight(keyword);
//window.alert();

$("#example", datacol).jmRemoveHighlight();
$("#example", datacol).jmHighilight(keyword);
}

But it stills doesn't work and not even WINDOWS.ALERT works... so it means function isn't well called, but why...?

P.S. what's really strange is that using $("#example, td, row").eq(1).jmRemoveHighlight() I was able to highlight just one CELL but in another TABLE (mine with datatables on is called #example).

UPDATE v. 0.2

In order to understand what wasn't working and considering my little knowledge of jQuery, I've rebuilt a test page to check what wasn't working.

Here follow the code of that page that uses datatables. I was able to recover also data column, but I'm not able to use that var (an array of data) as #container to limit highlight function.

Here is full code:

 [...]
 
 
 
 
 
 

 Untitled Document

 
 
 
 
 
 

 
 

 Search module


 

 

    
        
            Market
            Curr
            Prods
(Qn)
            Quality
            Seller
(type)
            Type
            Stock
            Price
(curr)
            GOLD
Curr
change
            Price
(GOLD)
            Vat
tax
            Loc. Seller
price
            Imp.
Tax
            Int. Seller
price
            Link
            Serv
            Time Rec
            Date
        
    
    
    
    
 
 

 
 

 
    Type in a keyword:
     //I uses this for TESTING

Here is the code. Follows console result.

SOLUTION v. 1.0

And here we go. As usual solution is quite easier if correctly interpreted.

What was wrong in my idea is that I was trying to limit jmhighlight using the DATA (alias the data array) that would have fulfilled table column, but what I needed to do was to limit highlight function only to a particular column identified with a particular id.

So the easiest way was this: Datatables let you define how any single column of your table will be

       "columnDefs": [
            {  
                "targets": [0],
                "render": function ( data ) { 
                    return '' + data + ''; 
                }
            },

so the easiest way to limit highlight function was to tell the function to highlight words in id.TABLE, part.of.TABLE and id.COLUMN. Adding a div id to each column with different names, I was able to determine function container easily like this:

$("#example tbody #country").jmRemoveHighlight();
$("#example tbody #country").jmHighlight(keyword);

That's it. Probably it was exactly what rafaelcastrocouto was suggesting me, but I was unable to understand it.

dude · Accepted Answer

Congratulations that you have solved the issue for yourself. However, just for others having the same issue: I just added an example in the documentation that shows you how to search and highlight column specific inside a DataTable-table.

Update: There's now a new plugin to handle search highlighting for DataTables: datatables.mark.js.

Datatables data search and highlight with jmHighligh limit to one column (solution at the end)

Answers (1)

Related Questions