title: How to use SimplePagination jquery
body: <p>I am trying to use <a href="http://flaviusmatis.github.io/simplePagination.js/#page-65" rel="nofollow noreferrer">simplePagination</a> on my code. (I am developing using MVC4 C#)</p>
  
  <p>Let say I have this bunch of codes</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="checkbox" name="select-all" id="select-all" /&gt;&lt;/td&gt;
              &lt;td style="text-align: left"&gt;Name&lt;/td&gt;
              &lt;td style="text-align: left"&gt;Created By&lt;/td&gt;
              &lt;td style="text-align: left"&gt;Created Date&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="post"&gt;
              &lt;td&gt;&lt;p&gt;&lt;input Length="0" name="314" type="checkbox" value="true" /&gt;&lt;input name="314" type="hidden" value="false" /&gt;&lt;/p&gt;&lt;/td&gt;
              &lt;td&gt;Window&lt;/td&gt;
              &lt;td&gt;John&lt;/td&gt;
              &lt;td&gt;01/01/2014 12:00:00 AM&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="post"&gt;
              &lt;td&gt;&lt;p&gt;&lt;input Length="0" name="314" type="checkbox" value="true" /&gt;&lt;input name="314" type="hidden" value="false" /&gt;&lt;/p&gt;&lt;/td&gt;
              &lt;td&gt;Door&lt;/td&gt;
              &lt;td&gt;Chris&lt;/td&gt;
              &lt;td&gt;01/01/2014 12:00:00 AM&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="post"&gt;
              &lt;td&gt;&lt;p&gt;&lt;input Length="0" name="314" type="checkbox" value="true" /&gt;&lt;input name="314" type="hidden" value="false" /&gt;&lt;/p&gt;&lt;/td&gt;
              &lt;td&gt;Floor&lt;/td&gt;
              &lt;td&gt;Michael&lt;/td&gt;
              &lt;td&gt;01/01/2014 12:00:00 AM&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="post"&gt;
              &lt;td&gt;&lt;p&gt;&lt;input Length="0" name="314" type="checkbox" value="true" /&gt;&lt;input name="314" type="hidden" value="false" /&gt;&lt;/p&gt;&lt;/td&gt;
              &lt;td&gt;Car&lt;/td&gt;
              &lt;td&gt;James&lt;/td&gt;
              &lt;td&gt;01/01/2014 12:00:00 AM&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="post"&gt;
              &lt;td&gt;&lt;p&gt;&lt;input Length="0" name="314" type="checkbox" value="true" /&gt;&lt;input name="314" type="hidden" value="false" /&gt;&lt;/p&gt;&lt;/td&gt;
              &lt;td&gt;Bike&lt;/td&gt;
              &lt;td&gt;Steven&lt;/td&gt;
              &lt;td&gt;01/01/2014 12:00:00 AM&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>*Note: In the code above I add class 'post' to each 'tr' (row in table body). And these rows are generated dynamically by for loop (C#)</p>
  
  <p>And from the documentation if I want to use <a href="http://flaviusmatis.github.io/simplePagination.js/#page-65" rel="nofollow noreferrer">simplePagination</a> I have to declare the jquery like this:</p>
  
  <pre><code>$(function() {
      $(selector).pagination({
          items: 100,
          itemsOnPage: 10,
          cssStyle: 'light-theme'
      });
  });
  </code></pre>
  
  <p>Actually I am not pretty sure how to use (*how to call) this <a href="http://flaviusmatis.github.io/simplePagination.js/#page-65" rel="nofollow noreferrer">simplePagination</a>. It's my first time dealing with pagination. </p>
  
  <p>I already tried to put this code after the table</p>
  
  <pre><code>&lt;div class="pagination-page"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And change 'Selector' inside jquery calling method with '.pagination-page', but it didn't work.</p>
  
  <pre><code>$(function() {
      $('.pagination-page').pagination({
          items: 100,
          itemsOnPage: 10,
          cssStyle: 'light-theme'
      });
  });
  </code></pre>
  
  <ol>
  <li>Should I replace 'Selector' with a class name? If yes, how do I do that?</li>
  <li>Second is how do I declare this <a href="http://flaviusmatis.github.io/simplePagination.js/#page-65" rel="nofollow noreferrer">simplePagination</a> so that it will show only 2 rows (Only 2 class 'Post') for each page? </li>
  </ol>
  
  <p>*Means in the first page it will only show </p>
  
  <pre><code>+--------------------------------------------------+
  | [] |  Name  | CreatedBy | CreatedDate            | 
  |--------------------------------------------------| 
  | [] | Window | John      | 01/01/2014 12:00:00 AM | 
  | [] | Door   | Chris     | 01/01/2014 12:00:00 AM | 
  +--------------------------------------------------+
  </code></pre>
  
  <p>The second page will show</p>
  
  <pre><code>+--------------------------------------------------+
  | [] |  Name  | CreatedBy | CreatedDate            | 
  |--------------------------------------------------| 
  | [] | Floor  | Michael   | 01/01/2014 12:00:00 AM | 
  | [] | Car    | James     | 01/01/2014 12:00:00 AM | 
  +--------------------------------------------------+
  </code></pre>
  
  <p>So on..</p>
  
  <p>*Note: I am not sure how this jquery will detect how many items we have and generate number of pages and put those items accordingly.</p>