title: Wenzhixin Bootstrap-table with Knockout JS
body: <p>I have a table that's populated via knockout JS using bind. I need to add a search and sorter so I'm trying to implement Bootstrap-table but I can't get it to work with Knockout. I've searched the net but can't find any relevant information. Below is what I'm currently doing, any help will be appreciated. </p>
  
  <p>Knockout</p>
  
  <pre><code>    function Sales(Sales) {
          this.Name = ko.observable(Sales.NAME);
          this.Phone = ko.observable(Sales.PHONE);
          this.Email = ko.observable(Sales.EMAIL);
          this.Item = ko.observable(Sales.ITEM);
          this.Description = ko.observable(Sales.DESCRIPTION);
          this.SaleId = ko.observable(Sales.SALE_ID);
  
       }
  
      var indexVM = new indexVM();
      $('#SaleitemTable').bootstrapTable({});
      ko.applyBindings(indexVM);
  </code></pre>
  
  <p>Table</p>
  
  <pre><code>    &lt;table id="SaleitemTable" class="table table-bordered table-striped " 
         data-search="true"
         data-sort-name="name" 
         data-sort-order="asc"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
          &lt;th&gt;ITEM&lt;/th&gt;
          &lt;th style="width:180px"&gt;ITEM DESCRIPTION&lt;/th&gt;
          &lt;th data-field="name" data-sortable="true"&gt;SELLER NAME&lt;/th&gt;
          &lt;th&gt;SELLER PHONE&lt;/th&gt;
          &lt;th&gt;SELLER EMAIL&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
      &lt;tbody data-bind="foreach: Sales"&gt;
          &lt;tr&gt;
                &lt;td data-bind="text: Item"&gt;&lt;/td&gt;
                &lt;td data-bind="text: Description&gt;&lt;/td&gt;
                &lt;td data-bind="text: Name"&gt;&lt;/td&gt;
                &lt;td data-bind="text: Phone"&gt;&lt;/td&gt;
                &lt;td data-bind="text: Email"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>