jquery - 使用 bootstrap 进行表分页

Question

我想在我的表格上进行表格分页，但我根本不想使用数据表。

这是我目前所拥有的:

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

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