ajax 分頁（jquery分頁插件pagination） 小例2

封裝成：myPagination.js
// ajax分頁
function sendAjax(flag, dataParam, url, callback) {//封裝的ajax；
    var shus = document.getElementById("ssq-" + flag).value;
    if (shus != "") {
        var pageNumber = document.getElementById("ssq-" + flag).value;
    } else {
        var pageNumber = 1;
    }
    $.ajax({
        type: "POST",
        url: url + "?pageNumber=" + pageNumber,
        data: dataParam,
        datatype: "json",
        success: function (data) {
            if (data == '302') {
                location.herf = "/login";
                return
            }
            //當前頁
            var pagenum = data.current;
            document.getElementById("ssq-" + flag).value = pagenum;
            document.getElementById("ff-" + flag).innerHTML = pagenum;
            //總頁數
            var pages = data.pages;
            document.getElementById("zys-" + flag).value = pages;
            document.getElementById("fffs-" + flag).innerHTML = pages;

            callback(data);
        },
        error: function () {
            //請求出錯處理
            alert("服務器忙碌，稍后再試")
        }
    });
}

//分頁上一個
function syy(flag) {
    var shu = document.getElementById("ssq-" + flag).value;
//                判斷是不是第一頁
    if (shu == 1) {
        $.alert({
            title: '提示',
            content: '已經是首頁了！',
            buttons: {"好的": {btnClass: 'btn-blue'}}
        });
        return false;
    }
    document.getElementById("ssq-" + flag).value = parseInt(shu) - 1;
    ajaxpage(flag)
}

//分頁下一頁
function xyy(flag) {
    var shu = document.getElementById("ssq-" + flag + "").value;
    var zye = document.getElementById("zys-" + flag).value;

    if (shu == zye) {
        $.alert({
            title: '提示',
            content: '已經是最后一頁了！',
            buttons: {"好的": {btnClass: 'btn-blue'}}
        });
        return false;
    }
    document.getElementById("ssq-" + flag).value = parseInt(shu) + 1;
    ajaxpage(flag)
}

//分頁 首頁
function sy(flag) {
    document.getElementById("ssq" + flag).value = 1;
    ajaxpage(flag)
}

//尾頁
function wy(flag) {
    var zye = document.getElementById("zys-" + flag).value;
    document.getElementById("ssq-" + flag).value = zye;
    ajaxpage(flag)
}

// 這個是查詢 的方法，如果用這個方法的話，就得吧對應的彈框 div 設置成對應的 eg:ID= detailModel-factory
function selects(flag) {
    $("#detailModel-" + flag).modal('show');
    $('#ssq-' + flag).val('');
    ajaxpage(flag);
}

 

頁面中調用：

<div class="modal fade" id="detailModel-logistic">
    <div class="modal-dialog  modal-full " style="z-index:9999;">
        <div class="modal-content" style="width: 1000px;margin-left: -170px;">
            <!--<form class="form-horizontal" role="form" method="post">-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="orderTitleInfo">選擇訂單</h4>
            </div>
            <div class="input-group">
                <div class="form-inline" style="margin-left: 20px;">
                    <input type="text" name="sOrderCode" id="sOrderCode"
                           class="form-control" style="width: 150px;"
                           placeholder="訂單編碼">
                    <input type="text" name="sCustomerId" id="sCustomerId"
                           class="form-control" style="width: 150px;"
                           placeholder="買家ID">
                    <input type="text" name="sCustomerName" id="sCustomerName"
                           class="form-control" style="width: 150px;"
                           placeholder="買家姓名">
                    <button class="btn btn-default" type="button" onclick="selects('logistic')"><i
                            class="fa fa-search"></i>
                    </button>
                </div>
            </div>


            <div class="modal-body" style="max-height:630px;overflow-y: auto;overflow-x: hidden;">
                <div>
                    <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
                        <tr>
                            <th></th>
                            <th>訂單編碼</th>
                            <th>買家ID</th>
                            <th>買家姓名</th>
                            <th>收貨電話</th>
                            <th>收貨地址</th>
                            <th>總件數</th>
                            <th>下單日期</th>
                            <th>發貨日期</th>
                        </tr>
                        <tbody id="pagination-data-logistic">
                        </tbody>

                    </table>
                    <table width="100%">
                        <tr>
                            <td>
                                <div id="Pagination-logistic    " class="logistic">
                                    <a href=" javascript:void(0)" onclick="sy('logistic')">首頁</a>
                                    <input type="text" id="ssq-logistic" style="display: none">
                                    <input type="text" id="zys-logistic" style="display: none">
                                    <a href=" javascript:void(0)" onclick="syy('logistic')">上一頁</a>
                                    <a href="javascript:void(0)" onclick="xyy('logistic')">下一頁</a>
                                    <a href="javascript:void(0)" onclick="wy('logistic')">尾頁</a>
                                </div>
                            </td>
                            <td>
                                <h4> 當前為：【<span id="ff-logistic"></span>/<span id="fffs-logistic"></span>】頁
                                </h4>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="queding()">確定
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
            </div>
            <!--</form>-->
        </div>
    </div>

 

　　

后台傳來的數據：
{
    "asc": true,
    "current": 1,
    "limit": 2147483647,
    "offset": 0,
    "offsetCurrent": 0,
    "openSort": true,
    "optimizeCount": false,
    "pages": 796,
    "records": [
        {
            "buyer_id": "26167d370cac4109a6a80ffd29cceeae",
            "customer_id": "李娜111",
            "customer_name": "李娜111",
            "id": "18409012307f4ee59b68ab20e1b71da3",
            "order_code": "BRD17111300001",
            "status": "1",
            "total_price": "7010.64"
        },
        {
            "buyer_id": "2f6e41b7f9e345248bb29b4d46910d3c",
            "customer_id": "1",
            "customer_name": "1",
            "id": "1b4e80d0300a4676af424f74121f34b6",
            "order_code": "BRD17111000003",
            "status": "1",
            "total_price": "0.00"
        },
        {
            "buyer_id": "44013786104425245",
            "customer_id": "2012唐夢汝",
            "customer_name": "吳金樹",
            "id": "44013786104425245",
            "order_code": "44013786104425245",
            "status": "3",
            "total_price": "9.90"
        },
        {
            "buyer_id": "44052512930268206",
            "customer_id": "wzysdjx",
            "customer_name": "王忠營",
            "id": "44052512930268206",
            "order_code": "44052512930268206",
            "status": "3",
            "total_price": "64.00"
        },
        {
            "buyer_id": "44133322505002926",
            "customer_id": "朔寶wphc",
            "customer_name": "王鵬",
            "id": "44133322505002926",
            "order_code": "44133322505002926",
            "status": "3",
            "total_price": "9.90"
        }
    ],
    "searchCount": true,
    "size": 5,
    "total": 3976
}

　　

@RequestMapping("/search_order_code")
    public @ResponseBody Page<BusInvoiceListOrder> searchOrderCode(Integer pageNumber,@RequestParam(defaultValue="5") Integer pageSize,String order_code,
                                                                   String customer_id) {
        Page<BusInvoiceListOrder>page=new Page<>(pageNumber,pageSize);

        Page<BusInvoiceListOrder> pageData = orderService.invoiceListOrder(order_code, customer_id,page);

        logger.info(JSON.toJSONStringWithDateFormat(pageData, "yyyy-MM-dd HH:mm:ss"));
        return pageData;
    }

@Override
public Page<BusInvoiceListOrder> invoiceListOrder(String order_code, String customer_id,Page<BusInvoiceListOrder>page) {
  page.setRecords(orderMapper.invoiceListOrderByCodeAndCus(order_code, customer_id,page));
  return page;
}

public List<BusInvoiceListOrder> invoiceListOrderByCodeAndCus(
    @Param("order_code") String order_code, @Param("customer_id") String customer_id, Page<BusInvoiceListOrder> page);

<select id="invoiceListOrderByCodeAndCus" resultType="BusInvoiceListOrder">
   select
   o.id,o.order_code,o.total_price,o.status,o.buyer_id,c.customer_id,c.customer_name
   from
   v_order o,customer_info c where o.buyer_id=c.id and o.del_flag=0 and
   o.is_invoice=0 and verify_status!=1
   <if test="order_code!=null and order_code!=''">
      and o.order_code like concat('%',#{order_code},'%')
   </if>
   <if test="customer_id!=null and customer_id!=''">
      and c.customer_id like concat('%',#{customer_id},'%')
   </if>
</select>

　　

<!-- Mybatis -->
<dependency>
   <groupId>com.baomidou</groupId>
   <artifactId>mybatis-plus</artifactId>
   <version>${mybatis-plus.version}</version>
</dependency>

<mybatis-plus.version>2.0.7</mybatis-plus.version>