laker001 laker001 - 3 months ago 8
CSS Question

Records per Page Pagination

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...

Here's a fiddle with all the code, so you can easily see my issue:

FIDDLE

And the code:

<section id="search_processes" class="center"> <div id="filter_content" class="table pull-left">
<table id="table_filters">
<tr id="row_special">
<td class="exp">
<label>Records per Page:</label>
<br/>
<select id="records_comboBox">
<option id="any" value="any">Any</option>
<option id="10" value="10">10</option>
<option id="25" value="25">25</option>
<option id="50" value="50">50</option>
</select>
</td>
</tr>
</table> </div> </div> </section>

<section id="processes" class="center"> <table id="table_processes" class="table-hover">
<tr id="table_processes_row">
<th data-field="status">Status</th>
<th data-field="id">ID</th>
<th data-field="pid">PID</th>
<th data-field="process_name">Process Name</th>
<th data-field="description">Description</th>
<th data-field="application">Application</th>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>sme</td>
<td>Process Instance has been created.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_inactive" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Name</td>
<td>Process Instance has been started.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>

<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>

<tr id="table_processes_row">
<td><i id="flag_inactive" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>sss Name</td>
<td>Process Instance has ended.</td>
<td>App</td>
</tr> </table> <nav aria-label="Page navigation" class="pull-right">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a>
</li>
</ul> </nav>

</section>


CSS:

* {
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;
}

Answer

I have edited the code to work only for combo box,You can try the same for navigation.

Alternate use this

Bootstrap datatable search function

function results(thisEle){
$("#table_processes  tr").removeClass('hideTr');
for(var i = 0; i < $("#table_processes tr").length; i++) {

	if(i>thisEle.value && thisEle.value!="any")
   $("#table_processes  tr")[i].className='hideTr';
    }
}
* {
  font-family: 'Source Sans Pro', sans-serif;
}

body {
  overflow-x: hidden;
}
.hideTr{
  display:none;
}
#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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="search_processes" class="center">
  <div id="filter_content" class="table pull-left">
    <table id="table_filters">
      <tr id="row_special">
        <td class="exp">
          <label>Records per Page:</label>
          <br/>
          <select onchange="results(this)" id="records_comboBox">
            <option id="any" value="any">Any</option>
            <option id="10" value="10">10</option>
            <option id="25" value="25">25</option>
            <option id="50" value="50">50</option>
          </select>
        </td>
      </tr>
    </table>
  </div>
  </div>
</section>

<section id="processes" class="center">
  <table id="table_processes" class="table-hover">
    <tr id="table_processes_row">
      <th data-field="status">Status</th>
      <th data-field="id">ID</th>
      <th data-field="pid">PID</th>
      <th data-field="process_name">Process Name</th>
      <th data-field="description">Description</th>
      <th data-field="application">Application</th>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>sme</td>
      <td>Process Instance has been created.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_inactive" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Name</td>
      <td>Process Instance has been started.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>

    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>
    <tr id="table_processes_row">
      <td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>Process Name</td>
      <td>Process running.</td>
      <td>App</td>
    </tr>

    <tr id="table_processes_row">
      <td><i id="flag_inactive" class="fa fa-flag" aria-hidden="true"></i></td>
      <td>2</td>
      <td>1323213</td>
      <td>sss Name</td>
      <td>Process Instance has ended.</td>
      <td>App</td>
    </tr>
  </table>
  <nav aria-label="Page navigation" class="pull-right">
    <ul class="pagination">
      <li>
        <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a>
      </li>
      <li>
        <a href="#">1</a>
      </li>
      <li>
        <a href="#">2</a>
      </li>
      <li>
        <a href="#">3</a>
      </li>
      <li>
        <a href="#">4</a>
      </li>
      <li>
        <a href="#">5</a>
      </li>
      <li>
        <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a>
      </li>
    </ul>
  </nav>

</section>