js前端分頁_JS 前端的篩選代碼

❶ jquery.pagination.js 如何用

1，下載3個文件
分別為：jquery-1.7.1.js、jquery.pagination.js、pagination.css
//詳見附件

2，准備好伺服器端返回結果
主要代碼如下：

Php代碼
$members = array(array().......); //詳見附件
$total = count($members);
$pageIndex = $_POST['pageIndex'];
$items_per_page = $_POST['items_per_page'];

$result = array();
$start = $pageIndex * $items_per_page;
$end = ($pageIndex+1) * $items_per_page;
if($end > $total){$end = $total;}
for($i = $start; $i < $end; $i++){
$result[] = $members[$i];
}

print json_encode(array('total'=>$total,'result'=>$result));

3，前端js代碼（核心）

Js代碼
var items_per_page = 3;
var page_index = 0;

function getDataList(index){
var pageIndex = index;
$.ajax({
type: "POST",
url: "members.php",
data: "pageIndex="+pageIndex+'&items_per_page='+items_per_page,
dataType: 'json',
contentType: "application/x-www-form-urlencoded",
success: function(msg){
var total = msg.total;
var html = '<table><tr><th>姓名</th><th>工作時間</th><th>籍貫</th><th>職務</th><th>生卒年</th><th>操作</th></tr>';
$.each(msg.result,function(i,n){
html += '<tr><td>'+n[0]+'</td><td>'+n[1]+'</td><td>'+n[2]+'</td><td>'+n[3]+'</td><td>'+n[4]+'</td>'
html += '<td><a href=#>刪除</a></td></tr>';
});
html += '</table>';
$('#Searchresult').html(html);

//分頁-只初始化一次
if($("#Pagination").html().length == ''){
$("#Pagination").pagination(total, {
'items_per_page' : items_per_page,
'num_display_entries' : 10,
'num_edge_entries' : 2,
'prev_text' : "上一頁",
'next_text' : "下一頁",
'callback' : pageselectCallback
});
}
}
});
}

function pageselectCallback(page_index, jq){
getDataList(page_index);
}

$(document).ready(function(){
getDataList(page_index);
});

4，前端html

Html代碼
<dl id="Searchresult">
<dt>Search Results will be inserted here ...</dt>
</dl>
<br style="clear:both;" />
<div id="Pagination" class="pagination"></div>
<br style="clear:both;" />

批註：
（1）jquery.js和jquery.pagination.js插件的載入有先後順序，不能顛倒。特別是在復雜的頁面中。
（2）jquery.pagination.js實現可以有很多種。不同的分頁插件，使用時可能會有差別，所以最好有足夠的js功底，讀懂那些插件是如何實現，以及如何引用。
（3）pagination.css是樣式，可以獨立出來。也即可以使用很多種不同的樣式修飾，不必是給出的那一個。

❷ JS 前端的篩選代碼

我特么的終於寫出來了，，給大家拿去用用看，自己添加css樣式。我感覺頭發要掉了。

粗略的樣子就是這樣，後面是代碼。

//JavaScriptDocument
//JavaScriptDocument
/*!jQueryv2.1.4|(c)2005,2015jQueryFoundation,Inc.|jquery.org/license*/

$(document).ready(function(){
$(".uox").click(function(){
$(".uox-1").show(500);
$(".uos-1").hide(500);
$(".box-1").hide(500);
$(".jod-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);

});

$(".uos").click(function(){
$(".uos-1").show(500);
$(".uox-1").hide(500);
$(".box-1").hide(500);
$(".jod-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);
});

$(".box").click(function(){
$(".box-1").show(500);
$(".uos-1").hide(500);
$(".uox-1").hide(500);
$(".jod-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);
});

$(".jod").click(function(){
$(".jod-1").show(500);
$(".uos-1").hide(500);
$(".box-1").hide(500);
$(".uox-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);
});

$(".sor").click(function(){
$(".sor-1").show(500);
$(".uos-1").hide(500);
$(".box-1").hide(500);
$(".jod-1").hide(500);
$(".uox-1").hide(500);
$("#page").hide(500);
});

//第一組篩選結束
//開始第二組篩選

$(".newch").click(function(){
$(".newch-1").show(500);
$(".bopch-1").hide(500);
$(".luoch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide();
$("#page").hide(500);
});
$(".luoch").click(function(){
$(".luoch-1").show(500);
$(".newch-1").hide(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide();
$("#page").hide(500);
});

$(".bopch").click(function(){
$(".bopch-1").show(500);
$(".newch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".luoch-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});

$(".dizch").click(function(){
$(".dizch-1").show(500);
$(".bopch-1").hide(500);
$(".newch-1").hide(500);
$(".luoch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});

$(".dnych").click(function(){
$(".dnych-1").show(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".luoch-1").hide(500);
$(".newch-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});

$(".ousch").click(function(){
$(".ousch-1").show(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".luoch-1").hide(500);
$(".dnych-1").hide(500);
$(".newch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});

$(".tiych").click(function(){
$(".tiych-1").show(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".luoch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".newch-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});

$(".getch").click(function(){
$(".getch-1").show(500);
$(".bopch-1").hide(500);
$(".luoch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".newch-1").hide(500);
$("#page").hide(500);
});
//第二組結束
//第三組篩選

$(".wan-10").click(function(){
$(".wan-sh").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-20").click(function(){
$(".wan-es").show(500);
$(".wan-sh").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-30").click(function(){
$(".wan-ss").show(500);
$(".wan-es").hide(500);
$(".wan-sh").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-50").click(function(){
$(".wan-ws").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-sh").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-80").click(function(){
$(".wan-bs").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-sh").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-100").click(function(){
$(".wan-yb").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-sh").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-ot").click(function(){
$(".wan-oth").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-sh").hide(500);
});

//第三組結束

//全部==按鈕
$(".qos").click(function(){
$("*").show(500);
$(".uio").show(500);
$(".uip").show(500);
$("#page").hide();
});

$(".zhan").click(function(){
$("#page").slideToggle(500);

});

$(".hons").click(function(){
$("*").toggleClass("red");
});
//變色（紅色）

$(".newsli").first().css("color","#5A0305");
$(".newsa").first().css("color","#5A0305");

$(".newsli").eq(1).css("color","#C0832C");
$(".newsa").eq(1).css("color","#C0832C");

$(".newsli").eq(2).css("color","#12B4B7");
$(".newsa").eq(2).css("color","#12B4B7");

$(".newsli").eq(3).css("color","#000");
$(".newsli").eq(4).css("color","#000");
$(".newsli").eq(5).css("color","#000");
$(".newsli").eq(6).css("color","#000");
$(".newsli").eq(7).css("color","#000");
$(".newsli").eq(8).css("color","#000");
$(".newsli").eq(9).css("color","#000");

//獲取外部文件代碼
$(".huoq").click(function(){
$("#div1").load("../DW+GY/css/loud.htm");
});

});

❸ 網頁上的「上一頁，下一頁」JS代碼怎麼寫

需要准備的材料分別有：電腦、html編輯器、瀏覽器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

❹ 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 print?

<!doctypehtml>
<html>
<head>
<metacharset='utf-8'>
<styletype="text/css">
a{
text-decoration:none;
}
.table2{
border:#C8C8C8solid;
border-width:1px0px0px1px;
background:#F3F0F0;
margin-top:25px;
}
.td0{
border:#C8C8C8solid;
border-width:001px0;
}
.td2{
border:#C8C8C8solid;
border-width:01px1px0;
}
.barcon{
width:1000px;
margin:0auto;
text-align:center;
}
.barcon1{
font-size:17px;
float:left;
margin-top:20px;
}
.barcon2{
float:right;
}
.barcon2ul{
margin:20px0;
padding-left:0;
list-style:none;
text-align:center;
}
.barcon2li{
display:inline;
}
.barcon2a{
font-size:16px;
font-weight:normal;
display:inline-block;
padding:5px;
padding-top:0;
color:black;
border:1pxsolid#ddd;
background-color:#fff;
}
.barcon2a:hover{
background-color:#eee;
}
.ban{
opacity:.4;
}
</style>
</head>
<body>
<tablewidth="950"cellpadding="0"cellspacing="0"class="table2"align="center">
<thead>
<tr>
<tdcolspan="3"height="33"class="td0"></td>
<tdalign="center"class="td2"><ahref="###">添加用戶</a></td>
</tr>
<tralign="center">
<thwidth="150"height="33"class="td2">序號</th>
<thwidth="300"class="td2">用戶名</th>
<thwidth="250"class="td2">許可權</th>
<thwidth="250"class="td2">操作</th>
</tr>
</thead>
<tbodyid="adminTbody">
<tralign="center">
<tdclass="td2"height="33"width="150">1</td>
<tdclass="td2">admin</td>
<tdclass="td2">管理員</td>
<tdclass="td2"><ahref="###">修改</a></td>
</tr>
</tbody>
</table>
<divid="barcon"class="barcon">
<divid="barcon1"class="barcon1"></div>
<divid="barcon2"class="barcon2">
<ul>
<li><ahref="###"id="firstPage">首頁</a></li>
<li><ahref="###"id="prePage">上一頁</a></li>
<li><ahref="###"id="nextPage">下一頁</a></li>
<li><ahref="###"id="lastPage">尾頁</a></li>
<li><selectid="jumpWhere">
</select></li>
<li><ahref="###"id="jumpPage"onclick="jumpPage()">跳轉</a></li>
</ul>
</div>
</div>
<scriptsrc="jquery.js"></script>
<script>
/*動態生成用戶函數
num為生成的用戶數量
*/
functiondynamicAddUser(num){
for(vari=1;i<=num;i++)
{
vartrNode=document.createElement("tr");
$(trNode).attr("align","center");
//序號
vartdNodeNum=document.createElement("td");
$(tdNodeNum).html(i+1);
tdNodeNum.style.width="150px";
tdNodeNum.style.height="33px";
tdNodeNum.className="td2";
//用戶名
vartdNodeName=document.createElement("td");
$(tdNodeName).html("lzj"+i);
tdNodeName.style.width="300px";
tdNodeName.className="td2";
//許可權
vartdNodePri=document.createElement("td");
tdNodePri.style.width="250px";
tdNodePri.className="td2";
varpriText=document.createElement("span");
$(priText).css({"display":"inline-block","text-align":"center"});
$(priText).text("普通用戶");
tdNodePri.appendChild(priText);
//操作
vartdNodeOper=document.createElement("td");
tdNodeOper.style.width="170px";
tdNodeOper.className="td2";
vareditA=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);
vartempOption="";
for(vari=1;i<=totalPage;i++)
{
tempOption+='<optionvalue='+i+'>'+i+'</option>'
}
$("#jumpWhere").html(tempOption);
})
/**
*分頁函數
*pno--頁數
*psize--每頁顯示記錄數
*分頁部分是從真實數據行開始，因而存在加減某個常數，以確定真正的記錄數
*純js分頁實質是數據行全部載入，通過是否顯示屬性完成分頁功能
**/
varpageSize=0;//每頁顯示行數
varcurrentPage_=1;//當前頁全局變數，用於跳轉時判斷是否在相同頁，在就不跳，否則跳轉。
vartotalPage;//總頁數
functiongoPage(pno,psize){
varitable=document.getElementById("adminTbody");
varnum=itable.rows.length;//表格所有行數(所有記錄數)
pageSize=psize;//每頁顯示行數
//總共分幾頁
if(num/pageSize>parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
varcurrentPage=pno;//當前頁數
currentPage_=currentPage;
varstartRow=(currentPage-1)*pageSize+1;
varendRow=currentPage*pageSize;
endRow=(endRow>num)?num:endRow;
//遍歷顯示數據實現分頁
/*for(vari=1;i<(num+1);i++){
varirow=itable.rows[i-1];
if(i>=startRow&&i<=endRow){
irow.style.display="";
}else{
irow.style.display="none";
}
}*/
$("#adminTbodytr").hide();
for(vari=startRow-1;i<endRow;i++)
{
$("#adminTbodytr").eq(i).show();
}
vartempStr="共"+num+"條記錄分"+totalPage+"頁當前第"+currentPage+"頁";
document.getElementById("barcon1").innerHTML=tempStr;
if(currentPage>1){
$("#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(currentPage<totalPage){
$("#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);
}
functionjumpPage()
{
varnum=parseInt($("#jumpWhere").val());
if(num!=currentPage_)
{
goPage(num,pageSize);
}
}
</script>
</body>
</html>

❺ 怎樣用JS等前端程序對輸出的新聞內容進行分頁

把整個內容放在一個div里，用滾動條的形式顯示所有內容可以么

❻ ExtJs的Combobox採用的前端分頁，該怎麼做模糊過濾

2.0不熟悉，最直接的是看源代碼，看看怎麼過濾的，重載必要的代碼。
不改代碼的話，覺得可以先關閉分頁，pageSize=-1,然後過濾，然後再打開分頁

❼ angularjs2如何實現分頁

先給大家簡單介紹angular.js和bootstrap基本概念。AngularJS是一個JavaScript框架。它可通過標簽添加到HTML頁面。AngularJS通過指令擴展了HTML，且通過表達式綁定數據到HTML。Bootstrap，來自Twitter，是目前最受歡迎的前端框架。Bootstrap是基於HTML、CSS、JAVASCRIPT的，它簡潔靈活，使得Web開發更加快捷。最近一直學習Angular.js，在學習過程中也練習了很多的Demo，這里先貼一下表格+分頁。

❽ 用bootstrap的分頁符只能做出外觀並不能真正分頁如果想要分頁是否需要js文件如果需要請告訴我把

bootstrap框架自帶有分頁的樣式，你所要做的就是把服務端的分頁寫好，前端的js bootstrap已經封裝好了。

❾ js前端分頁，與後台無數據交互，寫一個json 文件然後$.getJSON（），把數據載入過來之後怎麼在前端分頁

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>分頁</title>
<styletype="text/css">
.grid{
width:400px;
}

.table{
width:100%;
text-align:center;
border:outset#efefef;
border-width:1px0px0px1px;
}
.tableth,td{
line-height:30px;
border:solid#efefef;
border-width:0px1px1px0px;
}
.tabletr{
width:100%;
margin:0auto;
border:none;
overflow:hidden;
color:#2981e4;
font:normal12px/100%"微軟雅黑","LucidaGrande","LucidaSans",Helvetica,Arial,Sans;
}

.no-content{
text-align:center;
line-height:36px;
color:red;
font:normal16px/100%"微軟雅黑","LucidaGrande","LucidaSans",Helvetica,Arial,Sans;
}

.pager{
padding-top:20px;
text-align:right;
line-height:36px;
color:blue;
font:normal12px/100%"微軟雅黑","LucidaGrande","LucidaSans",Helvetica,Arial,Sans;
}

.button,.button:visited{
background-color:#EFEFEF;
border:1pxsolid#d5d5d5;
background:#fff;
padding:2px6px;
margin:2px;
text-decoration:none;
cursor:pointer
}

.button:hover{
background-color:#2575cf;
color:#fff;
}
.button:active{
top:1px;
}

.no-page{
background-color:#EFEFEF;
cursor:default;
}

.pagerinput[type='text']{
width:20px;
color:#333;
padding:4px5px;
border:1pxsolid#e0ecff;
border-radius:2px;
-o-border-radius:2px;
-moz-border-radius:2px;
-wekit-border-radius:2px;
box-shadow:0002pxrgba(255,255,255,0.2);
-o-box-shadow:0002pxrgba(255,255,255,0.2);
-webkit-box-shadow:0002pxrgba(255,255,255,0.2);
-moz-box-shadow:0002pxrgba(255,255,255,0.2);
behavior:url(/PIE.htc);
}
.pagerinput[type='text']:focus,.tableinput[type='text']:hover{
border:1pxsolid#3aa2d0;
outline:none;
}

</style>
</head>
<body>
<divclass="grid">
<divid="content">

</div>
<divid="pager">

</div>
</div>
</body>
</html>
<scripttype="text/javascript">
varjsonData=[];

//生成靜態數據
functiongetJsonData(size){
vardatas=[];
for(varidx=0;idx<size;idx++){
datas.push({
account:"Account_"+idx,
userName:"用戶_"+idx,
gender:(idx%2==1?"男":"女"),
salary:parseInt(Math.random(idx%50)*10000)+5000
});
}
returndatas;
}

//獲取當前頁數據
functionquery(cur,size){
varbegin=(cur-1)*size;
varend=cur*size;
returnjsonData.slice(begin,end);
}


window.onload=function(){
//獲取JSON數據
jsonData=getJsonData(555);
//載入數據
pageTo(10,1);
};

//載入表格
functionpageTo(pageSize,curPage){
vardataSize=jsonData.length;
if(dataSize==0){
content.innerHTML="<spanclass='no-content'>沒有查詢到任何數據！</span>";
return;
}
vartotalPage=Math.ceil(dataSize/pageSize);
//table
vardatas=query(curPage,pageSize);
varhtml="<h3>員工信息表</h3><tableclass='table'>";
for(varindex=0;index<datas.length;index++){
vardata=datas[index];
html=html+"<tr>";
html=html+"<td>"+(data.account||'')+"</td>";
html=html+"<td>"+(data.userName||'')+"</td>";
html=html+"<td>"+(data.gender||'')+"</td>";
html=html+"<td>"+(data.salary||'')+"</td>";
html=html+"</tr>";
}
html=html+"</table>";
content.innerHTML=html;
//pager
varphtml="<divclass='pager'>";
if(curPage==1){
phtml=phtml+"<ahref='#'class='buttonno-page'>上一頁</a>";
}else{
phtml=phtml+"<ahref='#'class='button'onclick='pageTo("+pageSize+","+(curPage-1)+");'>上一頁</a>";
}
phtml=phtml+"<inputtype='text'value='"+curPage+"'onkeypress='goto(this,"+pageSize+");'>";
if(curPage==totalPage){
phtml=phtml+"<ahref='#'class='buttonno-page'>下一頁</a>";
}else{
phtml=phtml+"<ahref='#'class='button'onclick='pageTo("+pageSize+","+(curPage+1)+");'>下一頁</a>";
}
phtml=phtml+"&nbsp;共"+totalPage+"頁,"+dataSize+"條記錄</div>";
pager.innerHTML=phtml;
}

//回車跳轉，注意控制輸入數字：此處未處理
functiongoto(obj,pageSize){
if(event.keyCode==13){
pageTo(pageSize,parseInt(obj.value));
}
}

</script>

大體思路如上

❿ web分頁中嵌套分頁怎麼解決傳值丟失 HTTP Status 500 java.lang.NullPointerException

web分頁嵌套分頁？？
可以使用前端分頁進行分頁，就是假設載入100條數據，但是不顯示全部，然後直接存在js變數中，用js進行DOM操作。也可以用直接的插件。
如果是用後台進行分頁的，傳GET值到後台，比如鏈接後加&page=10，則後台接受10，然後看你一頁多少數據。資料庫用limit (page-1)*15 page*15 可以資料庫分頁（Mysql）其他資料庫可以自己去查下語句。

js前端分頁

與js前端分頁相關的內容