(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 = ""
									+ liushuih
									+ ""
									+ chuangjiansj
									+ ""
									+ dangqianwz
									+ ""
									+ mudedi
									+ ""
									+ chengke_id
									+ ""
									+ jiajia
									+ ""
									+ yuyinwj
									+ ""
									+ dengdaisj
									+ "查询操作"
							$("#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;
			});	
	}	
}