ページごとのレコード数ページ番号

Question

大量のデータを持つテーブルがあり、ページごとに表示する行数を選択できます。ページあたりのレコードのコンボボックスとテーブルの下部にあるページネーションナビゲータがありますが、これを行う方法がわかりません。

ここにはすべてのコードが含まれているので、簡単に見ることができます私の問題：

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++) { 
 

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