本文目录一览：
什么是JS代码？
你所谓的HTML是英文Hypertext Markup Language的简写，说明了说是标签，还不能称之为语言。一般是一个开始标签与一个结束标签组成！是网站代码的基础！如果是你网页不会这个肯定办不了事！
JS的全称是javascript，是一门内嵌语言，是写在网页中以实现网页客户端交互。当然服务端JS也还是有的！一般是以script language="javascript"/script包括中的，也就是说以上还是一个HTML标签，但里边所写的内容却是javascript,浏览器会自动解释！当然这个语言就是为了网页的动态而出现的！
所以两者是有很大区别的！你可以这样理解：HTML是网页基础，而JAVASCIRPT是为了补充HTML的静态网页而出现的一个HTML或说浏览器内置语言！实现网页动态效果！
JS如何控制分页
//js获取url上的参数
function getParam(name) {
var reg = new RegExp("(^|)" + name + "=([^]*)(|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
var page = getParam('page');
js的分页原理以及实现步骤是什么？
主要是借鉴了网上一个例子，修改了一些小地方，前端分页的技巧，表格的数据是已经写好了，可以前端渲染表格然后再分页，都是可以的。
其实分页最关键是这两句：
var startRow = (currentPage - 1) * pageSize+1; //currentPage 为当前页，pageSize为每页显示的数据量
var endRow = currentPage * pageSize;
找到我们需要显示的行的范围（starRow~endRow）
ps:这里在跳转的时候遇到了一个小BUG，就是获取到的select的value值是string类型的，比如获取到了1，然后你想再加1的时候就会变成"11" 而不是我们想要的"2"，所以这里需要用parseInt( )来转换一下，小细节需要注意呀！！！
效果图：
[javascript] view plain copy print?
!doctype html
html
head
meta charset='utf-8'
style type="text/css"
a{
text-decoration: none;
}
.table2{
border:#C8C8C8 solid;
border-width:1px 0px 0px 1px;
background: #F3F0F0;
margin-top:25px;
}
.td0{
border:#C8C8C8 solid;
border-width:0 0 1px 0;
}
.td2{
border:#C8C8C8 solid;
border-width:0 1px 1px 0 ;
}
.barcon {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.barcon1 {
font-size: 17px;
float: left;
margin-top: 20px;
}
.barcon2 {
float: right;
}
.barcon2 ul {
margin: 20px 0;
padding-left: 0;
list-style: none;
text-align: center;
}
.barcon2 li {
display: inline;
}
.barcon2 a {
font-size: 16px;
font-weight: normal;
display: inline-block;
padding: 5px;
padding-top: 0;
color: black;
border: 1px solid #ddd;
background-color: #fff;
}
.barcon2 a:hover{
background-color: #eee;
}
.ban {
opacity: .4;
}
/style
/head
body
table width="950" cellpadding="0" cellspacing="0" class="table2" align="center"
thead
tr
td colspan="3" height="33" class="td0" /td
td align="center" class="td2"a href="###"添加用户/a/td
/tr
tr align="center"
th width="150" height="33" class="td2"序号/th
th width="300" class="td2"用户名/th
th width="250" class="td2"权限/th
th width="250" class="td2"操作/th
/tr
/thead
tbody id="adminTbody"
tr align="center"
td class="td2" height="33" width="150"1/td
td class="td2" admin/td
td class="td2" 管理员/td
td class="td2" a href="###"修改/a/td
/tr
/tbody
/table
div id="barcon" class="barcon"
div id="barcon1" class="barcon1"/div
div id="barcon2" class="barcon2"
ul
lia href="###" id="firstPage"首页/a/li
lia href="###" id="prePage"上一页/a/li
lia href="###" id="nextPage"下一页/a/li
lia href="###" id="lastPage"尾页/a/li
liselect id="jumpWhere"
/select/li
lia href="###" id="jumpPage" onclick="jumpPage()"跳转/a/li
/ul
/div
/div
script src="jquery.js"/script
script
/*动态生成用户函数
num为生成的用户数量
*/
function dynamicAddUser(num){
for(var i=1;i=num;i++)
{
var trNode=document.createElement("tr");
$(trNode).attr("align","center");
//序号
var tdNodeNum=document.createElement("td");
$(tdNodeNum).html(i+1);
tdNodeNum.style.width = "150px";
tdNodeNum.style.height = "33px";
tdNodeNum.className = "td2";
//用户名
var tdNodeName=document.createElement("td");
$(tdNodeName).html("lzj"+i);
tdNodeName.style.width = "300px";
tdNodeName.className = "td2";
//权限
var tdNodePri=document.createElement("td");
tdNodePri.style.width = "250px";
tdNodePri.className = "td2";
var priText=document.createElement("span");
$(priText).css({"display":"inline-block","text-align":"center"});
$(priText).text("普通用户");
tdNodePri.appendChild(priText);
//操作
var tdNodeOper = document.createElement("td");
tdNodeOper.style.width = "170px";
tdNodeOper.className = "td2";
var editA = document.createElement("a");
$(editA).attr("href", "###").text("编辑");
$(editA).css({ display: "inline-block" });
tdNodeOper.appendChild(editA);
trNode.appendChild(tdNodeNum);
trNode.appendChild(tdNodeName);
trNode.appendChild(tdNodePri);
trNode.appendChild(tdNodeOper);
$("#adminTbody")[0].appendChild(trNode);
}
}
$(function(){
dynamicAddUser(80);
goPage(1,10);
var tempOption="";
for(var i=1;i=totalPage;i++)
{
tempOption+='option value='+i+''+i+'/option'
}
$("#jumpWhere").html(tempOption);
})
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
var pageSize=0;//每页显示行数
var currentPage_=1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage;//总页数
function goPage(pno,psize){
var itable = document.getElementById("adminTbody");
var num = itable.rows.length;//表格所有行数(所有记录数)
pageSize = psize;//每页显示行数
//总共分几页
if(num/pageSize parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
currentPage_=currentPage;
var startRow = (currentPage - 1) * pageSize+1;
var endRow = currentPage * pageSize;
endRow = (endRow num)? num : endRow;
//遍历显示数据实现分页
/*for(var i=1;i(num+1);i++){
var irow = itable.rows[i-1];
if(i=startRow i=endRow){
irow.style.display = "";
}else{
irow.style.display = "none";
}
}*/
$("#adminTbody tr").hide();
for(var i=startRow-1;iendRow;i++)
{
$("#adminTbody tr").eq(i).show();
}
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
document.getElementById("barcon1").innerHTML = tempStr;
if(currentPage1){
$("#firstPage").on("click",function(){
goPage(1,psize);
}).removeClass("ban");
$("#prePage").on("click",function(){
goPage(currentPage-1,psize);
}).removeClass("ban");
}else{
$("#firstPage").off("click").addClass("ban");
$("#prePage").off("click").addClass("ban");
}
if(currentPagetotalPage){
$("#nextPage").on("click",function(){
goPage(currentPage+1,psize);
}).removeClass("ban")
$("#lastPage").on("click",function(){
goPage(totalPage,psize);
}).removeClass("ban")
}else{
$("#nextPage").off("click").addClass("ban");
$("#lastPage").off("click").addClass("ban");
}
$("#jumpWhere").val(currentPage);
}
function jumpPage()
{
var num=parseInt($("#jumpWhere").val());
if(num!=currentPage_)
{
goPage(num,pageSize);
}
}
/script
/body
/html
