Question

我想在表格下面分页，因为我正在使用Bootstrap paginator http://lyonlai.github.io/bootstrap-paginator/来自此链接。我阅读文档。但我无法理解插件的工作流程。

HTML表格文件： -

     <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/documentation.css">
<script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
    src="assets/js/bootstrap-paginator.min.js"></script>
<title>Insert title here</title>
</head>
<body>
    <table class="table"id="trialTable">
        <thead>
            <tr>
                <th>h1</th>
                <th>h2</th>
                <th>h3</th>
                <th>h4</th>
                <th>h5</th>
            </tr>
        </thead>
        <tbody><tr><td>one</td><td>one</td><td>one</td><td>one</td><td>one</td></tr>
        <tr><td>one</td><td>one</td><td>one</td><td>one</td><td>one</td></tr>
        <tr><td>one</td><td>one</td><td>one</td><td>one</td><td>one</td></tr>
        <tr><td>one</td><td>one</td><td>one</td><td>one</td><td>one</td></tr>
        <tr><td>one</td><td>one</td><td>one</td><td>one</td><td>one</td></tr>
        <tr><td>one</td><td>one</td><td>one</td><td>one</td><td>one</td></tr>
        <tr><td>one</td><td>one</td><td>one</td><td>one</td><td>one</td></tr>
        <tr><td>one</td><td>one</td><td>one</td><td>one</td><td>one</td></tr>
        <tr><td>one</td><td>one</td><td>one</td><td>one</td><td>one</td></tr>
        <tr><td>one</td><td>one</td><td>one</td><td>one</td><td>one</td></tr>
        </tbody>    
        </table>
    <div id="example"></div>
    <script type='text/javascript'>
    var x = document.getElementById("trialTable").rows.length;
    console.log(x);
            var options = {
                currentPage: 1,
                totalPages: x,
                alignment:"center",
                itemTexts: function (type, page, current) {
                        switch (type) {
                        case "first":
                            return "First";
                        case "prev":
                            return "Previous";
                        case "next":
                            return "Next";
                        case "last":
                            return "Last";
                        case "page":
                            return page;
                        }
                    }
                }
console.log(options);
            $('#example').bootstrapPaginator(options);
    </script>

</body>
</html>

输出屏幕： - enter image description here 它并不能帮助解决这个问题。

BootstrapPaginator分页不起作用

0 个答案: