JQuery页面的表格数据的增加与分页的实现
JQuery页面的表格数据的增加与分页的实现
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:varcountPage;varnowPag=1;varpageSize;varcountSize;varstarInde...

复制代码 代码如下:

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 = $("<tr ></tr>");

$td1 = $("<td></td>");

$td2 = $("<td></td>");

$td3 = $("<td></td>");

$td4 = $("<td></td>");

$td5 = $("<td></td>");

$tr.append($td1.append("<input type='checkbox'>"));

$tr.append($td2.append(name));

$tr.append($td3.append(sex));

$tr.append($td4.append(age));

$tr.append($td5.append("<input type='button' value='删除'>"));

$("#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 < countPage) {

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 < pageSize) {

// 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上查看代码片派生到我的代码片

<!DOCTYPE html>

<html>

<head>

<title>用jquery实现</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">

<meta name="description" content="this is my page">

<meta name="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>

<>

<style type="text/css">

div {

border: 1px black solid;

}

#tableDiv {

height: 500px;

}

#insertDiv {

width: 300px;

margin-right: 550px;

}

#tableDiv {

width: 500px;

margin-left: 350px;

}

#top {

width: 500px;

height: 400px;

}

#topTable,#contentTable,#bottomTable {

width: 450px;

}

</style>

<script type="text/javascript" src="../js/jqueryTablePageNation.js"></script>

</head>

<body>

<div id="content" align="center">

<form action="">

<div id="insertDiv">

<table id="insertData" border="1px">

<tr>

<td>姓名<input type="text" id="name" value="donghogyu"></td>

</tr>

<tr>

<td>性别<input type="radio" name="sex" value="男"

checked="checked">男<input type="radio" name="sex"

value="女">女

</td>

</tr>

<tr>

<td>年龄<input type="text" id="age" value="21"></td>

</tr>

<tr>

<td align="center"><input type="button" id="submit"

value="添加数据"></td>

</tr>

</table>

</div>

<div id="tableDiv">

<div id="top">

<table id="topTable" border="1px">

<thead>

<th><input type="checkbox">全选</th>

<th>姓名</th>

<th>性别</th>

<th>密码</th>

<th>操作</th>

</thead>

<tbody id="show">

</tbody>

</table>

</div>

<div id="bottom">

<table id="bottomTable" border="1px">

<tr align="center">

<td><input type="button" value="首页" id="first"></td>

<td><input type="button" value="上一页" id="back"></td>

<td><input type="button" value="下一页" id="next"></td>

<td><input type="button" value="末页" id="last"></td>

<td><select id="selectSize">

<option value="3">3</option>

<option value="5">5</option>

<option value="10">10</option>

</select>条</td>

</tr>

<tr align="center">

<td colspan="6"><span id="sizeInfo">当前从0条到第0条记录.</span></td>

</tr>

<tr align="center">

<td colspan="6"><span id="pageInfo">当前是第0页,共0页.</span></td>

</tr>

</table>

</div>

</div>

</form>

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类