title: Using bootstrap table with input fields
body: <p>I am using <a href="https://bootstrap-table.com/" rel="nofollow noreferrer">bootstrap table</a>.</p>
  
  <p>My table contains cells that contains input fields.</p>
  
  <p>When the user changes the value of an input field I need to do the following in order to keep the table sorted.</p>
  
  <ol>
  <li><p>"Ask" the table if the input field that was just changed belongs to the column that the table is sorted by. </p></li>
  <li><p>If the answer to question number 1 is true, I need to "tell" the table to sort the rows.</p></li>
  </ol>
  
  <p>My questions are:</p>
  
  <ul>
  <li>Dows the logic above feels correct? </li>
  <li>How do I (what is the API call I should use) in order to answer #1  </li>
  <li>How to I call the "re-sort rows"  API of the table?</li>
  </ul>
  
  <p>Code snippet</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
      &lt;title&gt;sorted table&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;span&gt;A Bootstrap table&lt;/span&gt;
  
  &lt;table id="my_table_1" data-toggle="table" data-sort-stable="true"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th data-sortable="true"&gt;A&lt;/th&gt;
          &lt;th data-sortable="true"&gt;B&lt;/th&gt;
          &lt;th data-sortable="true"&gt;C&lt;/th&gt;
          &lt;th data-sortable="false"&gt;D&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
     &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;&lt;select&gt;
                  &lt;option val="112"&gt;A&lt;/option&gt;
                  &lt;option val="2"&gt;B&lt;/option&gt;
                  &lt;option val="356" selected&gt;C&lt;/option&gt;
              &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;input type="date" value="2018-07-22"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;123&lt;/td&gt;
              &lt;td&gt;&lt;select&gt;
                  &lt;option val="1" selected&gt;A&lt;/option&gt;
                  &lt;option val="2"&gt;B&lt;/option&gt;
                  &lt;option val="3"&gt;C&lt;/option&gt;
              &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;input type="date" value="2014-07-22"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;56&lt;/td&gt;
              &lt;td&gt;&lt;select&gt;
                  &lt;option val="1"&gt;A&lt;/option&gt;
                  &lt;option val="2" selected&gt;B&lt;/option&gt;
                  &lt;option val="3"&gt;C&lt;/option&gt;
  
              &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;input type="date" value="2014-08-23"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;14&lt;/td&gt;
              &lt;td&gt;&lt;select&gt;
                  &lt;option val="1"&gt;A&lt;/option&gt;
                  &lt;option val="2" selected&gt;B&lt;/option&gt;
                  &lt;option val="3"&gt;C&lt;/option&gt;
  
              &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;input type="date" value="2014-07-23"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
  &lt;/table&gt;
  
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
            console.log('ready');
            $('#my_table_1').find('input[type="date"]').change(function() {
              console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
            });
            $('#my_table_1').find('select').change(function() {
              console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
            });
           });
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>