js alat paging example_javascript kemahiran

Contoh dalam artikel ini menerangkan penggunaan alat halaman js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

bahagian kod js:

Salin kod Kod adalah seperti berikut:

/**
* Penomboran js
,*/ 
var Halaman; 
 
(fungsi(){ 
        var Halaman = {versi:"1.0",pengarang:"liuxingmi"}; 
        var showPage = 9; 
        Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){ 
            var nav = '

'; 
                   nav = '
• 总记录数：' totalRecord '
'; 
                   nav = '
• 总页数：' jumlahHalaman '
'; 
                   nav = '
• 当前页：' Halaman semasa '
'; 
                   if(currentPage == 1){ 
                       nav = '
• 首页
'; 
                       nav = '
• 前一页
'; 
                   } lain {                     
                       nav = '
• 首页
'; 
                       nav = '
• 前一页
'; 
                   } 
                   nav = '
• '; 
                           var start = currentPage - Math.floor(showPage/2); 
                           var end = currentPage Math.floor(showPage/2);
                           if(end > totalPage){ 
                               mula -= (akhir - totalPage); 
                           } 
                            
                           jika(mula <= 0){ 
                               mula = 1;  
                           } 
                           if(currentPage < showPage && end < showPage){ 
                              akhir = ShowPage;   
                           } 
                            
                           if(end > totalPage){ 
                               akhir = jumlahHalaman; 
                           } 
                           untuk(var i = mula; i <= tamat; i ){ 
                               if(i == Halaman semasa){ 
                                   nav = '
  1. ' i '
  '; 
                               } lain {                                 
                                   nav = '
  2. ' i '
  '; 
                               } 
                           } 
                            
                           nav = '
'; 
                         if(currentPage == jumlahHalaman){ 
                             nav = '
• 后一页
'; 
                             nav ='
• 尾页'; 
                           } lain { 
  nav = '
• Next PageHalaman< ;/a>
'; nav ='
• Last Page';
                                                                                                                                                                                                                                            nav = '

';
              $("#" divId).html(nav);                                                                 };                                This.Page = Halaman; })();



bahagian css:

Salin kod

Kod adalah seperti berikut:/*Gaya pemecah halaman bermula*/ .penomboran{ limpahan:tersembunyi; jidar:0 0 0 25px padding:10px 10px 6px 150px;

atas sempadan:1px pepejal #c8c8c8; _zoom:1;

penjajaran teks: tengah
}
.penomboran *{
paparan:sebaris; float:left; jidar:0;
pelapik:0; saiz fon: 12px; }
.penomboran i{
float:none; padding-right:1px;
}
.currentPage b{
float:none; warna:#f00;
}
.penomboran li{
gaya senarai:tiada; jidar:0 5px;
}
.penomboran li li{
jawatan:saudara; jidar:-2px 0 0; font-family: Arial, Helvetica, sans-serif
}
.Halaman pertama a,.Halaman sebelumnya a,.Halaman seterusnya a,.Halaman terakhir a{
limpahan:tersembunyi; ketinggian:0;
inden teks:-9999em; atas sempadan:8px pepejal #fff; sempadan-bawah: 8px pepejal #fff; }
.penomboran li li a{
jidar:0 1px; padding:0 4px;
sempadan:3px ganda #fff; warna sempadan:#eee;
latar belakang:#eee;
warna:#06f;
text-decoration:none; }
.penomboran li li a:legar{
latar belakang:#f60;
warna sempadan:#fff;
warna sempadan:#f60;
warna:#fff;
}
li.halaman pertama{
jidar-kiri:40px;
sempadan-kiri:3px pepejal #06f; }
.halaman pertama a,.halaman sebelumnya a{
sempadan-kanan: 12px pepejal #06f; }
.firstPage a:hover,.previousPage a:hover{
warna sempadan-kanan: #f60; }
.Halaman seterusnya a,.Halaman terakhir a{
sempadan-kiri:12px pepejal #06f; }
.nextPage a:hover,.lastPage a:hover{
warna sempadan-kiri:#f60; }
.penomboran li.LastPage{
sempadan-kanan: 3px pepejal #06f
}
.penomboran li li.currentState a{
jawatan:saudara; jidar:-1px 3px;
padding:1px 4px;
sempadan:3px ganda #fff; warna sempadan:#f60; latar belakang:#f60;
warna:#fff;
}
.penomboran li.currentState,.currentState a,.currentState a:legar{
warna sempadan:#fff #ccc; kursor: lalai;
}
/*Tamat gaya paging*/



Kaedah panggilan:






Salin kod


Kod adalah seperti berikut:

Page.navigation("pageNav", 100, 10, 1, "xxxList");

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.