title: Highlight search text bootstrap table
body: <p>I'm trying to implement <a href="http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html" rel="nofollow noreferrer"><strong>jquery plugin</strong></a> for highlighting search text to my app and I'm using <a href="https://stackoverflow.com/questions/2644975/jquery-plugin-datatables-how-to-highlight-the-current-search-text"><strong>this topic</strong></a>, I've put jquery plugin to my app and add this line:</p>
  
  <pre><code>  $table.highlight($(".search.bs.table").val());
  </code></pre>
  
  <p>But searching text still doesn't highlighting. Somebody could me explain, Where is my mistake?</p>
  
  <p><a href="https://plnkr.co/edit/cm4bKF8DNFHnSRCMOPJr?p=preview" rel="nofollow noreferrer"><strong>plunker</strong></a></p>
  
  <p>code: </p>
  
  <pre><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()
          });
      });
  }
  </code></pre>