jquery.page.js实现ajax无刷新分页

http://blog.csdn.net/dengboblog/article/details/52699332 

写代码参考了这位大神的博客。下面贴上我的代码。

首先是要把引入的分页js和css添加进来。这个代码自己百度吧。

				$.ajax({
					type:'post',
					url:'url',
					data:{
						modelName:orderidf,
					},
					dataType:'json',
					success:function(result){
						if(result.state == 0){
							var dataObj = eval("("+result.brandArray+")");
							var html ="";
							for(var i= 0;i<dataObj.length;i++){
								var brand = dataObj[i];
								html+="<tr>";
								html+="<td>"+brand.seriesName+"</td>";
								html+="<td>"+brand.gears+"</td>";
								html+="<td>"+brand.displacement+"</td>";
								html+="<td>"+brand.configurationModel+"</td>";
								html+="<td>"+brand.priceReference+"万</td>";
								html+="<td><input type='button' id='brandModelID' value='确定选择' οnclick='choiceBrand("+brand.brandModelID+',"'+brand.configurationModel+"")'></td>";
								html+="</tr>";
							}
							layer.open({
								type: 1,
					                        shade: false,
					                        title:'车型选择',
						  		area: ['800px','400px'], //宽高 
								content: $('#Models_selection_style'),
							});
							$("#tb").html(html);
							 $(".tcdPageCode").createPage({
							       pageCount:parseInt(result.totalNum),
							       current:parseInt(result.pageNum),
							       backFn:function(p){
							       			$.ajax({
												type:'post',
												url:'url',
												data:{
													modelName:orderidf,
													pageNum:p
												},
												dataType:'json',
												success:function(result){
													if(result.state == 0){
														var dataObj = eval("("+result.brandArray+")");
														var html ="";
														for(var i= 0;i<dataObj.length;i++){
															var brand = dataObj[i];
															html+="<tr>";
															html+="<td>"+brand.seriesName+"</td>";
															html+="<td>"+brand.gears+"</td>";
															html+="<td>"+brand.displacement+"</td>";
															html+="<td>"+brand.configurationModel+"</td>";
															html+="<td>"+brand.priceReference+"万</td>";
															html+="<td><input type='button' id='brandModelID' value='确定选择' οnclick='choiceBrand("+brand.brandModelID+',"'+brand.configurationModel+"")'></td>";
															html+="</tr>";
														}
														layer.open({
															type: 1,
												            shade: false,
												            title:'车型选择',
															area: ['800px','400px'], //宽高 
															content: $('#Models_selection_style'),
														});
														$("#tb").html(html);
														}
							      	 			}
							 		 	 });
							   		}
							   	});
						}else if(result.reLogin == 0) {
			                window.location.href = basePath + '/site/UserAction/toLogin.do';
			            }else{
			            	layer.alert(result.errerMsg,{
						    	  	 title: '提示框',				
								  	 icon:0							
							});
			            }
					}
				});

前台jsp页面

<div class="Models_selection_style none" id="Models_selection_style">
				<div class="Models_content">
					<table cellpadding="0" cellspacing="0" width="100%" id="table">
						<thead>
							<tr class="title_name">
								<th>
									车系
								</th>
								<th>
									档位
								</th>
								<th>
									排量
								</th>
								<th>
									产品型号
								</th>
								<th>
									参考价
								</th>
								<th>
									车型选择
								</th>
							</tr>
						</thead>
						<tbody id="tb">
						</tbody>
					</table>
					<!-- 分页 -->
					<div class="tcdPageCode" ></div>
					<div class="notice_style">
						<p>
							如你的车辆不再选择范围之内,请致电
							<b>400-234-1234</b>
						</p>
					</div>
				</div>
			</div>

我做的是一个弹出框。后台返回的json数组字符串，在前台通过拼接的方式，for循环遍历这个数组，弹出框下面实现的分页。

效果图。

本人新手，只是把自己工作中所实现的一些功能整理出来，有不足之处还请见谅