(Jquery功能篇) JPage分页控件实例代码
小虾米
阅读:605
2021-04-01 10:24:13
评论:0
截图:使用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;
});
}
}
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。