Das Beispiel in diesem Artikel beschreibt, wie jQuery Pseudo-Paging implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Sie können Pseudo-Paging für Tabellendaten durchführen und müssen dazu nur einfachen Code ausführen.
Die Implementierung ist sehr einfach und der Stil sieht nicht sehr gut aus. Sie können ihn selbst anpassen und korrigieren.
Das Folgende ist eine Tabelle. TR-Daten werden in den Tbody geladen, egal wie Sie sie laden,
Nachdem die Daten geladen wurden, können Sie ein Pseudo-Paging für die Tabellendaten durchführen. Achten Sie auf die von mir ausgefüllten Daten, sodass colspan zum td hinzugefügt wird der Paging-Anzeigebereich
<table>
<tbody id="dialog-items">
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div id="maskPage" class="page_btn">
</div>
</td>
</tr>
</tfoot>
</table>
Im Folgenden sind CSS- und JS-Methoden aufgeführt
.page_btn{padding-top:0px;}
.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}
.page_box{float:right;}
.num{padding:0 10px;}
Die js-Methode ist wie folgt
//对tbody伪分页；pageDiv：用于显示分页数据的div tbodyId :tbody的ID，pageSize，分页数目
function pagiNation(pageDiv,tbodyId,pageSize){
$("#"+tbodyId+" tr:gt("+(pageSize-1)+")").hide();//初始化，前面pageSize-1条数据显示，其他的数据隐藏。
var total_q=$("#"+tbodyId+" tr").length;//总数据
var current_page=pageSize;//每页显示的数据
var current_num=1;//当前页数
var total_page= Math.ceil(parseFloat(total_q)/parseFloat(current_page));//总页数
var pagePlugIn = "<span class=\"page_box\">"+
"<a id=\""+tbodyId+"_prev\" class=\"prev\">上一页</a>"+
"<span id=\""+tbodyId+"_num\" class=\"num\">"+
"<span id=\""+tbodyId+"_current_page\" class=\"current_page\">1</span>"+
"<span style=\"padding:0 3px;\">/</span>"+
"<span id=\""+tbodyId+"_total\" class=\"total\"></span></span>"+
"<a id=\""+tbodyId+"_next\" class=\"next\">下一页</a>"+
"</span>";
$("#"+pageDiv+"").html(pagePlugIn);
var next=$("#"+tbodyId+"_next");//下一页
var prev=$("#"+tbodyId+"_prev");//上一页
$("#"+tbodyId+"_total").text("");//显示总页数
$("#"+tbodyId+"_total").text(total_page);//显示总页数
$("#"+tbodyId+"_current_page").text("");//当前的页数
$("#"+tbodyId+"_current_page").text(current_num);//当前的页数
//下一页
$("#"+tbodyId+"_next").unbind("click");
$("#"+tbodyId+"_next").click(function(){
if(current_num==total_page){
return false;//如果大于总页数就禁用下一页
}
else{
$("#"+tbodyId+"_current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
$.each($("#"+tbodyId+" tr"),function(index,item){
var start = current_page* (current_num-1);//起始范围
var end = current_page * current_num;//结束范围
if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐
$(this).show();
}else {
$(this).hide();
}
});
}
});
//上一页方法
$("#"+tbodyId+"_prev").unbind("click");
$("#"+tbodyId+"_prev").click(function(){
if(current_num==1){
return false;
}else{
$("#"+tbodyId+"_current_page").text(--current_num);
$.each($("#"+tbodyId+" tr"),function(index,item){
var start = current_page* (current_num-1);//起始范围
var end = current_page * current_num;//结束范围
if(index >= start && index < end){//如果索引值是start和end之间的元素就显示，否则就隐藏
$(this).show();
}else {
$(this).hide();
}
});
}
})
$("#"+pageDiv+"").show();
}
Die Seite verweist auf CSS und JS. Nach dem Laden der Daten
function fillTabl(){
......................
数据填充.............
..........................
pagiNation('maskPage','dialog-items',10); //传入div的id,tbody的id,还有分页数
}
Der Effekt ist wie folgt:
Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der JQuery-Erweiterungsfähigkeiten“, „Zusammenfassung allgemeiner klassischer jQuery-Spezialeffekte“ , „Zusammenfassung gängiger jQuery-Plug-ins und deren Verwendung“, „Zusammenfassung der Ajax-Nutzung in jquery“ und „Zusammenfassung gängiger Kenntnisse im Umgang mit jQuery“
Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.
