title: Records per Page Pagination
body: <p>I have a table with large amounts of data, and i want to be able to select how many rows i want to show per page. I have a records per page combo box, and a pagination nav at the bottom of the table, but i don't know how to do this...</p>
  
  <p>Here's a fiddle with all the code, so you can easily see my issue:</p>
  
  <p><a href="http://jsfiddle.net/dcarou/804jeg82/591/" rel="nofollow">FIDDLE</a></p>
  
  <p>And the code:</p>
  
  <pre><code>&lt;section id="search_processes" class="center"&gt;   &lt;div id="filter_content" class="table pull-left"&gt;
      &lt;table id="table_filters"&gt;
        &lt;tr id="row_special"&gt;
          &lt;td class="exp"&gt;
            &lt;label&gt;Records per Page:&lt;/label&gt;
            &lt;br/&gt;
            &lt;select id="records_comboBox"&gt;
              &lt;option id="any" value="any"&gt;Any&lt;/option&gt;
              &lt;option id="10" value="10"&gt;10&lt;/option&gt;
              &lt;option id="25" value="25"&gt;25&lt;/option&gt;
              &lt;option id="50" value="50"&gt;50&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;   &lt;/div&gt;   &lt;/div&gt; &lt;/section&gt;
  
  &lt;section id="processes" class="center"&gt;   &lt;table id="table_processes" class="table-hover"&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;th data-field="status"&gt;Status&lt;/th&gt;
        &lt;th data-field="id"&gt;ID&lt;/th&gt;
        &lt;th data-field="pid"&gt;PID&lt;/th&gt;
        &lt;th data-field="process_name"&gt;Process Name&lt;/th&gt;
        &lt;th data-field="description"&gt;Description&lt;/th&gt;
        &lt;th data-field="application"&gt;Application&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;sme&lt;/td&gt;
        &lt;td&gt;Process Instance has been created.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_inactive" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Name&lt;/td&gt;
        &lt;td&gt;Process Instance has been started.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_active" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;Process Name&lt;/td&gt;
        &lt;td&gt;Process running.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr id="table_processes_row"&gt;
        &lt;td&gt;&lt;i id="flag_inactive" class="fa fa-flag" aria-hidden="true"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;1323213&lt;/td&gt;
        &lt;td&gt;sss Name&lt;/td&gt;
        &lt;td&gt;Process Instance has ended.&lt;/td&gt;
        &lt;td&gt;App&lt;/td&gt;
      &lt;/tr&gt;   &lt;/table&gt;   &lt;nav aria-label="Page navigation" class="pull-right"&gt;
      &lt;ul class="pagination"&gt;
        &lt;li&gt;
          &lt;a href="#" aria-label="Previous"&gt; &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt; &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;3&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;4&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;5&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#" aria-label="Next"&gt; &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt; &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;   &lt;/nav&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
    font-family: 'Source Sans Pro', sans-serif;
  }
  
  body {
    overflow-x: hidden;
  }
  
  #flag_active {
    color: green;
  }
  
  #flag_inactive {
    color: red;
  }
  
  #table_processes_row {
    height: 40px;
    border-top: .12em solid #A9A9A9;
  }
  
  td {
    border-top: .12em solid #ddd;
  }
  
  th {
    background-color: #DCDCDC;
    text-align: center;
  }
  
  #table_processes {
    width: 100%;
    text-align: center;
  }
  
  #table_filters td {
    padding-left: 20px;
  }
  
  #table_filters input {
    height: 30px;
    width: 140px;
  }
  
  #status_comboBox {
    height: 30px;
    width: 140px;
  }
  
  #status_comboBox option {
    width: 100px;
  }
  
  #records_comboBox {
    height: 30px;
    width: 60px;
  }
  
  #records_comboBox option {
    width: 100px;
  }
  </code></pre>