


Dengan pembangunan berterusan teknologi web, semakin banyak laman web perlu menyokong fungsi pertanyaan data paging. jQuery ialah perpustakaan JavaScript yang sangat popular yang boleh membantu pembangun mengendalikan DOM, acara, animasi, dsb. dengan lebih mudah, jadi menggunakan jQuery untuk melaksanakan data pertanyaan halaman adalah pilihan yang baik.
Artikel ini akan memperkenalkan prinsip asas, langkah dan kaedah pelaksanaan kod menggunakan jQuery untuk melaksanakan data pertanyaan halaman dan memberikan contoh mudah untuk rujukan pembaca.
1. Prinsip Asas
Prinsip asas menggunakan jQuery untuk melaksanakan data pertanyaan paging adalah untuk menghantar permintaan tak segerak ke latar belakang melalui teknologi AJAX, mendapatkan data yang perlu dipaparkan, dan memaparkannya pada halaman. Semasa proses pelaksanaan, teknologi berikut perlu digunakan:
- Teknologi AJAX: Gunakan kaedah AJAX jQuery untuk menghantar permintaan tak segerak ke latar belakang untuk mendapatkan data yang perlu dipaparkan.
- Algoritma halaman: Kira data yang perlu dipaparkan di latar belakang, dan kemudian tentukan kedudukan permulaan dan kuantiti data yang perlu dipaparkan berdasarkan nombor halaman semasa dan bilangan rekod yang dipaparkan pada setiap muka surat.
- HTML, CSS dan JavaScript: Gunakan jQuery untuk mengendalikan elemen DOM, menjana kawalan halaman secara dinamik dan melaksanakan fungsi halaman.
2. Langkah
Berikut ialah langkah asas untuk menggunakan jQuery untuk melaksanakan data pertanyaan paging:
- Tentukan elemen DIV untuk memaparkan data yang perlu disoal data dan tetapkan ID untuk elemen.
- Tentukan fungsi JavaScript untuk menghantar permintaan tak segerak ke latar belakang dan memaparkan data yang diperoleh dalam elemen DIV yang ditentukan.
- Tentukan fungsi JavaScript untuk menjana kawalan halaman dan tetapkan pendengar acara untuk setiap butang kawalan halaman.
- Selepas halaman dimuatkan, panggil dua fungsi di atas untuk memaparkan data dan kawalan halaman halaman pertama.
- Apabila pengguna mengklik butang pada kawalan halaman, panggil fungsi pertama untuk mendapatkan data nombor halaman yang ditentukan dan memaparkannya dalam elemen DIV yang ditentukan.
3. Pelaksanaan Kod
Berikut ialah contoh kod ringkas menggunakan jQuery untuk melaksanakan data pertanyaan halaman:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分頁(yè)查詢數(shù)據(jù)示例</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="paging.js"></script> <link rel="stylesheet" href="paging.css"> </head> <body> <div id="data"></div> <div id="paging"></div> <script> $(document).ready(function() { // 顯示第一頁(yè)數(shù)據(jù)和分頁(yè)控件 getDataWithPage(1); generatePaging(1); // 為分頁(yè)控件上的按鈕添加事件監(jiān)聽器 $('#paging').on('click', '.page-btn', function() { var page = parseInt($(this).data('page')); getDataWithPage(page); generatePaging(page); }); }); </script> </body> </html>
/* * 分頁(yè)查詢數(shù)據(jù)相關(guān)的 JavaScript 函數(shù) */ var PAGE_SIZE = 10; // 每頁(yè)顯示的記錄數(shù) var TOTAL_PAGES = 20; // 總頁(yè)數(shù)(假設(shè)為 20) // 向后臺(tái)發(fā)送異步請(qǐng)求,獲取指定頁(yè)碼的數(shù)據(jù),并將其顯示在指定的 DIV 元素中 function getDataWithPage(page) { var startIndex = (page - 1) * PAGE_SIZE + 1; var endIndex = startIndex + PAGE_SIZE - 1; $.ajax({ url: 'data.php', // 后臺(tái)數(shù)據(jù)接口 URL method: 'GET', data: { startIndex: startIndex, endIndex: endIndex }, success: function(data) { // 將獲取到的數(shù)據(jù)顯示在指定的 DIV 元素中 $('#data').html(data); }, error: function() { alert('獲取數(shù)據(jù)失敗'); } }); } // 生成分頁(yè)控件,并為分頁(yè)控件的每個(gè)按鈕設(shè)置事件監(jiān)聽器 function generatePaging(currentPage) { var pagingHTML = '<ul>'; if (currentPage == 1) { pagingHTML += '<li><span class="disabled">上一頁(yè)</span></li>'; } else { pagingHTML += '<li><a href="javascript:void(0);" class="page-btn" data-page="' + (currentPage - 1) + '">上一頁(yè)</a></li>'; } for (var i = 1; i <= TOTAL_PAGES; i++) { if (i === currentPage) { pagingHTML += '<li><span class="current">' + i + '</span></li>'; } else { pagingHTML += '<li><a href="javascript:void(0);" class="page-btn" data-page="' + i + '">' + i + '</a></li>'; } } if (currentPage == TOTAL_PAGES) { pagingHTML += '<li><span class="disabled">下一頁(yè)</span></li>'; } else { pagingHTML += '<li><a href="javascript:void(0);" class="page-btn" data-page="' + (currentPage + 1) + '">下一頁(yè)</a></li>'; } pagingHTML += '</ul>'; $('#paging').html(pagingHTML); }
/* * 分頁(yè)控件相關(guān)的 CSS 樣式 */ #paging ul { margin: 0; padding: 0; list-style-type: none; } #paging ul li { display: inline-block; margin: 0 5px; padding: 0; } #paging ul li span { display: inline-block; padding: 5px 15px; border: 1px solid #ddd; background-color: #fff; color: #333; cursor: default; } #paging ul li a { display: inline-block; padding: 5px 15px; border: 1px solid #ddd; background-color: #fff; color: #333; text-decoration: none; } #paging ul li a:hover { background-color: #f5f5f5; } #paging ul li .current { display: inline-block; padding: 5px 15px; border: 1px solid #ddd; background-color: #f5f5f5; color: #333; cursor: default; } #paging ul li .disabled { display: inline-block; padding: 5px 15px; border: 1px solid #ddd; background-color: #fff; color: #bbb; cursor: default; }
Perlu diambil perhatian bahawa kod di atas ialah a Contoh mudah, yang perlu diselaraskan dan dioptimumkan mengikut keadaan sebenar dalam aplikasi sebenar. Pada masa yang sama, ia juga perlu memastikan operasi normal dan keselamatan data antara muka data latar belakang untuk mengelakkan suntikan SQL dan serangan lain.
Atas ialah kandungan terperinci Menggunakan jquery untuk melaksanakan data pertanyaan paging. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

React sendiri tidak secara langsung menguruskan fokus atau kebolehcapaian, tetapi menyediakan alat untuk menangani isu -isu ini dengan berkesan. 1. Gunakan ref untuk mengurus fokus secara programatik, seperti menetapkan fokus elemen melalui useref; 2. Gunakan atribut ARIA untuk meningkatkan kebolehcapaian, seperti menentukan struktur dan keadaan komponen tab; 3. Beri perhatian kepada navigasi papan kekunci untuk memastikan logik fokus dalam komponen seperti kotak modal adalah jelas; 4. Cuba gunakan elemen HTML asli untuk mengurangkan beban kerja dan risiko ralat pelaksanaan tersuai; 5. React membantu kebolehcapaian dengan mengawal DOM dan menambah atribut ARIA, tetapi penggunaan yang betul masih bergantung kepada pemaju.

WebAssembly (WASM) isagame-changerforfront-enddevelopersseekinghigh-performanceWebapplications.1.wasmisabinaryInstructionFatThatRunsatnear-nativespeed, enablinglanguageslikerust, c, andgoexecuteinthebrowser.2.itreBrowser.2.itreBrowser.2

Server-siderendering (ssr) innext.jsgenerateshtmlontheserverforachrequest, InfrovingPormanceAndSeo.1.ssrisidealfordynamiccontentthatchangesfrequents, suchasuserdashboard

Kemas kini yang tidak berubah adalah penting dalam bertindak balas kerana ia memastikan bahawa perubahan keadaan dapat dikesan dengan betul, mencetuskan komponen komponen dan mengelakkan kesan sampingan. Secara langsung mengubah keadaan, seperti push atau tugasan, akan menyebabkan reaksi tidak dapat mengesan perubahan. Cara yang betul untuk melakukan ini adalah untuk membuat objek baru dan bukannya objek lama, seperti mengemas kini array atau objek menggunakan pengendali Expand. Untuk struktur bersarang, anda perlu menyalin lapisan mengikut lapisan dan mengubahsuai hanya bahagian sasaran, seperti menggunakan pengendali pengembangan berganda untuk menangani atribut yang mendalam. Operasi biasa termasuk mengemas kini elemen array dengan peta, memadam elemen dengan penapis, menambah elemen dengan kepingan atau pengembangan. Perpustakaan alat seperti Immer dapat memudahkan proses, yang membolehkan "seolah -olah" untuk mengubah keadaan asal tetapi menjana salinan baru, tetapi meningkatkan kerumitan projek. Petua utama termasuk masing -masing

Front-end applications should set security headers to improve security, including: 1. Configure basic security headers such as CSP to prevent XSS, X-Content-Type-Options to prevent MIME guessing, X-Frame-Options to prevent click hijacking, X-XSS-Protection to disable old filters, HSTS to force HTTPS; 2. Tetapan CSP harus dielakkan menggunakan garis yang tidak selamat dan tidak selamat, gunakan nonce atau hash dan membolehkan ujian mod pelaporan; 3. Pengepala yang berkaitan dengan HTTPS termasuk permintaan peningkatan automatik HSTS dan dasar perujuk untuk mengawal rujukan; 4. Tajuk lain yang disyorkan seperti Permis

Menambah laman web Favicon memerlukan menyediakan fail ikon, meletakkan laluan yang betul dan memetiknya. 1. Sediakan ikon berbilang saiz .ico atau .png, yang boleh dihasilkan oleh alat dalam talian; 2. Letakkan favicon.ico dalam direktori akar laman web; 3. Jika anda perlu menyesuaikan jalan atau menyokong lebih banyak peranti, anda perlu menambah rujukan tag pautan di htmlhead; 4. Kosongkan cache atau gunakan alat untuk memeriksa sama ada ia berkesan.

Atribut data-* digunakan dalam HTML untuk menyimpan data tambahan, dan kelebihannya termasuk data yang berkait rapat dengan unsur-unsur dan mematuhi piawaian HTML5. 1. Apabila menggunakannya, namakan ia bermula dengan data, seperti data-produk-id; 2. Ia boleh diakses melalui getattribute atau dataset JavaScript; 3. Amalan terbaik termasuk mengelakkan maklumat sensitif, penamaan yang munasabah, memberi perhatian kepada prestasi dan tidak menggantikan pengurusan negeri.

Untuk gaya SVG menggunakan CSS, anda perlu menanamkan SVG secara langsung ke HTML untuk kawalan halus. 1. SVG inline membolehkan unsur -unsur dalamannya seperti atau dipilih secara langsung melalui CSS dan untuk menggunakan gaya, manakala SVG luaran hanya menyokong gaya global seperti lebar dan ketinggian atau penapis. 2. Gunakan sintaks CSS biasa seperti .class: hover untuk mencapai kesan interaktif, tetapi gunakan mengisi bukan warna untuk mengawal warna, dan gunakan strok dan lebar strok untuk mengawal garis besar. 3. Gunakan nama kelas untuk menyusun gaya untuk mengelakkan pertindihan dan memberi perhatian kepada penamaan konflik dan pengurusan skop. 4. Gaya SVG boleh diwarisi dari halaman, dan boleh diset semula melalui svg*{isi: none; stroke: none;} untuk mengelakkan
