复制代码 代码如下:
var countpage;
var nowpag = 1;
var pagesize;
var countsize;
var starindex;
var endindex;
// 用户提交信息
var name;
var sex;
var age;
// 定义行号
var num = 1;
$(document).ready(function() {
// 注册添加用户的事件
$(#submit).click(function() {
// 获取用户提交的信息
name = $(#name).val();
sex = $(input[name='sex']:checked).val();
age = $(#age).val();
pagesize = $(#selectsize option:selected).val();
// alert(name+sex+age+pagesize);
// 创建表格下的tr对象
$tr = $(
);
$td1 = $( );
$td2 = $( );
$td3 = $( );
$td4 = $( );
$td5 = $( );
$tr.append($td1.append());
$tr.append($td2.append(name));
$tr.append($td3.append(sex));
$tr.append($td4.append(age));
$tr.append($td5.append());
$(#show).append($tr);
pagenation();
});
// 注册选择显示条数的操作
$(#selectsize).change(function() {
pagesize = $(#selectsize option:selected).val();
pagenation();
});
// 注册分页操作的按钮点击事件
$(#first).click(pagenation);
$(#back).click(pagenation);
$(#next).click(pagenation);
$(#last).click(pagenation);
});
// 分页操作的函数
var pagenation = function() {
// 获取所有的数据条数
countsize = $(#show tr).size();
// 获取总页数
countpage = math.ceil(countsize / pagesize);
// 处理翻页的操作
if (this.nodetype == 1) {
var idvalue = $(this).attr(id);
if (first == idvalue) {
// alert(idvalue);
nowpag = 1;
} else if (back == idvalue) {
// alert(nowpag);
if (nowpag > 1) {
nowpag--;
}
} else if (next == idvalue) {
// alert(idvalue);
if (nowpag nowpag++;
}
} else if (last == idvalue) {
// alert(idvalue);
nowpag = countpage;
}
}
// alert(pagesize);
// 获取显示开始和结束的下标
starindex = (nowpag - 1) * pagesize + 1;
endindex = nowpag * pagesize;
if (endindex > countsize) {
// alert(下标大于总记录数+endindex);
endindex = countsize;
}
if (countsize // alert(总记录数小小于每页的显示条数+endindex);
endindex = countsize;
}
// alert(starindex);
if (starindex == endindex) {
// 显示的操作
$(#show tr:eq( + (starindex - 1) + )).show();
$(#show tr:lt( + (starindex - 1) + )).hide();
} else {
// 显示的操作
$(#show tr:gt( + (starindex - 1) + )).show();
$(#show tr:lt( + (endindex - 1) + )).show();
// 隐藏的操作
$(#show tr:lt( + (starindex - 1) + )).hide();
$(#show tr:gt( + (endindex - 1) + )).hide();
}
// 改变底部显示操作
$(#sizeinfo)
.html(
当前从 + starindex + 条到第 + endindex + 条记录,共 + countsize
+ 条记录.);
$(#pageinfo).html(当前是第 + nowpag + 页,共 + countpage + 页.);
};
[html] view plaincopy在code上查看代码片派生到我的代码片
用jquery实现
姓名
性别checked=checked>男value=女>女
年龄
value=添加数据>
全选
姓名
性别
密码
操作
3
5
10
条
当前从0条到第0条记录.
当前是第0页,共0页.