Добавить простую таблицу подкачки в HTML?

Question

У меня есть таблица html, которая заполняется через нокаут JS foreach loop. Основная причина этого метода - функциональность сетки и привязка к моей модели MVC для обратной связи. Я пытаюсь использовать разные плагины для подкачки, но все они требуют источника данных, который я не могу предоставить. Я хочу использовать нокаут для создания моей таблицы, но затем добавить пейджинг в эту таблицу. Любые идеи или предложения? Ниже приведена упрощенная версия моей таблицы.

<table id="AgencyTable" class="table"> 
     <thead> 
      <tr> 
       <th>Address1</th> 
       <th>Address2</th> 
       <th>City</th> 
       <th>State</th> 
       <th>Zip</th> 
       <th>Active</th> 
      </tr> 
     </thead> 
     <tbody id="AgencyGrid" data-bind="foreach:{data: Agencies, as: 'agency'}"> 
      <tr data-bind="attr: { index: $index }" class="marginTopSmall"> 

       <td class="marginTopSmall"> 
        <input data-bind="value: agency.Address1, attr: { name: 'Agencies[' + $index() + '].Address1'}" /> 
       </td> 
       <td class="marginTopSmall"> 
        <input data-bind="value: agency.Address2, attr: { name: 'Agencies[' + $index() + '].Address2'}" /> 
       </td> 
       <td class="marginTopSmall"> 
        <input data-bind="value: agency.City, attr: { name: 'Agencies[' + $index() + '].City'}" /> 
       </td> 
       <td class="marginTopSmall"> 
        <input id="StateInput" data-bind="value: agency.State, attr: { name: 'Agencies[' + $index() + '].State'}" /> 
       </td> 
       <td class="marginTopSmall"> 
        <input id="ZipInput" data-bind="value: agency.Zip, attr: { name: 'Agencies[' + $index() + '].Zip'}" /> 
       </td> 
       <td class="marginTopSmall"> 
        <input type="checkbox" class="active" data-bind="checked: agency.Active" /> 
        <input type="hidden" data-bind="value: agency.Active, attr: { name: 'Agencies[' + $index() + '].Active'}"> 
       </td> 
       <td class="marginTopSmall"> 
        <input type="button" data-bind="click: $parent.removeAgency, visible: agency.IsNew" value="Remove" /> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

Answer 1

Отличный example of this in the Knockout documentation. В этом примере используется simpleGridcustom binding, который можно найти на той же странице документации here.

Полученная разметка является простым, как это:

<div class='liveExample'> 
    <div data-bind='simpleGrid: gridViewModel'> </div> 

    <button data-bind='click: addItem'> 
     Add item 
    </button> 

    <button data-bind='click: sortByName'> 
     Sort by name 
    </button> 

    <button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'> 
     Jump to first page 
    </button> 
</div>