前端分頁外掛程式bootstrapPaginator的使用

標籤：name   OLE   des   esc   desc   頁面切換   too   his   eal   

 

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

 

前端分頁外掛程式bootstrapPaginator的使用