(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='#' onclick='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;});}}