本文目錄一覽：
什麼是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
原創文章，作者：ILQJ，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/131836.html
微信掃一掃 
支付寶掃一掃 