封装成: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>

ajax 分页(jquery分页插件pagination) 小例2的更多相关文章

  1. ajax+php (jquery.form插件)实现异步文件上传

    <!DOCTYPE html> <html lang="CN"> <head> <title>upload model</ti ...

  2. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

  3. jquery 分页控件(二)

    上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的,我弄了个简单的asp.net ...

  4. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  5. jQuery 表格插件25

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  6. 25个顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  7. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  8. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  9. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  10. [转] jQuery Infinite Ajax Scroll(ias) 分页插件介绍

    原文链接:http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91 Infi ...

随机推荐

  1. Java 的Throwable、error、exception的区别

    1. 什么是异常? 异常本质上是程序上的错误,包括程序逻辑错误和系统错误.比如使用空的引用(NullPointerException).数组下标越界(IndexOutOfBoundsException ...

  2. python爬虫基础11-selenium大全5/8-动作链

    Selenium笔记(5)动作链 本文集链接:https://www.jianshu.com/nb/25338984 简介 一般来说我们与页面的交互可以使用Webelement的方法来进行点击等操作. ...

  3. UVALive - 8273 Assigning Frequencies (搜索 )

    n个点的一张图,问能否给每个点染上三种颜色中的一种,使得没有相邻的点颜色相同? n <= 35. Sample Input 4 6 6 0 3 1 5 3 2 2 5 0 4 1 0 7 12 ...

  4. jenkins的构建项目配置

    继http://www.cnblogs.com/yajing-zh/p/5109517.html搭建好jenkins系统配置之后,新建jenkins构建项目,用于自动化构建. 点击Jenkins界面左 ...

  5. 前端AI切图技巧

    AI的基本使用 1.选中多个不同图层. 首先在AI右边工具栏找到“图层” 然后选择需要切图的图层(按住“ctrl”点击) 最后拖到PS里面的新建的图层. 还有个问题,就是图层关联太多,无法拖动某些图层 ...

  6. python - 路径处理 和 模块导入

    # -*- coding:utf-8 -*- '''@project: jiaxy@author: Jimmy@file: study_模块导入.py@ide: PyCharm Community E ...

  7. 触屏版轻量级分页插件jqPagination分享

    说到HTML5和jquery上的分页问题,优秀的分页插件网上一抓一大把,然而同时适合兼容在Ipad和手机端的网站分页却不是特别多. 或许有人会说,触屏现在流行下拉底部后加载下一页内容,类似微博和QQ空 ...

  8. css各属性浏览器的兼容情况

  9. Leetcode 440.字典序第k小的数字

    字典序第k小的数字 给定整数 n 和 k,找到 1 到 n 中字典序第 k 小的数字. 注意:1 ≤ k ≤ n ≤ 109. 示例 : 输入: n: 13 k: 2 输出: 10 解释: 字典序的排 ...

  10. Educational Codeforces Round 11——A. Co-prime Array(map+vector)

    A. Co-prime Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...