javascript - 每页记录数

Question

我有一个包含大量数据的表格，我希望能够选择每页显示多少行。我有一个每页记录组合框，表格底部有一个分页导航，但我不知道该怎么做...

这是所有代码的 fiddle ，所以你可以很容易地看到我的问题:

FIDDLE

还有代码:

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

我已将代码编辑为仅适用于组合框，您可以尝试使用相同的方式进行导航。

交替使用这个

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>