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

 $("#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")@ResponseBodyPageBean<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代码：

  @Overridepublic 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;}@Overridepublic 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 + '\'' +'}';}
}

x-jquery-tmpl代码示例,分页相关推荐

jq封装接口ajax,jquery ajax方法封装及api文件设计的代码示例
本篇文章给大家带来的内容是关于jquery ajax方法封装及api文件设计的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 封装 jquery ajax 文件/** * 封 ...
JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
jquery中ajax的分页,利用jQuery中的ajax分页实现代码
本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.j ...
jquery tmpl 详解
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
php 掌握jquery,完全掌握jquery tmpl模板
之前用模板渲染都是用angular,无意间发现了jquery tmpl这种轻量级,其文档在这里,本文主要为大家带来一篇jquery tmpl模板(实例讲解).小编觉得挺不错的,现在就分享给大家,也给大 ...
html jquery 模板,用模版生成HTML的的框架jquery.tmpl使用详解
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
jQuery .tmpl() 用法
参考效果: DEMO 下载: jquery-tmpl-master 动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回 ...
jQuery .tmpl(), .template()学习
昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里. 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][option ...
[原]jQuery .tmpl(), .template()学习
昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里. 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][option ...

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

需要引用jquery.tmpl.js：

页面代码：

js代码 [ loan.js ]：

controller控制类代码：

ServiceImpl代码：

PageBean代码：

实体类：

x-jquery-tmpl代码示例,分页相关推荐

最新文章

热门文章