Search code examples
javascriptjquerytwitter-bootstrapsearchhighlight

Highlight search text bootstrap table


I'm trying to implement jquery plugin for highlighting search text to my app and I'm using this topic, I've put jquery plugin to my app and add this line:

  $table.highlight($(".search.bs.table").val());

But searching text still doesn't highlighting. Somebody could me explain, Where is my mistake?

plunker

code:

function initTable() {
    $table.bootstrapTable({
        filterControl: true,
        //data: url,
        //url: 'data/events.json',
        height: getHeight(),
        formatNoMatches: function () {
            return "Please, choose your category";
        }

    });

    // sometimes footer render error.
    setTimeout(function () {
        $table.bootstrapTable('resetView');
    }, 200);
    $table.on('check.bs.table uncheck.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table', function () {
        $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
        // save your data, here just save the current page
        selections = getIdSelections();
        // push or splice the selections if you want to save all data selections
    });
    $table.on('all.bs.table', function (e, name, args) {
        console.log(name, args);
    });
    $table.highlight($(".search.bs.table").val());

    $table.on('search.bs.table', function (e, text){

        "use strict";
        console.log(e);
        console.log(text);
    });
    $remove.click(function () {
        var ids = getIdSelections();
        $table.bootstrapTable('remove', {
            field: 'id',
            values: ids
        });
        $remove.prop('disabled', true);
    });
    $(window).resize(function () {
        $table.bootstrapTable('resetView', {
            //height: getHeight()
        });
    });
}

Solution

  • I figure out, how it works Below the right code (put this code inside inittable):

    $table.highlight($(".search.bs.table").val());
    
    $table.on('search.bs.table', function (e, text){
    
        $table.highlight(text);
        console.log(e);
        console.log(text);
    });
    

    css:

    .highlight {background-color: yellow}