text/x-jquery-tmpl做分页查询
页面原型:
数据格式:
{
"pageindex" : 1, 默认第一页
"pagesize" : 10,每页显示条数记录
"count" : 12,总条数
"total" : 2,总页数
"currentPage" : 1,当前页面码
"list" : [
{
"id" : 398,
"borrower_id" : 2013,
"borrower_name" : "张奇456",
"borrower_tel" : "15295430396",
"order_no" : "190118101151104XjZL",
"amount" : 1.0,
"interest" : 0.0,
"days" : 0,
"total_sum" : 1.0,
"contract" : "190118101151101wovu",
"status" : 4,
"loan_distrib_status" : 0,
"fund_status" : null,
"create_time" : "2019-01-18 10:12:18.0",
"loan_timeout" : null,
"update_time" : null,
"notaryid" : null,
"status_desc" : "",
"capital_source" : 3,
"borrow_success_time" : "2018-07-20 15:13:00",
"refund_time" : null,
"buyGoods_Id" : 1,
"buyGood" : "油卡",
"buyGoodApply_time" : "2019-03-13 17:13:38.0",
"buyGood_Status_Id" : 65,
"buyGood_Status" : null,
"plate_num" : null,
"buyGood_order_no" : null
},
{
"id" : 399,
"borrower_id" : 2013,
"borrower_name" : "张奇456",
"borrower_tel" : "15295430396",
"order_no" : "190118101313116nzqd",
"amount" : 1.0,
"interest" : 0.0,
"days" : 0,
"total_sum" : 1.0,
"contract" : "19011810131383QlsV",
"status" : 4,
"loan_distrib_status" : 0,
"fund_status" : null,
"create_time" : "2019-01-18 10:13:39.0",
"loan_timeout" : null,
"update_time" : null,
"notaryid" : null,
"status_desc" : "",
"capital_source" : 3,
"borrow_success_time" : "2018-07-20 15:13:00",
"refund_time" : null,
"buyGoods_Id" : 1,
"buyGood" : "油卡",
"buyGoodApply_time" : "2019-03-13 17:13:39.0",
"buyGood_Status_Id" : 65,
"buyGood_Status" : null,
"plate_num" : null,
"buyGood_order_no" : null
}
],
"pre" : false, 是否有前一页
"next" : true, 是否有下一页
"whereSQL" : null,
"resultCode" : null, 结果
"success" : false 是否成功
} 前端:
编号
借款单号
客户姓名
<%--
车牌号
--%>
借款时间
借款金额
借款天数
利息
应还剩余天数
电话
操作
页面加载触发
script中的触发时间都写在function中
$(function() {
commitAjax( {
'url' : getDataUrl(),
'param' : getQueryCondition()
});
$("#records-tbody").delegate(
".cancled-btn",
"click",
function() {
var id = $(this).parent().siblings(".col-id").html()
$.ajax( {
type : "POST",
url : basePath + "loanReceiv/checkLoanCancledById",
data : {
'loan_id' : id
},
dataType : "json",
success : function(data) {
$(".list-page-wrap,.detail-page-wrap").hide();
$("#brw_name").html(data.borrower_name);
$("#brw_amount").html("￥ " + data.loan_amount);
$("#cl_amount").html("￥ " + data.amount);
$("#cl_total").html("￥ " + data.total);
$("#cl_operator").html(data.operator);
$("#cl_remarks").html(data.remarks);
$("#cl_create_time")
.html(
((new Date(data.create_time))
.toLocaleString()));//.replace(/'\'/g,'-')));
$(".edit-page-wrap").show();
$(".edit-page-wrap").find(".cust-cancle-info").show();
$(".edit-page-wrap").find(".cust-form").hide();
},
error : function(data) {
alert("获取数据异常！！！");
}
});
});
$("#records-tbody").delegate(".cancle-btn", "click", function() {
$(".list-page-wrap,.detail-page-wrap").hide();
$(".edit-page-wrap").show();
$(".edit-page-wrap").find(".cust-cancle-info").hide();
$(".edit-page-wrap").find(".cust-form").show();
var id = $(this).parent().siblings(".col-id").html();
$("#submit-cancle-btn").unbind('click').bind("click", function() {
var operator = $("#form_operator").val();
var remarks = $("#form_remarks").val();
if(remarks == null || remarks == ''){
alert("核销原因不能为空！")
return;
}
var loan_cancel = {
'loan_id' : id,
'operator' : operator,
'remarks' : remarks
};
$.ajax( {
type : "POST",
contentType : "application/json", //WebService 会返回Json类型
url : basePath + "loanReceiv/cancleLoanByIdNew",
data : JSON.stringify(loan_cancel),
dataType : "json",
success : function(data) {
if (data == 1) {
alert("核销成功");
$(".edit-page-wrap,.detail-page-wrap").hide();
$(".list-page-wrap").show();
commitAjax( {
'url' : getDataUrl(),
'param' : getQueryCondition()
});
}
},
error : function(data) {
alert("更新数据异常！！！");
}
});
});
});
/*详情*/
$("#records-tbody").delegate(".check-detail-btn", "click", function() {
var id = $(this).parent().siblings(".col-id").html();
$.ajax( {
type : "POST",
url : basePath + "loanReceiv/checkDetailByIdNew",
data : {
'loan_id' : id
},
dataType : "json",
success : function(data) {
$("#loan_tb_date").html(data.loan_tb_date);
$("#loan_tb_amount").html("￥" + data.loan_tb_amount);
$("#loan_usr_name").html(data.loan_usr_name);
$("#loan_usr_tel").html(data.loan_usr_tel);
if(null != data.loan_usr_guarantor && data.loan_usr_guarantor !="")
{
$("#loan_usr_guarantor").html(data.loan_usr_guarantor);
}
else
{
$("#loan_usr_guarantor").html("无");
}
$("#loan_usr_guarcomp").html(data.loan_usr_guarcomp);
$("#loan_usr_addr").html(data.loan_usr_addr);
$("#cars-tbody").html("");
$("#carsData").tmpl(data.list).appendTo("#cars-tbody");
var car_num = 0, car_worth = 0.00;
$(".col-price-now").each(function() {
car_num += 1;
car_worth += parseFloat($(this).html());
});
$("#loan_car_num").html(car_num);
$("#loan_car_worth").html(car_worth);
$(".detail-page-wrap").show();
$(".list-page-wrap,.edit-page-wrap").hide();
},
error : function(data) {
alert("获取数据异常！！！");
}
});
});
$("#export-btn").click(
function() {
var p0 = isEmpty(dateObj) ? ''
: (dateObj.startDate);
p0 = '?start_date=' + p0;
var p1 = isEmpty(dateObj) ? ''
: (dateObj.endDate);
p1 = '&end_date=' + p1;
var param = p0 + p1;
param += '&license_plate=' + encodeURI(encodeURI( $("#license_plate").val() ))
+ '&borrower_name=' +encodeURI(encodeURI( $("#borrower_name").val() ))
+ '&amount=' + $("#borrower_amount").val() + '&status='
+ $("#cancle_status").val() + '&left_days='
+ $("#brw_left_days").val()+'&capital_source='+$("#customer_capital_source").val();
window.location.href = basePath
+ "loanReceiv/exportLoanReceivByMapNew" + param;
});
});后台控制器
function getDataUrl() {
return basePath + "loanReceiv/queryLoanReceivByMapNew";
}获取页面数据
function getQueryCondition() {
return {
'currentPage' : currentPage,
'start_date' : isEmpty(dateObj) ? "" : dateObj.startDate ,
'end_date' : isEmpty(dateObj) ? "" : dateObj.endDate ,
'left_days' : $("#brw_left_days").val(),//应还剩余天数
'license_plate' : $("#license_plate").val(),
'borrower_name' : $("#borrower_name").val(),
'amount' : $("#borrower_amount").val(),
'order_no' : $("#borrower_order_no").val(),
'status' : $("#cancle_status").val(),
'capital_source' : $("#customer_capital_source").val()
};
}loan.js(实现分页的js)
引入写好的额js
$(function(){
$(".back-list-btn").click(function(){
$(".detail-page-wrap").hide();
$(".edit-page-wrap").hide();
$(".list-page-wrap").show();
});
$("#search-btn").click(function(){
currentPage = 1;
if(verifyParameterNormal())
{
commitAjax({
'url':getDataUrl(),
'param':getQueryCondition()
});
};
});
$("#refresh-btn").click(function(){
currentPage = 1;
commitAjax({
'url':getDataUrl(),
'param':getQueryEmptyCondition()
});
});
$("#records-pagi").delegate("a","click",function(){
var pageNum = parseInt($("#currentPage").html());
if($(this).hasClass("pre")){
pageNum -=1;
}else if($(this).hasClass("next")){
pageNum +=1;
}else if($(this).hasClass("lastNum")){
pageNum = $("#total").html();
}else if($(this).hasClass("topage")){
pageNum = $("#go").val();
}
currentPage = pageNum;
commitAjax({
'url':getDataUrl(),
'param':getQueryCondition()
});
});
createDatePicker();
createDatePicker2();
});
var dateObj;
function createDatePicker(){
if(typeof(pickerDateRange)!='undefined'){
var dateRange = new pickerDateRange('date_demo', {
aRecent7Days : 'aRecent7DaysDemo', //最近7天
isTodayValid : true,
//startDate : '2013-04-14',
//endDate : '2013-04-21',
//needCompare : true,
//isSingleDay : true,
//shortOpr : true,
defaultText : ' 至 ',
inputTrigger : 'input_trigger_demo',
theme : 'ta',
success : function(obj) {
dateObj=obj;
$("#aRecent7DaysDemo").html(obj.startDate + ' 至 ' + obj.endDate);
}
});
}
}
var dateObj2;
function createDatePicker2(){
if(typeof(pickerDateRange)!='undefined'){
var dateRange2 = new pickerDateRange('date_demo2', {
aRecent7Days : 'aRecent7DaysDemo2', //最近7天
isTodayValid : true,
//startDate : '2013-04-14',
//endDate : '2013-04-21',
//needCompare : true,
//isSingleDay : true,
//shortOpr : true,
defaultText : ' 至 ',
inputTrigger : 'input_trigger_demo2',
theme : 'ta',
success : function(obj2) {
dateObj2=obj2;
$("#aRecent7DaysDemo2").html(obj2.startDate + ' 至 ' + obj2.endDate);
}
});
}
}
var currentPage = 1;
function commitAjax(data,callback){
$.ajax({
type:"POST",
url:data.url,
data:data.param,
dataType:"json",
success:function(data){
setRecordsData(data.list);
setRecordsPagi(data);
if(callback!= undefined)
callback(data.resultCode);
},
error:function(data){
alert("获取数据异常！！！");
}
});
}
function setRecordsData(data){
$("#records-tbody").html("");
if(data==null||data==undefined||data==""){
$("#records-tbody").html("没有查到记录");
}else
$("#recordsData").tmpl(data).appendTo("#records-tbody");
}
function setRecordsPagi(data){
$("#records-pagi").html("");
$("#recordsPagi").tmpl(data).appendTo("#records-pagi");
}
function isEmpty(val){
return val==null||val=='undefined'||val=='';
}
复选框(此js在页面中的)
//checkbox 全选/取消全选
var isCheckAll = false;
function swapCheck()
{
if (isCheckAll)
{
$("input[type='checkbox']").each(function()
{
this.checked = false;
});
isCheckAll = false;
} else {
$("input[type='checkbox']").each(function()
{
this.checked = true;
});
isCheckAll = true;
}
countNum(this);//表格求和
}
/*表格求和*/
function countNum(e)
{
var tab=document.getElementById("yszkcxtable");
var subBox=document.getElementsByName("subBox");
var sumStr0 = 0;
var sumStr1 = 0;
for(var j=0;j ============================================================================================
后台数据
sql
控制器:
/**
* 根据查询条件查询借款信息列表
* @param currentPage 分页
* @param start_date 日期
* @param end_date 结束
* @param left_days 余下天数
* @param license_plate 车牌
* @param borrower_name 借款人
* @param amount 金额
* @param status 状态
* @param capital_source 资金来源
* @param request 请求
* @return 结果
*/
@RequestMapping("/queryLoanReceivByMapNew")
@ResponseBody
PageBean queryLoanReceivByMapNew(
@RequestParam("currentPage") Integer currentPage,
@RequestParam("start_date") String start_date,
@RequestParam("end_date") String end_date,
@RequestParam("left_days") String left_days,
@RequestParam("license_plate") String license_plate,
@RequestParam("borrower_name") String borrower_name,
@RequestParam("amount") Double amount,
@RequestParam("order_no") String order_no,
@RequestParam("status") String status,
@RequestParam("capital_source") Integer capital_source,
HttpServletRequest request)
{
Map queryMap = new HashMap();
queryMap.put("currentPage", currentPage);//当前第几页
if(start_date == null || "".equals(start_date)){
queryMap.put("start_date", start_date);
queryMap.put("end_date", end_date);
}else{
queryMap.put("start_date", start_date+" 00:00:00");
if(end_date==null || "".equals(end_date)){
queryMap.put("end_date", start_date+" 23:59:59");
}else{
queryMap.put("end_date", end_date+" 23:59:59");
}
}
/*
* 应还剩余天数转换为已借款天数 deadline-days=left_day<=day day>=deadline-days
* days>=deadline-day days>=days_limit
*
*/
Integer day = left_days != null && !left_days.equals("")
? Integer.valueOf(left_days) : null;
queryMap.put("days_limit", day == null ? null
: Integer.valueOf(
BatchNumber.getValue(OilConstant.REPAY_DEADLINE))
- day);
queryMap.put("license_plate", license_plate != null?license_plate.trim():null);
queryMap.put("borrower_name", borrower_name != null?borrower_name.trim():null);
queryMap.put("amount", amount != null?amount:null);
//添加借款单号
queryMap.put("order_no", order_no != null?order_no.trim():null);
queryMap.put("status", status != null?status.trim():null);
queryMap.put("capital_source", capital_source != null?capital_source:null);
String startTime = DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss");
PageBean loanBean = null;
try
{
loanBean = service.queryLoanReceivByMapNew(queryMap);
BaseController.saveLog(
SecurityUtils.getSubject().getPrincipals().toString(),
startTime, DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"),
BaseController.getRequestIp(request), "贷款管理", "应收账款查询", 1,
1, "");
}
catch (Exception e)
{
BaseController.saveLog(
SecurityUtils.getSubject().getPrincipals().toString(),
startTime, DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss"),
BaseController.getRequestIp(request), "贷款管理", "应收账款查询", 0,
1, "");
}
return loanBean;
}
service方法:
/**
* 应收账款查询
*/
@Override
public PageBean queryLoanReceivByMapNew(
Map queryMap)
{
PageBean pageBean = new PageBean();
Integer currentPage = Integer.valueOf(queryMap.get("currentPage")
.toString());//当前第几页
//Pagesize 每页显示的记录条数 (pageBean中默认10,可自己改)
//currentPages当前页码
Integer currentPages = (currentPage - 1) * pageBean.getPagesize();
queryMap.put("count", currentPages);
queryMap.put("pagenumber", pageBean.getPagesize());
List ltList = loandao.queryLoanReceivByMapNew(queryMap);
pageBean.setList(ltList);
//总条数
pageBean.setCount(loandao.queryLoanReceivCountByMapNew(queryMap));
//currentPage当前页码
pageBean.setCurrentPage(currentPage);
return pageBean;
} PageBeanpackage com.tcwl.vsmp.utils;
import java.util.ArrayList;
import java.util.List;
/**
* 分页
* @author ChenLei
*
* @param
*/
public class PageBean
{
/**
* 默认第一页
*/
private Integer pageindex = 1;
/**
* 默认每页十条记录
*/
private Integer pagesize = 10;
/**
* // 总记录数
总条数
*/
private Integer count;
/**
* // 总页数
*/
private Integer total;
/**
* // 当前页码
*/
private Integer currentPage;
/**
* // 对象集合
*/
private List list = new ArrayList();
/**
* 是否有前一页
*/
private boolean pre;
/**
* 是否有下一页
*/
private boolean next;
/**
* sql
*/
private String whereSQL;
/**
* 结果
*/
private Integer resultCode;
/**
* 是否成功
*/
private boolean success;
public Integer getResultCode()
{
return resultCode;
}
public void setResultCode(Integer resultCode)
{
this.resultCode = resultCode;
}
public boolean isSuccess()
{
return success;
}
public void setSuccess(boolean success)
{
this.success = success;
}
public String getWhereSQL()
{
return whereSQL;
}
public void setWhereSQL(String whereSQL)
{
this.whereSQL = whereSQL;
}
public Integer getCurrentPage()
{
return currentPage;
}
public void setCurrentPage(Integer currentPage)
{
this.currentPage = currentPage;
}
public List getList()
{
return list;
}
public void setList(List list)
{
this.list = list;
}
public Integer getPageindex()
{
return pageindex;
}
public void setPageindex(Integer pageindex)
{
this.pageindex = pageindex;
}
public Integer getPagesize()
{
return pagesize;
}
public void setPagesize(Integer pagesize)
{
this.pagesize = pagesize;
}
public Integer getCount()
{
return count;
}
public void setCount(Integer count)
{
this.count = count;
}
/**
* 得到总页数
* @return 结果
*/
public Integer getTotal()
{
total = (count % pagesize == 0) ? (count / pagesize)
: (count / pagesize + 1);
return total;
}
public void setTotal(Integer total)
{
this.total = total;
}
/**
* 返回是否有前一页
* @return 结果
*/
public boolean isPre()
{
pre = (pageindex > 1) ? true : false;
return pre;
}
public void setPre(boolean pre)
{
this.pre = pre;
}
/**
* 是否有下一页
* @return 结果
*/
public boolean isNext()
{
next = (pageindex < this.getTotal()) ? true : false;
return next;
}
public void setNext(boolean next)
{
this.next = next;
}
}
链接：https://pan.baidu.com/s/10Mzl4AyAXAhrJLR14-4Kkg
提取码：dr0l
==================================================================================
完整页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
坦程物联
编号
借款单号
客户姓名
<%--
车牌号
--%>
借款时间
借款金额
借款天数
利息
应还剩余天数
电话
操作
张三丰当前授信额度：10000.00
欠款金额：￥10000.00
总欠款金额：￥10500.00
操作人：裴总
核销原因：无法收回欠款
核销时间：2016-12-30 11:50:32
借款时间：2016-12-30 11:50:32
借款金额：￥10000.00
借款人：张三丰
电话：18965236514
担保人：金毛狮王
挂靠公司：武当押运公司
地址：湖北十堰丹江口市武当山
抵押车辆信息：
车辆总数 2 辆，车辆总价 90万
序号
车牌号
车辆类型
车架号
期限/年月
车辆单价
折合后车辆单价
GPS
PageController
package com.tc.lvmsm.controller.cm;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* Project Name: 液化天然气车用气瓶智慧监测系统
*
*
*
* FileName: PageController
* Author: 苏凯
* Date: 2018/2/10 14:25
* Description: 页面跳转
*
* @version 1.0.0
* @since: 1.0.0
* Copyright (C), 2015-2018, 坦程物联网有限公司
*/
@Controller
public class PageController
{
/**
* Description: 页面跳转（传入页面url通过controller跳转到该页面url）
*
* @param pageName (页面名字)
* @return "cm/" + pageName
*/
@RequestMapping("cm/{pageName}")
public String showCmPage(@PathVariable String pageName)
{
return "cm/" + pageName;
}
/**
* Description: 页面跳转（传入页面url通过controller跳转到该页面url）
*
* @param pageName (页面名字)
* @return "gm/" + pageName
*/
@RequestMapping("gm/{pageName}")
public String showGmPage(@PathVariable String pageName)
{
return "gm/" + pageName;
}
}