使用引导程序的表分页

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