封装成：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=" 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">×</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=" 150px;"
placeholder="订单编码">
<input type="text" name="sCustomerId" id="sCustomerId"
class="form-control" style=" 150px;"
placeholder="买家ID">
<input type="text" name="sCustomerName" id="sCustomerName"
class="form-control" style=" 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>