title: Add simple Paging to HTML table?
body: <p>I have a html table that is being populated via a knockout JS foreach loop. The main reason of this method is for the functionality of the grid and binding to my MVC model for post back. I have been trying different plugins for paging but all require a datasource it seems which i can't provide. I want to use knockout for generating my table but then add paging to that table. Any ideas or suggestions? Below is a simplified version of my table.</p>
  
  <pre><code>&lt;table id="AgencyTable" class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Address1&lt;/th&gt;
                  &lt;th&gt;Address2&lt;/th&gt;
                  &lt;th&gt;City&lt;/th&gt;
                  &lt;th&gt;State&lt;/th&gt;
                  &lt;th&gt;Zip&lt;/th&gt;
                  &lt;th&gt;Active&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody id="AgencyGrid" data-bind="foreach:{data: Agencies, as: 'agency'}"&gt;
              &lt;tr data-bind="attr: { index: $index }" class="marginTopSmall"&gt;
  
                  &lt;td class="marginTopSmall"&gt;
                      &lt;input data-bind="value: agency.Address1, attr: { name: 'Agencies[' + $index() + '].Address1'}" /&gt;
                  &lt;/td&gt;
                  &lt;td class="marginTopSmall"&gt;
                      &lt;input data-bind="value: agency.Address2, attr: { name: 'Agencies[' + $index() + '].Address2'}" /&gt;
                  &lt;/td&gt;
                  &lt;td class="marginTopSmall"&gt;
                      &lt;input data-bind="value: agency.City, attr: { name: 'Agencies[' + $index() + '].City'}" /&gt;
                  &lt;/td&gt;
                  &lt;td class="marginTopSmall"&gt;
                      &lt;input id="StateInput" data-bind="value: agency.State, attr: { name: 'Agencies[' + $index() + '].State'}" /&gt;
                  &lt;/td&gt;
                  &lt;td class="marginTopSmall"&gt;
                      &lt;input id="ZipInput" data-bind="value: agency.Zip, attr: { name: 'Agencies[' + $index() + '].Zip'}" /&gt;
                  &lt;/td&gt;
                  &lt;td class="marginTopSmall"&gt;
                      &lt;input type="checkbox" class="active" data-bind="checked: agency.Active" /&gt;
                      &lt;input type="hidden" data-bind="value: agency.Active, attr: { name: 'Agencies[' + $index() + '].Active'}"&gt;
                  &lt;/td&gt;
                  &lt;td class="marginTopSmall"&gt;
                      &lt;input type="button" data-bind="click: $parent.removeAgency, visible: agency.IsNew" value="Remove" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>