java ajax jquery分页插件_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("服务器忙碌，稍后再试")

}

});

}//分页上一个

functionsyy(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)

}//分页下一页

functionxyy(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)

}//分页 首页

functionsy(flag) {

document.getElementById("ssq" + flag).value = 1;

ajaxpage(flag)

}//尾页

functionwy(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);

}

页面中调用：

×

选择订单

class="form-control" style="width: 150px;"

placeholder="订单编码">

class="form-control" style="width: 150px;"

placeholder="买家ID">

class="form-control" style="width: 150px;"

placeholder="买家姓名">

class="fa fa-search">

	订单编码	买家ID	买家姓名	收货电话	收货地址	总件数	下单日期	发货日期

首页 上一页 下一页 尾页

当前为：【/】页

确定

关闭

后台传来的数据：

{

"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 searchOrderCode(Integer pageNumber,@RequestParam(defaultValue="5") Integer pageSize,String order_code,

String customer_id) {

Pagepage=new Page<>(pageNumber,pageSize);

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

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

return pageData;

}

@Override

public Page invoiceListOrder(String order_code, String customer_id,Pagepage) {

page.setRecords(orderMapper.invoiceListOrderByCodeAndCus(order_code, customer_id,page));

return page;

}

public List invoiceListOrderByCodeAndCus(

@Param("order_code") String order_code, @Param("customer_id") String customer_id, Page page);

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

and o.order_code like concat('%',#{order_code},'%')

and c.customer_id like concat('%',#{customer_id},'%')

com.baomidou

mybatis-plus

${mybatis-plus.version}

2.0.7