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

桃扇骨 2023-10-18 23:34 119阅读 0赞

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

![Center][]

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

截图所示：

![Center 1][]

第二步：编写相关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;
    			});	
    	}	
    }

[Center]: https://img-blog.csdn.net/20130810150605578?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20130810150730703?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 (Jquery功能篇)jquery的smallsluder控件(图片轮换)

果截图： ![Center][] 项目实例：加载资源文件  <script type="text/...

水深无声/ 2024年04月18日 14:46/ 0 赞/ 63 阅读

相关 (Jquery功能篇) Jquery UI 相关组件(手风琴、tab分页、进度条、滚动条、时间控件)

截图： ![Center][] ![Center 1][] 实例代码： <%@ page language="java" contentType="text/h

梦里梦外;/ 2023年10月18日 23:48/ 0 赞/ 91 阅读

相关 (Jquery功能篇) JqGrid表单控件实例代码

截图效果展示： ![Center][] 源代码： <%@ page language="java" contentType="text/html; charset

港控/mmm°/ 2023年10月18日 23:44/ 0 赞/ 115 阅读

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

截图：使用JPage实现分页效果图 ![Center][] 第一步：加载JPage插件（相关资源文件和Js代码）截图所示： ![Center 1][] 第二步：编写

桃扇骨/ 2023年10月18日 23:34/ 0 赞/ 120 阅读

相关 (Jquery功能篇) Jquery validate框架验证实例代码

第一步：加载相关的js文件 <script type="text/javascript" src="js/jquery.validate.js"></script>

忘是亡心i/ 2023年10月18日 22:46/ 0 赞/ 81 阅读

相关 (jsp和servlet功能篇)jsp+servlet+jquery分页代码

首先看运行效果图： ![Center][] 第一步：编写servlet 代码： package com.rf.servlet; import

清疚/ 2023年10月18日 22:34/ 0 赞/ 124 阅读

相关（Jquery功能篇） Jquery 控件赋值

1.jQuery给span取值：$("\id").html(); 2.jQuery给input取值：$("\id").val(); 3.jQuery给textarea取值：

小鱼儿/ 2023年10月16日 20:34/ 0 赞/ 42 阅读

相关 jq实现html分页代码,jquery 分页控件实现代码

jquery分页控件 var pageindex=1; var totelsize=60; var centersize=5; var pagesize=0; var

爱被打了一巴掌/ 2022年10月06日 13:51/ 0 赞/ 231 阅读

相关 AspNetPager 控件实现真分页功能

前言分页是Web应用程序中最常用到的功能之一，在ASP.NET中，虽然自带了一个可以分页的DataGrid和GridView控件，但其分页功能并不尽如

女爷i/ 2022年08月14日 04:34/ 0 赞/ 236 阅读

相关 JQuery实现分页功能

使用JQuery实现分页功能。 1、分页栏HTML码 <div class="g-cf g-pagerwp"> <div style="vis

拼搏现实的明天。/ 2021年09月17日 12:22/ 0 赞/ 734 阅读