jqury+js实现纯前端分业（伪分页）

      最近一个同事需要写一个伪分业显示我也写了一个demo，代码如下：

index.js

body{
background-color: yellowgreen;
}


#myteb{
width: 100%;
background-color: blue;
border: 2px solid red;
}
#myteb th{
background-color: brown;
}
#myteb td{
height: auto;
width:11%;
border: 2px solid black;
background-color: yellowgreen;
}
#myteb td input{
width:100%;
border: 0px solid black;
background-color: blue;
}
div ul{
width: 100%;
}
div ul li{
list-style-type: none;
float: left;
}
div input,div select{
border:2px solid cyan ;
background-color:green;
}

index.js

//记录当前选中数据的数量
var ids = "";
var currentSelectNum = 0;
var selectids = [];
var currentusersize = 2;
var usersize = 0;
var pageNumber = 1;
var pageSize = 2;
var countPage = 1;
var headData = {
checkBox: "全选",
id: "ID",
name: "用户名",
age: "年龄",
email: "email",
quesnums: "提问数",
askAndAdopt: "回答",
control: "操作"
};
var bodyData = [{
id: "1",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "8",
},
{
id: "2",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "9",
},
{
id: "3",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "10",
},
{
id: "4",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "11",
},
{
id: "5",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "12",
},
{
id: "6",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "0",
},
{
id: "7",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "1",
},
{
id: "8",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "2",
},
{
id: "9",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "3",
},
{
id: "10",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "4",
},
{
id: "11",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "5",
},
{
id: "12",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "6",
},
{
id: "13",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "7",
},
{
id: "14",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "8",
},
{
id: "15",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "9",
},
{
id: "16",
name: "张三",
age: "13",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "10",
},
{
id: "17",
name: "张四",
age: "14",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "8",
},
{
id: "18",
name: "张四",
age: "15",
email: "123@qq.com",
quesnums: "12",
askAndAdopt: "8",
}
]


$(function() {
createTable(headData, bodyData);
// 从隐藏表单中获取 当前列表显示的数据数量
});


function createTable(headData, bodyData) {
$("#myteb").empty();
countPage = (bodyData.length / pageSize).toFixed(0);
var table = $("<table class='table table-bordered'>");
// 创建表头
createHead(table, headData)
// 创建数据行
createBody(table, headData, bodyData);
$("#myteb").prepend(table);
getpageDesc();
}


function createBody(table, headData, bodyData) {
for(var userIndex in bodyData) {
if(userIndex >= usersize && userIndex < (usersize + pageSize)) {
table.append(createTr(headData, bodyData[userIndex]));
}
}
}
// 创建表头
function createHead(table, headData) {
var tr = $("<tr>");
for(var par in headData) {
var th = $("<th>");
if(par == "checkBox") {
th
.append($("<input id='chackAll' type='checkBox' onclick='checkAll(event)'/>"))
th.append($("<label></label>").text(headData[par]));
} else {
th.text(headData[par]);
}
tr.append(th);
}
table.append(tr);
}
// 创建表体中的数据行
function createTr(headData, user) {
// 创建tr标签
var tr = $("<tr id='tr" +
user.id +
"'></tr>");
for(var par in headData) {
if(par == "checkBox") {
// 创建每行第一列的复选框
var checkTd = $("<td ><input id='" +
user.id +
"' class='check' type='checkBox' onclick='checkOne(event)'/></td>");
// 将复选框加入到行中
tr.append(checkTd);
} else if(par == "control") {
// 创建每行第一列的复选框
var controlTd = $("<td><input class='btn btn-info btn-xs' type='button' value='修改' onclick='editeUser(" +
user.id +
")'/> <input class='btn btn-danger btn-xs' type='button' value='删除' onclick='deleteByGet(" +
user.id + ")'/></td>");
// 将复选框加入到行中
tr.append(controlTd);


} else {
var td = $("<td>");
if(user.hasOwnProperty(par)) {
td.text(user[par]);
} else {
td.text("");
}
tr.append(td);
}
}
// 创建操作列
return tr;
}


function goToPage(pagesize) {
$("#myteb").empty();
pageNumber = pagesize;
usersize = (Number(pageNumber) * Number(pageSize)).toFixed(0) - pageSize;
countPage = Math.ceil(bodyData.length / pageSize);
createTable(headData, bodyData);
getpageDesc();
}


function prePage() {
if(pageNumber > 1) {
pageNumber--;
goToPage(pageNumber);
} else {
alert("已经是首页没有上一页");
}
getpageDesc();
}


function nextPage() {
countPage = Math.ceil(bodyData.length / pageSize);
if(pageNumber < countPage) {
pageNumber++;
goToPage(pageNumber);
} else {
alert("已经是末没有下一页");
}
getpageDesc();
}


function lastPage() {
countPage = Math.ceil(bodyData.length / pageSize);
goToPage(countPage);
getpageDesc();
}


function getpageDesc() {
$("#pageDesc").text("第" + pageNumber + "页/共" + Math.ceil(countPage) + "页");
}


function changepageNumberNum() {
pageSize = Math.ceil($("#pageSize").val());
countPage = Math.ceil(bodyData.length / pageSize);
$("#myteb").empty();
goToPage(1);
getpageDesc();
}


function checkOne(event) {
// 点击某个checkBox
var b = event.target.checked;
// 如果是选中状态 则加1 如果是取消状态 则减1
if(b) {
currentSelectNum++;
} else {
currentSelectNum--;
}
// 比较选中的个数和总 如果相等，则全选置为选中状态 否则取消选中
if(usersize == currentSelectNum && usersize != 0) {
$("#chackAll").prop("checked", true);
} else {
$("#chackAll").prop("checked", false);
}
}


function checkAll(event) {
$(".check").each(function() {
// 将全选按钮的状态 赋值给 列表中所有的checkBox
this.checked = event.target.checked;
if(event.target.checked) {
currentSelectNum = usersize;
}
});
//getIds();
}


function editeUser(id) {
//获取选中行节点
var Tr = $("#tr" + id);
Tr.empty();
for(var par in headData) {
var td = $("<td>");
if(par == "checkBox") {
td.append($("<input id='chackAll' type='checkBox' onclick='checkAll(event)'/>"))
td.append($("<label></label>"));
} else if(par == "control") {
td.append($("<input id='chackAll' type='button' value='确定' onclick='makeSure(" + id + ")'/>"));
td.append($("<input id='chackAll' type='button' value='取消' onclick='cancel(" + id + ")'/>"));
} else {
td.append($("<input id='" + par + "_" + id + "' type='text' value='" +getDatabyId(id)[par]+ "'/>"));
}
Tr.append(td);
}
}
//删除本行
function deleteByGet(id) {
deleteusersUID(id);
//刷新
createTable(headData, bodyData);
}
//删除id=uid的元素
function deleteusersUID(uid) {
for(var i = 0; i < bodyData.length; i++) {
if(bodyData[i].id == uid) {
bodyData.splice(i, 1);
break;
}
}
}


function deleteAll() {
// 找到所有选中的checkbox的数据的id
$(".check:checked").each(function() {
deleteusersUID($(this).attr("id"));
});
createTable(headData, bodyData);
}


function getDatabyId(Id) {
for(var i = 0; i < bodyData.length; i++) {
if(bodyData[i].id == Id) {
return bodyData[i];
}
}
}


function cancel(Id) {
createTable(headData, bodyData);
}


function makeSure(Id) {
alert(Id);
var data={};
data.id=Id;
data.name=$("#name_"+Id).val();
data.age=$("#age_"+Id).val();
data.email=$("#email_"+Id).val();
data.quesnums=$("#quesnums_"+Id).val();
data.askAndAdopt=$("#askAndAdopt_"+Id).val();
xiugaidata(Id,data);
createTable(headData, bodyData);
}
function xiugaidata(Id,data){
for(var i = 0; i < bodyData.length; i++) {
if(bodyData[i].id == Id) {
bodyData.splice(i,1,data);
}
  }
}

index.html

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>index.html</title>
</head>


<body>
<h1>表单</h1>
<div>
<input type="button" onclick="deleteAll()" value="删除选中" />
<table id="myteb">
</table>
<ul class="pagination col-sm-3" style="margin:0px">
<li><input id="first" type="button" value="首页" onclick="goToPage(1)" /></li>
<li><input id="pre" type="button" value="上一页" onclick="prePage()" /></li>
<li><input id="next" type="button" value="下一页" onclick="nextPage()" /></li>
<li><input id="last" type="button" value="尾页" onclick="lastPage()" /></li>
<select id="pageSize"onchange="changepageNumberNum()">
<option value="2">2</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>条/页
<label id="pageDesc">第0页/共0页</label>
</ul>
</div>
</body>
</html>