text/x-jquery-tmpl做分页查询
2024-06-06 02:22:34
页面原型:
数据格式:
{"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 src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><div class="table-wrap"><table class="am-table am-table-striped am-table-hover table-main"style="background-color: #ffffff" id="yszkcxtable"><thead><tr class="am-primary "><th class="table-check"><input type="checkbox" onclick="swapCheck()" /></th><th>编号</th><th>借款单号</th><th>客户姓名</th><%--<th>车牌号</th>--%><th>借款时间</th><th>借款金额</th><th>借款天数</th><th>利息</th><th>应还剩余天数</th><th>电话</th><th>操作</th></tr></thead><tbody id="records-tbody"><!-- <tr><td class="table-check"><input name="subBox" type="checkbox"></td><td>1</td><td>TCD2016012319028</td><td>张三丰</td><td>2016-11-15</td><td>￥10000.00</td><td>5天</td><td>35天</td><td>15896325869</td><td><a href="javascript:void(0);" class="am-btn am-btn-danger write-off-btn"><span class="am-icon-archive"></span> 核销 </a><a href="javascript:void(0);" class="am-btn am-btn-primary check-detail-btn"><span class="am-icon-eye"></span> 详情 </a></td></tr><tr><td class="table-check"><input name="subBox" type="checkbox"></td><td>2</td><td>TCD2016012319028</td><td>张三丰</td><td>2016-11-15</td><td>￥10000.00</td><td>5天</td><td>35天</td><td>15896325869</td><td><a href="javascript:void(0);" class="am-btn am-btn-default written-off-btn"> 已核销 </a><a href="javascript:void(0);" class="am-btn am-btn-primary check-detail-btn"><span class="am-icon-eye"></span> 详情 </a></td></tr>--></tbody><tfoot><tr><th></th><th></th><th></th><th></th><th></th><th id="sum_amount"></th><th></th><th id="sum_interest"></th><th></th><th></th><th></th></tr></tfoot></table><div class="am-align-right table-pagi" id="records-pagi"><!-- <ul class="am-pagination"><span>共有<span class="goodscount" id="count" style="color:red">5</span>条数据,共<span id="total" class="goodstotal" style="color:red">1</span>页,当前第<span id="currentPage" class="goodsnoenum" style="color:red">1</span>页</span><li><a id="pre" href="javascript:;" class="pre" >« 上一页</a></li><li><a id="next" href="javascript:;" class="next" >下一页 »</a></li><li><a class="topage" href="javascript:;" >跳转至</a></li><li><input id="go" type="text" class="am-text-sm am-form-field go" style="width:50px;height:35px;padding:0.5em 1em;"> </li><li><a href="javascript:;" class="lastNum" >尾页 </a></li></ul> --></div></div></script><script id="recordsData" type="text/x-jquery-tmpl">
<tr><td class="table-check"><input name="subBox" type="checkbox" onclick='countNum(this);'></td><td class="col-id">{{= id}}</td><td>{{= order_no}}</td><td>{{= borrower_name}}</td><%--<td>{{= plate_num}}</td>--%><td>{{= create_time.substring(0,create_time.length-2)}}</td><td>￥{{= amount}}</td> <td>{{= days}}天</td><td>{{= interest}}</td><td>{{= 45-days}}天</td><td>{{= borrower_tel}}</td> <td>{{if status==8}}<a href="javascript:void(0);" class="am-btn am-btn-default cancled-btn"> 已核销 </a>{{else status==7}}<a href="javascript:void(0);" class="am-btn am-btn-default cancled-btn"> 已还款 </a>{{else}}<a href="javascript:void(0);" class="am-btn am-btn-danger cancle-btn"><span class="am-icon-archive"></span> 核销 </a>{{/if}}<a href="javascript:void(0);" class="am-btn am-btn-primary check-detail-btn"><span class="am-icon-eye"></span> 详情 </a></td>
</tr>
</script><script id="recordsPagi" type="text/x-jquery-tmpl">
<ul class="am-pagination"><span>共有<span class="goodscount" id="count" style="color:red">{{= count}}</span>条数据,共<span id="total" class="goodstotal" style="color:red">{{= total}}</span>页,当前第<span id="currentPage" class="goodsnoenum" style="color:red">{{= currentPage}}</span>页</span>{{if currentPage>1}} <li><a id="pre" href="javascript:;" class="pre" onclick="btnClick()">« 上一页</a></li>{{/if}}{{if currentPage<total}} <li><a id="next" href="javascript:;" class="next" onclick="btnClick()">下一页 »</a></li>{{/if}}<li><a class="topage" href="javascript:;" onclick="btnClick()">跳转至</a></li><li><input id="go" type="text" class="am-text-sm am-form-field go" style="width:50px;height:35px;padding:0.5em 1em;"> </li><li><a href="javascript:;" class="lastNum" onclick="btnClick()">尾页 </a></li></ul>
</script>
页面加载触发
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
<script src="/tc_vsmp/view/assets/js/loan/loan.js">
</script>$(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 <subBox.length;j++){if(document.getElementsByName("subBox")[j].checked){var num = parseInt(tab.rows[j+1].cells[5].innerText.replace("￥",""));sumStr0 = parseInt(sumStr0) + num;var num1 = tab.rows[j+1].cells[7].innerHTML;sumStr1 = ( parseInt( parseFloat(num1)*1000000 ) + parseInt( parseFloat(sumStr1)*1000000 ) ) / 1000000}}sum_amount.innerHTML ="金额总计："+sumStr0; sum_interest.innerHTML ="利息总计："+sumStr1;
}============================================================================================
后台数据
sql
<select id="queryLoanReceivByMapNew" parameterType="map"resultMap="LoanResult">SELECT* FROM(SELECTloan.id,cti.customer_nameborrower_name,loan.order_no,loan.amount,loan.interest,loan.days,loan.total_sum,loan.contract,loan.create_time,loan.status,loan.borrower_id ,loan.buyGoods_Id,loan.buyGoodApply_time,loan.buyGood_Status_Id,loan.borrower_tel, loan. borrow_success_time, lat.capital_sourceFROMloan_table loan , mortgage_borrower lbi , customerinfocti,loan_apply_table latwherelbi. id = loan.borrower_idandlbi.customer_id = lat.customer_idand cti.customer_Id = lbi.customer_idandlat.capital_source = '3')loan/*LEFT join mortgage_car cars on (loan.borrower_id =cars.borrower_id) and loan.status != 7*/<where>loan.status > 3<!--车牌号--><if test="license_plate!=null and license_plate!=''">and cars.plate_num=#{license_plate}</if><if test="borrower_name!=null and borrower_name!=''">and loan.borrower_name LikeCONCAT('%',#{borrower_name},'%')</if><if test="start_date!=null and start_date !=''">and loan.create_time between #{start_date} and#{end_date}</if><if test="order_no!=null and order_no!=''">and loan.order_no = #{order_no}</if><if test="days_limit!=null">and loan.days > #{days_limit}</if><if test="amount!=null">and loan.amount = #{amount}</if><if test="status !=null and status==1">and ( loan.status = 8 or loan.status = 7 )</if><if test="status !=null and status==0">and loan.status not in ( 8,7)</if><if test=" capital_source!=null ">and loan.capital_source = #{capital_source}</if></where><if test="status == -1">Order by field(loan.status,7,8) asc</if>LIMIT #{count},#{pagenumber}</select>控制器:
/*** 根据查询条件查询借款信息列表* @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")@ResponseBodyPageBean<LoanTable> 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<String, Object> queryMap = new HashMap<String, Object>();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<LoanTable> 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方法:
/*** 应收账款查询*/@Overridepublic PageBean<LoanTable> queryLoanReceivByMapNew(Map<String, Object> queryMap){PageBean<LoanTable> pageBean = new PageBean<LoanTable>();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<LoanTable> ltList = loandao.queryLoanReceivByMapNew(queryMap);pageBean.setList(ltList);//总条数pageBean.setCount(loandao.queryLoanReceivCountByMapNew(queryMap));//currentPage当前页码pageBean.setCurrentPage(currentPage);return pageBean;}PageBean<T>package com.tcwl.vsmp.utils;import java.util.ArrayList;
import java.util.List;/*** 分页* @author ChenLei** @param <T>*/public class PageBean<T>
{/*** 默认第一页*/private Integer pageindex = 1;/*** 默认每页十条记录*/private Integer pagesize = 10;/*** // 总记录数总条数*/private Integer count;/*** // 总页数 */private Integer total;/*** // 当前页码*/private Integer currentPage;/*** // 对象集合 */private List<T> list = new ArrayList<T>();/*** 是否有前一页*/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<T> getList(){return list;}public void setList(List<T> 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 + "/";
%>
<!doctype html>
<html class="no-js"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>坦程物联</title><meta name="description" content="坦程物联"><meta name="keywords" content="index"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><meta http-equiv="Cache-Control" content="no-siteapp" /><link rel="icon" type="image/png"href="/tc_vsmp/view/assets/i/logo.png"><link rel="apple-touch-icon-precomposed" href="/assets/i/logo.png"><meta name="apple-mobile-web-app-title" content="坦程物联" /><link rel="stylesheet"href="/tc_vsmp/view/assets/css/utils/amazeui.min.css" /><link rel="stylesheet" href="/tc_vsmp/view/assets/css/utils/admin.css"><link rel="stylesheet"href="/tc_vsmp/view/assets/css/utils/dateRange.css" /><link rel="stylesheet" href="/tc_vsmp/view/assets/css/utils/loan.css"></head><body><!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>以获得更好的体验！</p>
<![endif]--><jsp:include page="../common/top.jsp"></jsp:include><div class="am-cf admin-main"><!-- sidebar start --><jsp:include page="../common/menu.jsp"></jsp:include></div><!-- sidebar end --><!-- content start --><div class="admin-content" style="padding-right: 50px;"><div class="am-cf am-padding"><div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">贷款管理</strong> /<small>应收账款查询</small></div></div><hr><div class="list-page-wrap"><div class="search-form-wrap"><form class="am-form-inline" role="form"><input type="hidden" id="customer_capital_source" value=""class="am-form-field spname"><input type="hidden" id="brw_left_days" value=""class="am-form-field spname"><div class="search-box"><span class="am-form-name">借款时间：</span><a href="javascript:void(0);" id="aRecent7DaysDemo">最近七天</a><divstyle="clear: both !important; display: inline-block; vertical-align: middle;"><div class="ta_date" id="div_date_demo"><span class="date_title" id="date_demo"></span><a class="opt_sel" id="input_trigger_demo" href="#"> </a></div></div><span class="am-form-name">借款单号：</span><div class="am-form-group am-form-icon"><input type="text" id="borrower_order_no" value=""class="am-form-field spname"></div><%--<span class="am-form-name">车牌号：</span>--%><div class="am-form-group am-form-icon"><input type="hidden" id="license_plate" value=""class="am-form-field spname"></div><span class="am-form-name">客户姓名：</span><div class="am-form-group am-form-icon"><i class="am-icon-pencil"></i><input type="text" id="borrower_name" value=""class="am-form-field spname" placeholder="支持模糊查询"></div></div><div class="search-box"><span class="am-form-name">金额：</span><div class="am-form-group am-form-icon"><input type="text" id="borrower_amount" value=""class="am-form-field spname"></div><span class="am-form-name">核销状态：</span><div class="am-form-group am-form-icon am-select"><select data-am-selected id="cancle_status"><option value="-1">请选择</option><option value="0">否</option><option value="1">是</option></select></div><button type="button" id="search-btn"class="am-btn am-btn-success am-radius">查询</button><button type="button" id="export-btn"class="am-btn am-btn-success am-radius am-export">EXCEL导出</button></div></form></div><div class="table-wrap"><table class="am-table am-table-striped am-table-hover table-main"style="background-color: #ffffff" id="yszkcxtable"><thead><tr class="am-primary "><th class="table-check"><input type="checkbox" onclick="swapCheck()" /></th><th>编号</th><th>借款单号</th><th>客户姓名</th><%--<th>车牌号</th>--%><th>借款时间</th><th>借款金额</th><th>借款天数</th><th>利息</th><th>应还剩余天数</th><th>电话</th><th>操作</th></tr></thead><tbody id="records-tbody"><!-- <tr><td class="table-check"><input name="subBox" type="checkbox"></td><td>1</td><td>TCD2016012319028</td><td>张三丰</td><td>2016-11-15</td><td>￥10000.00</td><td>5天</td><td>35天</td><td>15896325869</td><td><a href="javascript:void(0);" class="am-btn am-btn-danger write-off-btn"><span class="am-icon-archive"></span> 核销 </a><a href="javascript:void(0);" class="am-btn am-btn-primary check-detail-btn"><span class="am-icon-eye"></span> 详情 </a></td></tr><tr><td class="table-check"><input name="subBox" type="checkbox"></td><td>2</td><td>TCD2016012319028</td><td>张三丰</td><td>2016-11-15</td><td>￥10000.00</td><td>5天</td><td>35天</td><td>15896325869</td><td><a href="javascript:void(0);" class="am-btn am-btn-default written-off-btn"> 已核销 </a><a href="javascript:void(0);" class="am-btn am-btn-primary check-detail-btn"><span class="am-icon-eye"></span> 详情 </a></td></tr>--></tbody><tfoot><tr><th></th><th></th><th></th><th></th><th></th><th id="sum_amount"></th><th></th><th id="sum_interest"></th><th></th><th></th><th></th></tr></tfoot></table><div class="am-align-right table-pagi" id="records-pagi"><!-- <ul class="am-pagination"><span>共有<span class="goodscount" id="count" style="color:red">5</span>条数据,共<span id="total" class="goodstotal" style="color:red">1</span>页,当前第<span id="currentPage" class="goodsnoenum" style="color:red">1</span>页</span><li><a id="pre" href="javascript:;" class="pre" >« 上一页</a></li><li><a id="next" href="javascript:;" class="next" >下一页 »</a></li><li><a class="topage" href="javascript:;" >跳转至</a></li><li><input id="go" type="text" class="am-text-sm am-form-field go" style="width:50px;height:35px;padding:0.5em 1em;"> </li><li><a href="javascript:;" class="lastNum" >尾页 </a></li></ul> --></div></div></div><div class="edit-page-wrap"><div class="cust-loan"><span class="cust-label" id="brw_name">张三丰</span><spanclass='cust-value'>当前授信额度：<b id="brw_amount">10000.00</b> </span></div><form class="am-form cust-form"><fieldset><div class="am-form-group"><label for="">操作人：</label><input id="form_operator" type="text" value='${loginUser}'readonly></div><div class="am-form-group"><label for="">核销原因：</label><input id="form_remarks" type="text" placeholder="输入核销原因"></div></fieldset><div class="btn-group"><button type="button" class="am-btn am-btn-primary am-radius"id="submit-cancle-btn">保存</button><button type="button"class="am-btn am-btn-default am-radius back-list-btn">返回</button></div></form><div class="cust-cancle-info"><div class="cust-info"><span class="cust-label">欠款金额：</span><span class='cust-value'id="cl_amount">￥10000.00</span></div><div class="cust-info"><span class="cust-label">总欠款金额：</span><span class='cust-value'id="cl_total">￥10500.00</span></div><div class="cust-info"><span class="cust-label">操作人：</span><span class='cust-value'id="cl_operator">裴总</span></div><div class="cust-info"><span class="cust-label">核销原因：</span><span class='cust-value'id="cl_remarks">无法收回欠款</span></div><div class="cust-info"><span class="cust-label">核销时间：</span><span class='cust-value'id="cl_create_time">2016-12-30 11:50:32</span></div><div class="btn-group"><button type="button"class="am-btn am-btn-default am-radius back-list-btn">返回</button></div></div></div><div class="detail-page-wrap"><div class="cust-info"><span class="cust-label">借款时间：</span><span class='cust-value'id="loan_tb_date">2016-12-30 11:50:32</span></div><div class="cust-info"><span class="cust-label">借款金额：</span><span class='cust-value'id="loan_tb_amount">￥10000.00</span></div><div class="cust-info"><span class="cust-label">借款人：</span><span class='cust-value'id="loan_usr_name">张三丰</span></div><div class="cust-info"><span class="cust-label">电话：</span><span class='cust-value'id="loan_usr_tel">18965236514</span></div><div class="cust-info"><span class="cust-label">担保人：</span><span class='cust-value'id="loan_usr_guarantor">金毛狮王</span></div><div class="cust-info"><span class="cust-label">挂靠公司：</span><span class='cust-value'id="loan_usr_guarcomp">武当押运公司</span></div><div class="cust-info"><span class="cust-label">地址：</span><span class='cust-value'id="loan_usr_addr">湖北十堰丹江口市武当山</span></div><div class="cust-info"><span class="cust-label">抵押车辆信息：</span><span class='cust-value'>车辆总数 <b id="loan_car_num">2</b> 辆，车辆总价 <bid="loan_car_worth">90万</b> </span><table class="am-table am-table-striped am-table-hover table-main"><thead><tr class="am-primary "><th>序号</th><th>车牌号</th><th>车辆类型</th><th>车架号</th><th>期限/年月</th><th>车辆单价</th><th>折合后车辆单价</th><th>GPS</th></tr></thead><tbody id="cars-tbody"><!-- <tr><td>1</td><td>YH90872</td><td>载货汽车</td><td>WDBGP57B6PB127810</td><td>2017-09</td><td>48万</td><td>45万</td><td>141303812354</td></tr><tr><td>2</td><td>YH90872</td><td>载货汽车</td><td>WDBGP57B6PB127810</td><td>2017-09</td><td>48万</td><td>45万</td><td>141303812354</td></tr> --></tbody></table></div><div class="btn-group"><button type="button"class="am-btn am-btn-default am-radius back-list-btn">返回</button></div></div></div><footer class="am-footer am-topbar-fixed-bottom"style="margin:0 0 0 15em "><p class=" ">© 2016 Wuxi Tancheng IOT Co., Ltd.</p></footer><script id="carsData" type="text/x-jquery-tmpl">
<tr><td>{{= id}}</td><td>{{= plate_num}}</td><td>{{= type}}</td><td>{{= frame_num}}</td><td>{{= time_limit}}</td><td class="col-price">{{= price}}</td><td class="col-price-now">{{= now_price}}</td><td>{{= gps}}</td>
</tr>
</script><script id="recordsData" type="text/x-jquery-tmpl">
<tr><td class="table-check"><input name="subBox" type="checkbox" onclick='countNum(this);'></td><td class="col-id">{{= id}}</td><td>{{= order_no}}</td><td>{{= borrower_name}}</td><%--<td>{{= plate_num}}</td>--%><td>{{= create_time.substring(0,create_time.length-2)}}</td><td>￥{{= amount}}</td> <td>{{= days}}天</td><td>{{= interest}}</td><td>{{= 45-days}}天</td><td>{{= borrower_tel}}</td> <td>{{if status==8}}<a href="javascript:void(0);" class="am-btn am-btn-default cancled-btn"> 已核销 </a>{{else status==7}}<a href="javascript:void(0);" class="am-btn am-btn-default cancled-btn"> 已还款 </a>{{else}}<a href="javascript:void(0);" class="am-btn am-btn-danger cancle-btn"><span class="am-icon-archive"></span> 核销 </a>{{/if}}<a href="javascript:void(0);" class="am-btn am-btn-primary check-detail-btn"><span class="am-icon-eye"></span> 详情 </a></td>
</tr>
</script><script id="recordsPagi" type="text/x-jquery-tmpl">
<ul class="am-pagination"><span>共有<span class="goodscount" id="count" style="color:red">{{= count}}</span>条数据,共<span id="total" class="goodstotal" style="color:red">{{= total}}</span>页,当前第<span id="currentPage" class="goodsnoenum" style="color:red">{{= currentPage}}</span>页</span>{{if currentPage>1}} <li><a id="pre" href="javascript:;" class="pre" onclick="btnClick()">« 上一页</a></li>{{/if}}{{if currentPage<total}} <li><a id="next" href="javascript:;" class="next" onclick="btnClick()">下一页 »</a></li>{{/if}}<li><a class="topage" href="javascript:;" onclick="btnClick()">跳转至</a></li><li><input id="go" type="text" class="am-text-sm am-form-field go" style="width:50px;height:35px;padding:0.5em 1em;"> </li><li><a href="javascript:;" class="lastNum" onclick="btnClick()">尾页 </a></li></ul>
</script><!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/utils/amazeui.ie8polyfill.min.js"></script><![endif]--><!--[if (gte IE 9)|!(IE)]><!--><script src="/tc_vsmp/view/assets/js/utils/jquery.min.js">
</script><!--<![endif]--><script src="/tc_vsmp/view/assets/js/utils/amazeui.min.js">
</script><script src="/tc_vsmp/view/assets/js/utils/app.js">
</script><script src="/tc_vsmp/view/assets/js/utils/dateRange.js">
</script><script src="/tc_vsmp/view/assets/js/loan/jquery.tmpl.js">
</script><script src="/tc_vsmp/view/assets/js/loan/loan.js">
</script><script>
var basePath = '<%=basePath%>';
$(document).ready(function() {$("#collapse-nav3").addClass("am-in");$("#collapse-nav55").addClass("am-in");$(".loan").addClass("tc_active");$(".dkgl").addClass("pm_active");$(".admin-offcanvas-bar li a").each(function() {$this = $(this);if ($this[0].href == String(window.location)) {$this.addClass("cd_active");}});
});$(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()};
}//验证参数是否正确
function verifyParameterNormal() {
if (isNaN($("#brw_left_days").val())) { alert("请输入数字"); $("#brw_left_days").focus();return false;} if (isNaN($("#borrower_amount").val())) { alert("请输入数字"); $("#borrower_amount").focus();return false;} return true;
}/*表格求和*/
function countNum(e)
{/*var tab=document.getElementById("yszkcxtable");var subBox=document.getElementsByName("subBox");var sumStr0 = 0;var sumStr1 = 0;for(var j=0;j <subBox.length;j++){if(document.getElementsByName("subBox")[j].checked){var num = parseInt(tab.rows[j+1].cells[5].innerText.replace("￥",""));sumStr0 = parseInt(sumStr0) + num;var num1 = tab.rows[j+1].cells[7].innerHTML;sumStr1 = ( parseInt( parseFloat(num1)*1000000 ) + parseInt( parseFloat(sumStr1)*1000000 ) ) / 1000000}}sum_amount.innerHTML ="金额总计："+sumStr0; sum_interest.innerHTML ="利息总计："+sumStr1;*/
}
function btnClick()
{$("#sum_amount").empty();$("#sum_interest").empty();$(".subBox").attr("checked",false);
}//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);}</script></body>
</html>
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: 液化天然气车用气瓶智慧监测系统* <p>* <p>* <p>* 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;}
}
text/x-jquery-tmpl做分页查询相关推荐
- php ajax mysql 分页查询_PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
1.首先做主页面Ajax_pag.php 代码如下: Ajax做分页 .header{ margin-top: 20px; } 关键字: 地区代号地区名称父级代号 2.然后做分页查询JS页面Ajax_ ...
- MySQL分表后，如何做分页查询？
MySQL分表方式分为垂直分表和水平分表,这两种分表形式都比较简单,简单理解垂直分表指的是:表的记录并不多,但是字段却很长,表占用空间很大,检索表的时候需要执行大量的IO,严重降低了性能.这时需要把大 ...
- 用 as with ,和 ROW_NUMBER() 做分页查询
with mytable as (select * ,Row_Number() over (order by UserId asc) as Row from T_User ) //WITH ...
- （easyui datagrid+mvc+json）之asp.net分页查询
最近在做分页查询的功能,在网上也翻看了不少,但是自己的吸收能力就差了好多,而且当时最大的想法就是,怎么就没有我想要的那种,既是easyui的,又要用mvc的架构,还要能够实现底层的分页传值,用.net ...
- long mode 分页_在Spring Boot中使用Spring-data-jpa实现分页查询（转）
在我们平时的工作中,查询列表在我们的系统中基本随处可见,那么我们如何使用jpa进行多条件查询以及查询列表分页呢?下面我将介绍两种多条件查询方式. 1.引入起步依赖 org.springframewor ...
- mysql分页查询关键_MySQL优化教程之超大分页查询
背景 基本上只要是做后台开发,都会接触到分页这个需求或者功能吧.基本上大家都是会用MySQL的LIMIT来处理,而且我现在负责的项目也是这样写的.但是一旦数据量起来了,其实LIMIT的效率会极其的低, ...
- MySQL优化之超大分页查询
背景 基本上只要是做后台开发,都会接触到分页这个需求或者功能吧.基本上大家都是会用MySQL的LIMIT来处理,而且我现在负责的项目也是这样写的.但是一旦数据量起来了,其实LIMIT的效率会极其的低, ...
- 分库分表下分页查询解决方案
分库分表下分页查询解决方案 不管是随着业务量的增大.还是随着用户数量的增长,在单一表中无法承受大量大数据,导致查询速度极慢甚至拖垮数据库.所以分库分表的策略随之应用,但是如何在分库分表的情况下,进行分 ...
- mysql分页 redis_分页查询和redis
问题 我在做论坛的是时候遇到了如下的问题.论坛里可以有很多的主题topic,每个topic对应到很多回复reply.现在要查询某个topic下按照replyTime升序排列的第pageNo页的repl ...
最新文章
- 35. Search Insert Position
- MiniGUI细节处理（转）
- leetcode1277. 统计全为 1 的正方形子矩阵（dp）
- matlab平差程序设计,基于MATLAB的水准网平差程序设计与实现
- Java如何封装JDK_java7JDK的常用封装类型
- android系统 修改优化,修改Android系统源代码，优化开机速度。
- php实例化类的方法,在PHP中实例化类实例的不同方法
- ORA-00257:archiver error问题处理方法
- PPC WM5 输入法屏蔽插件
- DALSA相机开发记录（01）
- [html]window.open 使用示例
- 【数据集】机器学习数据集汇总（附下载地址）
- bootstrap模态框和select2合用时input无法获取焦点
- Echarts基本图表
- SQL server添加表和字段注释
- Connection closed prematurely
- 一招解决Maven项目中resource目录下的application.yml不能被识别（即没有小叶子）
- 什么邮箱最好用？主流邮箱品牌如何选择
- JavaScript内的类型转换
- 巴比特 | 元宇宙每日必读：广州南沙发布“元宇宙九条”措施，平台最高可获得2亿元资金支持...