how can I highlight searched filter data from a table

Viewed 20

This is my code :

$(document).ready(function () {
// Setup - add a text input to each footer cell  

$('#example thead tr')
    .clone(true)
    .addClass('filters')
    .appendTo('#example thead');

var table = $('#example').DataTable({
    orderCellsTop: true,
    fixedHeader: true,
    initComplete: function () {
        var api = this.api();

        // For each column
        api
            .columns()
            .eq(0)
            .each(function (colIdx) {
                // Set the header cell to contain the input element
                var cell = $('.filters th').eq(
                    $(api.column(colIdx).header()).index()
                );
                var title = $(cell).text();
                $(cell).html('<input type="text" placeholder="' + title + '" />');

                // On every keypress in this input
                $(
                    'input',
                    $('.filters th').eq($(api.column(colIdx).header()).index())
                )
                    .off('keyup change')
                    .on('change', function (e) {
                        // Get the search value
                        $(this).attr('title', $(this).val());
                        var regexr = '({search})'; 
                    //$(this).parents('th').find('select').val();

                        var cursorPosition = this.selectionStart;
                        // Search the column for that value
                        api
                            .column(colIdx)
                            .search(
                                this.value != ''
                                    ? regexr.replace('{search}', '(((' + this.value + ')))')
                                    : '',
                                this.value != '',
                                this.value == ''
                            )
                            .draw();
                    })
                    .on('keyup', function (e) {
                        e.stopPropagation();

                        $(this).trigger('change');
                        $(this)
                            .focus()[0]
                            .setSelectionRange(cursorPosition, cursorPosition);
                    });
                });
            },
        });
    });

In this code there are two search fields one is for the whole table filter and the other is for column wise filter. The only thing I want to know is how can I highlight the searched text result in Table rows. I have pretty much applied .css("background-color","red") every where in this code.

Note: I copied this code from a website and I am not a pro java developer so anyone with the idea please point out and writes the code for highlight and tell me where to put it or update it.

0 Answers
Related