x-jquery-tmpl代码示例,分页

jquery-tmpl 比较好用；具体是啥就百度吧，这里不做详细解释，直接上代码秒懂！

需要引用jquery.tmpl.js：

<script src="/tc_vsmp/view/assets/js/loan/jquery.tmpl.js"></script>

页面代码：

<tbody id="records-tbody">

 </tbody>

<div class="am-align-right table-pagi" id="records-pagi">

 </div>

        数据是通过ajax返回过来的data对象，数据类型 json数据

<script id="recordsData" type="text/x-jquery-tmpl">
<tr><td class="table-check"><input name="subBox" type="checkbox"></td>
 	<td class="col-id">{{if id}} {{= id}} {{else}} -- {{/if}}</td>
	<td>{{= customer_name}}</td>
	<td>{{if id}} {{= amount}} {{else}} -- {{/if}}</td>
	<td>{{if id}} {{= left_account}} {{else}} -- {{/if}}</td>
	<td>{{if id}} {{= ((new Date(credit_date)).toLocaleDateString().replace(/\//g,'-'))}}({{= credit_operator}}) 
		{{else}} -- 
		{{/if}}
	</td>
	<td>{{= salesman}}</td>
    <td>{{= score}}</td> 
    <td>
		<a href="javascript:void(0);" class="am-btn am-btn-primary check-detail-btn" onclick="toview({{if id}} {{= id}} {{else}} '' {{/if}},{{= b_id}})"><span class="am-icon-eye""></span> 详情 </a> 
		{{if status==2}}
        	<a href="javascript:void(0);" class="am-btn am-btn-success edit-detail-btn" onclick="toedit('{{= id}}','{{= customer_name}}','{{= amount}}','{{= b_id}}')"><span class="am-icon-archive"></span> 修改 </a>
		    <a href="javascript:void(0);" class="am-btn am-btn-primary handle-btn" onclick="creditApplyAmount('{{= lat_id}}')"><span class="am-icon-archive"></span> 授信额度 </a>
		{{else}}
			<a href="javascript:void(0);" class="am-btn am-btn-default edit-detail-btn" ><span class="am-icon-archive"></span> 修改 </a>
			<a href="javascript:void(0);" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 授信额度 </a>
		{{/if}}

	</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" >« 上一页</a></li>
			 {{/if}}
			{{if currentPage<total}}	
              <li><a id="next" href="javascript:;" class="next" >下一页 »</a></li>
			{{/if}}
              <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>
</script>

 

<script src="/tc_vsmp/view/assets/js/loan/loan.js"></script>
<script id="recordsPagi" type="text/x-jquery-tmpl">
    
//页面显示
commitAjax({'url':getDataUrl(),'param':getQueryCondition()},function(num){
			$("#waiting_num").html(num);

//后台交互url
function getDataUrl(){
	return  basePath+"loanApply/queryLoanApplyByMapNew";
}
//传入后台的数据
function getQueryCondition(){
	return {'currentPage':currentPage,
		'start_date':isEmpty(dateObj)?"":dateObj.startDate+" 00:00:00",
		'end_date':isEmpty(dateObj)?"":dateObj.endDate+" 23:59:59",
		 'name':$("#customer_name").val(),
		 'mobile':$("#customer_mobile").val(),
		 'company':$("#customer_comp").val(),
		 'operator':$("#responsible_staff").val(),
		 'status':$("#apply_status").val()};

}
</script>

 

js代码 [ loan.js ]：

src="/tc_vsmp/view/assets/js/loan/loan.js"

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");
}

上一页下一页跳转js：

	$("#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();
});

 

controller控制类代码：

  /**
     * @author zhangyl 根据查询条件查询借款申请信息列表
     * @param currentPage 页码
     * @param start_date 开始时间
     * @param end_date 结束时间
     * @param name 姓名
     * @param mobile 手机
     * @param company 公司
     * @param operator 处理人
     * @param status 状态
     * @param request  请求
     * @return 结果
     */
    @RequestMapping("/queryLoanApplyByMapNew")
    @ResponseBody
    PageBean<LoanApply> queryLoanApplyByMapNew(
            @RequestParam("currentPage") Integer currentPage,
            @RequestParam("start_date") String start_date,
            @RequestParam("end_date") String end_date,
            @RequestParam("name") String name,
            @RequestParam("mobile") String mobile,
            @RequestParam("company") String company,
            @RequestParam("operator") String operator,
            @RequestParam("status") String status, HttpServletRequest request)
    {
        System.out.println("currentPage:" + currentPage + ";filter_date:"
                + ";name:" + name + ";mobile:" + mobile + ";company:" + company
                + ";operator:" + operator + ";status:" + status);

        String startTime = DateUtils.getCurrentDate("yyyy-MM-dd HH:mm:ss");
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("currentPage", currentPage);
        map.put("start_date", start_date);
        map.put("end_date", end_date);
        map.put("name", name!=null?name.trim():null);
        map.put("mobile", mobile!=null?mobile.trim():null);
        map.put("company", company!=null?company.trim():null);
        map.put("operator", operator!=null?operator.trim():null);
        map.put("status", Integer.valueOf(status) == -1 ? null : status);

        PageBean<LoanApply> loanBean = null;
        try
        {
            loanBean = service.queryLoanApplyByMapNew(map);
            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;
    }

ServiceImpl代码：

  @Override
    public PageBean<LoanApply> queryLoanApplyByMapNew(Map<String, Object> map) {
        PageBean<LoanApply> pageBean = new PageBean<LoanApply>();

        Integer currentPage = Integer
                .valueOf(map.get("currentPage").toString());
        Integer currentPages = (currentPage - 1) * pageBean.getPagesize();

        map.put("count", currentPages);
        map.put("pagenumber", pageBean.getPagesize());

        pageBean.setList(dao.queryLoanApplyByMapNew(map));
        pageBean.setCount(dao.queryLoanApplyCountByMapNew(map));
        pageBean.setCurrentPage(currentPage);
        Map<String, Object> hash = new HashMap<String, Object>();
        hash.put("status", LoanConstant.LOAN_STATUS_JINZIN_WAIT);
        pageBean.setResultCode(dao.queryLoanApplyCountByMapNew(hash)); // 设置待处理条数
        return pageBean;
    }

PageBean代码：

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;
    }

}

实体类：

package com.tcwl.vsmp.loanmgt.po;

/**
 * 
 * @author zhangyl 
 */
public class LoanApply
{

 
    private Integer id;

    /**
     * //  
     */
    private Integer customer_id;

    /**
     * //  
     */
    private String customer_account;

    /**
     * // 
     */
    private String name;

    /**
     * //  
     */
    private String mobile;

    /**
     * //  
     */
    private String company;

    /**
     * // 
     */
    private String cars_num;

    /**
     * // 
     */
    private Double apply_amount;

    /**
     * //
     */
    private String purpose;

    /**
     * // 
     */
    private String operator;


    private Integer status;

    /**
     * //
     */
    private String ending;
    /**
     * // 
     */
    private String jinxinEnding;

    /**
     * // 
     */
    private String create_time;

    /**
     * 
     */
    private Integer capital_source;
    /**
     * 
     */
    private String  loanApplySalesman;
    /**
     * 
     */
    private long loanApplySalesmanId;
    /**
     * 
     */
    private String mobileSalesman;

    public String getMobileSalesman() {
        return mobileSalesman;
    }

    public void setMobileSalesman(String mobileSalesman) {
        this.mobileSalesman = mobileSalesman;
    }

    public String getJinxinEnding() {
        return jinxinEnding;
    }

    public void setJinxinEnding(String jinxinEnding) {
        this.jinxinEnding = jinxinEnding;
    }

    public String getLoanApplySalesman() {
        return loanApplySalesman;
    }

    public void setLoanApplySalesman(String loanApplySalesman) {
        this.loanApplySalesman = loanApplySalesman;
    }

    public long getLoanApplySalesmanId() {
        return loanApplySalesmanId;
    }

    public void setLoanApplySalesmanId(long loanApplySalesmanId) {
        this.loanApplySalesmanId = loanApplySalesmanId;
    }

    public Integer getId()
    {
        return id;
    }

    public void setId(Integer id)
    {
        this.id = id;
    }

    public Integer getCustomer_id()
    {
        return customer_id;
    }

    public void setCustomer_id(Integer customer_id)
    {
        this.customer_id = customer_id;
    }

    public String getCustomer_account()
    {
        return customer_account;
    }

    public void setCustomer_account(String customer_account)
    {
        this.customer_account = customer_account;
    }

    public String getName()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name = name;
    }

    public String getMobile()
    {
        return mobile;
    }

    public void setMobile(String mobile)
    {
        this.mobile = mobile;
    }

    public String getCompany()
    {
        return company;
    }

    public void setCompany(String company)
    {
        this.company = company;
    }

    public String getCars_num()
    {
        return cars_num;
    }

    public void setCars_num(String cars_num)
    {
        this.cars_num = cars_num;
    }

    public Double getApply_amount()
    {
        return apply_amount;
    }

    public void setApply_amount(Double apply_amount)
    {
        this.apply_amount = apply_amount;
    }

    public String getPurpose()
    {
        return purpose;
    }

    public void setPurpose(String purpose)
    {
        this.purpose = purpose;
    }

    public String getOperator()
    {
        return operator;
    }

    public void setOperator(String operator)
    {
        this.operator = operator;
    }

    public Integer getStatus()
    {
        return status;
    }

    public void setStatus(Integer status)
    {
        this.status = status;
    }

    public String getEnding()
    {
        return ending;
    }

    public void setEnding(String ending)
    {
        this.ending = ending;
    }

    public String getCreate_time()
    {
        return create_time;
    }

    public void setCreate_time(String create_time)
    {
        this.create_time = create_time;
    }

    public Integer getCapital_source()
    {
        return capital_source;
    }

    public void setCapital_source(Integer capitalSource)
    {
        capital_source = capitalSource;
    }

    @Override
    public String toString() {
        return "LoanApply{" +
                "id=" + id +
                ", customer_id=" + customer_id +
                ", customer_account='" + customer_account + '\'' +
                ", name='" + name + '\'' +
                ", mobile='" + mobile + '\'' +
                ", company='" + company + '\'' +
                ", cars_num='" + cars_num + '\'' +
                ", apply_amount=" + apply_amount +
                ", purpose='" + purpose + '\'' +
                ", operator='" + operator + '\'' +
                ", status=" + status +
                ", ending='" + ending + '\'' +
                ", jinxinEnding='" + jinxinEnding + '\'' +
                ", create_time='" + create_time + '\'' +
                ", capital_source=" + capital_source +
                ", loanApplySalesman='" + loanApplySalesman + '\'' +
                ", loanApplySalesmanId=" + loanApplySalesmanId +
                ", mobileSalesman='" + mobileSalesman + '\'' +
                '}';
    }
}