title: How to add Custom Field in bootstrapTable
body: <p>How to add a new custom field near the existing Search Field ("PESQUISAR") ? I saw many examples to add a new custom field bellow <code>tr th</code>, but I would like it to be in the same direction "Pesquisar" Field</p>
  
  <p><a href="https://i.stack.imgur.com/mrvRq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mrvRq.png" alt="enter image description here"></a></p>
  
  <h2>Updating</h2>
  
  <pre><code> &lt;table id="table1" data-toggle="table" data-pagination=true data-sortable="true" data-search=true data-locale="pt-BR"&gt;
      &lt;thead&gt;
  
        &lt;tr&gt;
          &lt;th data-sortable="true"&gt;ID&lt;/th&gt;
          &lt;th data-sortable="true"&gt;NOME&lt;/th&gt;
          &lt;th data-sortable="true"&gt;SERVICO&lt;/th&gt;
          &lt;th data-sortable="true"&gt;CIDADE&lt;/th&gt;
          &lt;th data-sortable="true"&gt;BAIRRO&lt;/th&gt;
          &lt;th data-sortable="true"&gt;RUA&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
         //Content
      &lt;/tbody&gt;
  
  &lt;/table&gt;
  
  
  &lt;script type="text/javascript"&gt;
   $(document).ready(function(){
  
     $('#table1').bootstrapTable({
       locale: 'pt-BR'
    });
  
   });
  &lt;/script&gt;
  </code></pre>