2016-09-02 57 views
0

我有一個包含大量數據的表格,我希望能夠選擇每頁顯示多少行。我有一個記錄每頁組合框,並在表底部的分頁導航,但我不知道如何做到這一點...每頁分頁的記錄

這裏是所有代碼的小提琴,所以你可以很容易地看到我的問題:

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; 
} 
+0

您使用的靜態數據和動態? –

+0

我使用動態數據@YuvrajMudaliar。我從JSON調用表填充 – laker001

+0

使用替代方法http://stackoverflow.com/questions/39204792/bootstrap-datatable-search-function/39206327#39206327 –

回答

1

我編輯的代碼只能用於組合框,您可以嘗試相同的導航。

交替使用這

Bootstrap datatable search function

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

 
\t 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>

+0

謝謝,我真的不想使用數據表,這工作!然而,對於導航有點棘手,因爲我可能不得不顯示分頁,比如說,直到第90頁或僅顯示一個頁面。你能提供一個例子嗎? – laker001

+0

此外,這是奇怪的,我複製你的代碼到這個小提琴,但它不工作:http://jsfiddle.net/dcarou/804jeg82/594/ – laker001

+0

JSfiddle不允許內聯函數call.Plus我沒有到目前爲止使用它。所以你可以在jQuery添加的其他編輯器上試試它。 –