前端分页插件bootstrapPaginator的使用

Posted 2020-11-01 MX雪碧

 

<table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="sample_2_info">
                        <thead>
                            <tr role="row">
                                <th tabindex="0" aria-label="">
                                    **
                                </th>
                                <th tabindex="0" aria-label="">
                                    **
                                </th>
                                <th tabindex="0" aria-label="">
                                   **
                                </th>
                                <th tabindex="0" aria-label="">
                                    **
                                </th>
                                <th tabindex="0" aria-label="">
                                    **
                                </th>
                                <th tabindex="0" aria-label="">
                                    **
                                </th>
                                <th tabindex="0" aria-label="">
                                    **
                                </th>
                                <th tabindex="0" aria-label="">
                                    **
                                </th>
                            </tr>
                        </thead>
                        <tbody id="tableBody"></tbody>
                    </table>
                    <div class="paging-toolbar">
                        <ul id="grid_paging_part"></ul>
                    </div>

<script>
$(function () {
           loadTables(1, 10);
    });

    function loadTables(startPage, pageSize) {
        $("#tableBody").html("");
        $.ajax({
            type: "GET",
            url: "/Transaction/GetRecordList?startPage=" + startPage + "&pageSize=" + pageSize,
            success: function (data) {
                $.each(data.rows, function (i, item) {
                    var tr = "<tr>";
                    tr += "<td>" + item.orderId + "</td>";
                    tr += "<td>" + item.appName + "</td>";
                    tr += "<td>" + item.realName + "</td>";
                    tr += "<td>" + item.accountTypeName + "</td>";
                    tr += "<td>" + item.transAmount + "</td>";
                    tr += "<td>" + item.transTime.replace("T", " ") + "</td>";
                    if (item.transType == ‘1‘) {
                        tr += "<td>**</td>";
                    }
                    if (item.transType == ‘2‘) {
                        tr += "<td>**</td>";
                    }
                    if (item.flag == ‘0‘) {
                        tr += "<td>**</td>";
                    }
                    else {
                        tr += "<td>**</td>";
                    }
                    tr += "</tr>";
                    $("#tableBody").append(tr);
                })
                var elment = $("#grid_paging_part"); //分页插件的容器id
                if (data.rowCount > 0) {
                    var options = { //分页插件配置项
                        bootstrapMajorVersion: 3,
                        currentPage: startPage, //当前页
                        numberOfPages: data.rowsCount, //总数
                        totalPages: data.pageCount, //总页数
                        shouldShowPage: function (type, page, current) {
                            var result = !0;
                            switch (type) {
                                case "first":
                                    result = 1 !== current;
                                    break;
                                case "prev":
                                    result = 1 !== current;
                                    break;
                                case "next":
                                    result = current !== this.totalPages;
                                    break;
                                case "last":
                                    result = current !== this.totalPages;
                                    break;
                                case "page":
                                    result = !0
                            }
                            return result
                        },
                        itemTexts: function (type, page, current) {//设置显示的样式，默认是箭头
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "末页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageChanged: function (event, oldPage, newPage) { //页面切换事件
                            loadTables(newPage, pageSize);
                        }
                    }
                    elment.bootstrapPaginator(options); //分页插件初始化
                }
            }
        })
    };

</script>