使用引導程序的表分頁

Question

我想在我的表上使用表分頁，但我根本不想使用Datatables。

這是我到目前爲止有：

<section id="processes" class="center"> 
      <i id="export_icon" class="fa fa-file" aria-hidden="true"></i><a id="export_link" href="#"> Export to Excel</a> 
      <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_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{ 
    margin-top:15px; 
    width:50%; 
    height: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; 
} 

這裏的小提琴：

FIDDLE

基本上我有基本的代碼爲所有分頁。不過，我沒有任何關於如何使其正常工作的線索。我真的不想使用數據表。

我該怎麼做？

Answer 1

我創建了一些自定義JavaScript來處理分頁。我隱藏/顯示基於活動頁面的正確表格。所有tr現在都有一個新屬性data-show，它將根據活動頁面顯示爲隱藏。通過點擊分頁內的鏈接調用該功能，這將觸發正確的tr。這只是一個非常基本的功能，需要改進，但這樣的工作很好。

var activepage = 1; 

    function paginate(showpageId) { 
    activepage = showpageId; 
    $('#table_processes tr:not(.headerrow)').hide(); 
    $('#table_processes').find('tr[data-show="page'+activepage+'"]').show(); 
    } 
    paginate(1); 

    $('.pagination li a').click(function() { 
    paginate($(this).data('link')); 
    }); 

看到這個jsfiddle