无刷新分页和jtemplates的使用

自己使用的无刷新分页是用jquery,json,jtemplates联合使用的。

	var pagination;
	$(function(){
		pagination=$("#page").myPagination({
        	currPage: 1,
        	pageNumber: 16,
        	ajax: { 
    			on: true,  
    			callback: ajaxCallBack,   			
    			type: "GET", 
    			url: "../patientHologram/physicalExamInfoAction!loadPhysicalExamInfoList.htm?p_main_id="+ p_main_id+"&line_time="+line_time+"&tabtype="+tabtype, 
    			dataType: "json" 
    		},
    		panel: {
        	next: '>',
            prev: '<',
            tipInfo_on: true,
            tipInfo: '  跳{input}/{sumPage}页',
            tipInfo_css: {
              	width: "34px",
              	height: "18px",
              	border: "1px solid #DADAD8",
              	padding: "0 5px 0 5px",
              	margin: "0 5px 0 5px",
              	color: "#343434"
            }
        }    		
	});
	});
	function ajaxCallBack(data){
	rows = data.rows;
	$("#table").setTemplateElement("Template-ListRows").processTemplate(rows);
	/* var colors = ['#fefefe', '#F9FAFC'];
    $("table").find("tr").each(function (i) {
    	if($(this).attr("id")!="tableTitle" && $(this).attr("id")!="roletitle"){
    		$(this).css("background-color", colors[i % 2]);
    	}
    }); */
 }

  <div class="content_div">
     		<div>
				<div style="margin-top:0px;width:100%"></div>
 				 <p style="display:none"><textarea id="Template-ListRows" rows="0" cols="0"> 
				    <table style="width:100%;font-size:12px;border-collapse: collapse;" cellspacing="0" cellpadding="0">
				        <td  class="border1"
				      {#param name=i value=0}
				      {#foreach $T as Row}
				      	{#param name=i value=$P.i+1}
				      	<tr userid="{$T.Row.id}" class="{#cycle values=['bcEED','bcDEE']}" style="height: 20px;color:#474E59">
							<td style="display:none" class="field2">
								 {$T.Row.p_main_id}
							</td>
				      		<td class="border2">
								 {$T.Row.p_name}
							</td>
							<td class="border4" >
								 {$T.Row.p_sex}
							</td>
							<td class="border4" >
								 {$T.Row.p_age}
							</td>
							<td class="border4">
								 {$T.Row.p_visit_cardid}
							</td>
								<td class="border4">
								 {$T.Row.p_exam_type_name}
							</td>	
							<td class="border4">
								 {$T.Row.p_exam_project_name}
							</td>
							<td class="border4">
								 {$T.Row.p_exam_result}
							</td>
								<td class="border4">
								 {$T.p_exam_date_str}
							</td>
							<td class="border4">
								 {$T.Row.p_exam_diag_disease_name}
							</td>
							<td class="border4">
								 {$T.Row.p_exam_doctor_name}
							</td>
								<td class="border3">
								 {$T.Row.p_exam_dept_name}
							</td>								
						</tr>
				      {#/for}
				      <!-- 下面的循环是用来将每次查询出的数据填补成16行,保持div = page的位置 -->
				       {#for index=1 to 16-$P.i}
				       	<tr userid="{$T.Row.id}" class="{#cycle values=['bcEED','bcDEE']}" style="height: 20px;color:#474E59">
							<td style="display:none" class="field2">
								 
							</td>
				      		<td class="border2">
							</td>
							<td class="border4" >
							</td>
							<td class="border4" >
							</td>
							<td class="border4">
							</td>
							<td class="border4">
							</td>	
							<td class="border4">
							</td>
							<td class="border4">
							</td>
							<td class="border4">
							</td>
							<td class="border4">
							</td>
							<td class="border4">
								 {$T.Row.p_attend_doctor_name}
							</td>
							<td class="border3">
							</td>								
						</tr>
					{#/for}
				   </table>
				</textarea>
				</p>
		<table id="table" cellspacing="0" style="width:100%;" ></table>
	</div>

当然记得别忘记引用js文件
<script src="../js/myPagination/jquery.myPagination6.0.js" type="text/javascript"></script>
<script src="../../resources/jTemplates/jquery-jtemplates.js" type="text/javascript"></script>
利用ajax将数据传到action,再利用json数据返回,并将其解析


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值