jQuery senarai kod penomboran dengan fungsi lompat carian

Ini adalah kod paging jQuery yang sangat praktikal yang boleh menetapkan bilangan berbilang senarai dan mempunyai fungsi lompat carian paging.
kod js
<script> var page = 1; var limit = 10; var sumPage = 6; var size = 28; $(function(){ page = parseInt(page); limit = parseInt(limit); //防止页码出现字符串,转换类型 loadClass(); setPageMsg(); initPage(); $("#pageLt").find("a").unbind("click").click(function(){ $("#pageLt").find("a").removeClass("active"); $(this).addClass("active"); limit = parseInt($(this).text()); // 分页执行的fun }); }); function loadClass(){ if(limit == 10){ $("#pageLt").find("a").removeClass("active"); $("#pageLt").find("a").eq(0).addClass("active"); }else if(limit == 20){ $("#pageLt").find("a").removeClass("active"); $("#pageLt").find("a").eq(1).addClass("active"); }else if(limit == 30){ $("#pageLt").find("a").removeClass("active"); $("#pageLt").find("a").eq(2).addClass("active"); }else if(limit == 40){ $("#pageLt").find("a").removeClass("active"); $("#pageLt").find("a").eq(3).addClass("active"); } } /** 初始化分页控件 **/ function initPage(){ $(".down_page").click(function(){ //上一页 if(page != 1){ page = page - 1; $("#nowPage").text(page); // 分页执行的fun }else{ alert("已经是第一页了","warning"); } }); $(".up_page").click(function(){ //下一页 if(page < parseInt(sumPage)){ page = page + 1; $("#nowPage").text(page); // 分页执行的fun }else{ alert("已经是最后一页了","warning"); } }); $(".jump_page").click(function(){ var pageNum = $("#pageNum").val(); if(parseInt(pageNum) <= parseInt(sumPage)){ page = parseInt(pageNum); $("#nowPage").text(page); // 分页执行的fun }else{ alert("页数不能大于总页数","warning"); } }); } function setPageMsg(){ $("#count").text(size); $("#nowPage").text(page); $("#allPage").text(""+sumPage+"页"); } </script>
Jquery adalah salah satu teknologi penting yang diperlukan untuk pengaturcaraan web. Jquery ialah satu lagi rangka kerja Javascrīpt yang sangat baik selepas prototaip Ia adalah perpustakaan js ringan yang serasi dengan CSS3 dan pelbagai pelayar. jQuery membolehkan pengguna memproses dokumen dan acara HTML dengan lebih mudah, melaksanakan kesan animasi, dan menyediakan interaksi AJAX dengan mudah untuk tapak web. Satu lagi kelebihan besar jQuery ialah dokumentasinya sangat lengkap dan pelbagai aplikasinya dijelaskan secara terperinci Terdapat juga banyak pemalam matang untuk dipilih. jQuery boleh memisahkan kod dan kandungan HTML halaman HTML pengguna, maksudnya, tidak perlu memasukkan sekumpulan js dalam HTML untuk memanggil arahan.
Semua sumber di laman web ini disumbangkan oleh netizen atau dicetak semula oleh tapak muat turun utama. Sila semak integriti perisian itu sendiri! Semua sumber di laman web ini adalah untuk rujukan pembelajaran sahaja. Tolong jangan gunakannya untuk tujuan komersial. Jika tidak, anda akan bertanggungjawab untuk semua akibat! Jika terdapat sebarang pelanggaran, sila hubungi kami untuk memadamkannya. Maklumat hubungan: admin@php.cn
Artikel Berkaitan

03 Dec 2024
jQuery $(document).ready dan UpdatePanels: Pandangan Yang DiperhalusiApabila menggunakan jQuery untuk menggunakan kesan tetikus pada elemen dalam UpdatePanel,...

24 Nov 2024
Membina Peluncur Imej jQuery Mudah dengan Kesan Gelongsor dan KelegapanMembuat peluncur imej tersuai dalam jQuery tanpa bergantung pada pemalam luaran...

24 Nov 2024
Permudahkan Penciptaan Peluncur Imej jQuery dengan Kesan Pudar atau SlaidSama ada anda seorang pembangun yang berpengalaman atau baru bermula dengan jQuery, kraf...

03 Nov 2024
Dari Mana Untuk Memasukkan jQuery: Meneroka Pilihan dan Kesan Apabila ia datang untuk memasukkan jQuery ke dalam laman web anda, persoalan timbul: yang...

27 Sep 2022
Pemalam jquery bermaksud "pemalam jquery", iaitu beberapa alat yang ditulis oleh pembangun menggunakan jquery Ia boleh difahami sebagai fungsi atau kesan khas yang dirangkumkan oleh jQuery, hanya sejumlah kecil kod yang diperlukan untuk mencapai hasil yang baik. Kesan. Tujuan menulis pemalam jquery adalah terutamanya untuk merangkum satu siri kaedah atau fungsi sedia ada supaya ia boleh digunakan semula di tempat lain untuk memudahkan penyelenggaraan kemudian dan meningkatkan kecekapan pembangunan.

01 Dec 2021
Cara untuk mencapai kesan karusel dengan jquery: 1. Ikat tetikus ke atas dan biarkan pemprosesan acara melalui kaedah hover() jquery 2. Ikat pemprosesan acara klik tetikus melalui kaedah bind() jquery untuk membalik-balikkan.

17 Nov 2021
Cara menambah 1 suka dengan jQuery: 1. Import jquery; 2. Tetapkan kod HTML dan CSS 3. Hantar kod "$(".liker"). Kaedahnya adalah untuk mencapai kesan menambah 1 suka.

17 Nov 2024
Kesan Perubahan Kandungan Elemen DOM dalam jQuerySementara fungsi change() jQuery memantau perubahan dalam elemen bentuk secara berkesan, mengesan kandungan...

09 Sep 2022
Tukar kandungan halaman tab berdasarkan garis masa? Artikel berikut akan memperkenalkan kepada anda cara melaksanakan kesan penukaran tab garis masa jquery digabungkan dengan swiper untuk mencapai kesan paparan gelongsor saya harap ia akan membantu anda!


Hot Tools

jQuery2019 Kesan Khas Animasi Bunga Api Pengakuan Hari Valentine
Kesan khas animasi bunga api pengakuan Hari Valentine jQuery yang sangat popular pada Douyin, sesuai untuk pengaturcara dan pakar teknikal untuk menyatakan cinta mereka kepada gadis yang mereka cintai Tidak kira anda suka atau tidak, anda perlu bersetuju pada akhirnya.

templat antara muka log masuk animasi responsif layui
templat antara muka log masuk animasi responsif layui

520 Kesan khas animasi web pengakuan Hari Valentine
jQuery Animasi Pengakuan Hari Valentine, Animasi Latar Belakang 520 Pengakuan

Halaman log masuk sistem yang keren
Halaman log masuk sistem yang keren

Pemain muzik pita HTML5-CASSETTE PLAYER
Pemain muzik pita HTML5-CASSETTE PLAYER
