(Jquery功能篇) JPage分页控件实例代码

截图：使用JPage实现分页效果图

第一步：加载JPage插件（相关资源文件和Js代码）

         截图所示：

第二步：编写相关js 代码

function bindDate() {  
	      //删除相关数据(删除Id为edc的tbody的相关数据，移除Class为content的tr的行数据)	 
			$("Tbody#edc .content").remove(); 
	 
	 
			$.ajax( { 
				url : "dingdan", 
				type : 'post', 
				success : function(data) { 
					if (data != null || data != "") { 
						// 解析相关json 格式数据 
						var dataObj = eval("(" + data + ")"); 
						for ( var i = 0; i < dataObj.length; i++) { 
							var liushuih = dataObj[i].liushuih; 
							var chuangjiansj = dataObj[i].chuangjiansj; 
							var dangqianwz = dataObj[i].dangqianwz; 
							var mudedi = dataObj[i].mudedi; 
							var chengke_id = dataObj[i].chengke_id; 
							var jiajia = dataObj[i].jiajia; 
							var yuyinwj = dataObj[i].yuyinwj; 
							var dengdaisj = dataObj[i].dengdaisj; 
							// 在table 添加一行新数据 
							var tr = "<tr class='content'><td >" 
									+ liushuih 
									+ "</td><td >" 
									+ chuangjiansj 
									+ "</td><td >" 
									+ dangqianwz 
									+ "</td><td >" 
									+ mudedi 
									+ "</td><td >" 
									+ chengke_id 
									+ "</td><td >" 
									+ jiajia 
									+ "</td><td >" 
									+ yuyinwj 
									+ "</td><td >" 
									+ dengdaisj 
									+ "</td><td><a href='#' οnclick='rowDate()'>查询操作</a></td></tr>" 
							$("#edc").append(tr); 
						} 
						//添加相关的分页栏工具（id为holder的层） 
						$("div.holder").jPages({ 
						      containerID : "edc", //分页的数据源 
						      previous : "上一页",  
						      next : "下一页", 
						      perPage : 6    //分页条数 
						    	}); 
						 
					 
						 
					} else { 
						alert("没有数据"); 
					} 
 
				}, 
				error : function(data) { 
 
				} 
			}); 
} 
 
// 选择行数据实例代码 
function rowDate() { 
	var $table = $("#ygxxtable");// 获取表 
	var $trs = $table.find("tr");// 获取行 
	 
	// 遍历数据表的行数 
	for ( var i = 0; i < $trs.length; i++) {	 
		var $tr = $trs.eq(i);// 循环获取每一行		 
		$tr.on("click", function() { // 为每一行添加click事件 
				var $td = $tr.find("td");// 获取行内数据 
				//alert("相关数据："+$td.eq(0).text()); 
				var liushuih = $td.eq(0).text();				 
				var chuangjiansj = $td.eq(1).text(); 
				var dangqianwz = $td.eq(2).text(); 
				var mudedi = $td.eq(3).text(); 
			    var chengke_id = $td.eq(4).text(); 
			    alert("相关数据："+chengke_id); 
			    kehuadjax(chengke_id); 
				var jiajia = $td.eq(5).text(); 
				var yuyinwj = $td.eq(6).text(); 
				var dengdaisj = $td.eq(7).html; 
			});	 
	}	 
}