Javascript for highlight text in table - Page Loading issue -How to fix it

[careanitha]

Hi,

I'm trying to highlight the text in the cell, for the searched text . I have created a table where the count of the ticket will be shown and clicking on the count, displays the details of the ticket. Now the searched word is highlighted in the table cell, but when there is a pagination, it shows randomly (i.e - first page will be blank, but in the 2 or 3rd page the data will be shown,etc..} When exported all the mentioned count of the ticket details are shown in the excel.

Below is the javascript

require([
                 'underscore',
                 'jquery',
                 'splunkjs/mvc',
                 'splunkjs/mvc/tableview',
                 'splunkjs/mvc/simplexml/ready!'
            ], function(_, $, mvc, TableView) {
              
                 var CustomIconRenderer = TableView.BaseCellRenderer.extend({
                     canRender: function(cell) {
                        return _(['column name1','column name2']).contains(cell.field);
                     },
                     render: function($td, cell) {

                                                var check = "column name1";
                         var hltext;
                        if(check === 'column name1') {
                                                            hltext = ["sample", "run", "test"];
                                                }
                                                else if(cCheck === 'column name2'){
                                      hltext = ["is", "are"];
                         }          
                                                                                                                    
                           var i;
                           var strText=cell.value;
                           for (i = 0; i < hltext.length; i++)
                                                               {            
                                       
                         var regEx = new RegExp(hltext[i], "gi");
                       //Apply regular expression to replace Filter Text with html content bold font and red color
                         strText=strText.replace(regEx, '<b style="color:red;">$&</b>');
                                    
                     }
                        $td.addClass('string').html(_.template(strText));
                              }                             
                 });
                 mvc.Components.get('myTable').getVisualization(function(tableView) {      
             
                     // Add custom cell renderer, the table will re-render automatically.
                     tableView.addCellRenderer(new CustomIconRenderer());
                 });
                        
                         
             }
            );

It would be great ,if the issue is fixed. Had searched for the solution everywhere, have'nt got how to fix the same.

[niketn]

@careanitha @kranitha I had posted this code snippet way back as an answer https://answers.splunk.com/answers/636948/how-to-add-css-class-to-table-field-by-input-in-sp.html

Null values in Table cell rendering cause an issue, refer to one of other answers where table cell render was extended based on another cell but it would not work if required table cell had null value. https://answers.splunk.com/answers/686288/how-do-you-highlight-a-table-cell-based-on-a-field.html

Do upvote the question and accept the answer if they have helped you!

[kranitha]

@niketnilay- THANKS FOR YOUR quick reply.
Meanwhile can please share your comments on the below link for an issue in monitoring console
https://answers.splunk.com/answers/812657/host-name-in-the-monitoring-console-under-remote-i.html

[kranitha]

Hi,

Fixed the issue - In the search query , the table will was created, no data for few columns, due to which the page was not loading properly and highlight was render in some or the other page. On adding
| fillnull value=0, the page was loading properly and highlighted the text in all pages.