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" >关闭</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 >
      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>