Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Menggunakan jquery untuk melaksanakan data pertanyaan paging
Menggunakan jquery untuk melaksanakan data pertanyaan paging
- 王林asal
- 2023-05-14 12:32:38976semak imbas
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>分页查询数据示例</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() {
// 显示第一页数据和分页控件
getDataWithPage(1);
generatePaging(1);
// 为分页控件上的按钮添加事件监听器
$('#paging').on('click', '.page-btn', function() {
var page = parseInt($(this).data('page'));
getDataWithPage(page);
generatePaging(page);
});
});
</script>
</body>
</html>/*
* 分页查询数据相关的 JavaScript 函数
*/
var PAGE_SIZE = 10; // 每页显示的记录数
var TOTAL_PAGES = 20; // 总页数（假设为 20）
// 向后台发送异步请求，获取指定页码的数据，并将其显示在指定的 DIV 元素中
function getDataWithPage(page) {
var startIndex = (page - 1) * PAGE_SIZE + 1;
var endIndex = startIndex + PAGE_SIZE - 1;
$.ajax({
url: 'data.php', // 后台数据接口 URL
method: 'GET',
data: {
startIndex: startIndex,
endIndex: endIndex
},
success: function(data) {
// 将获取到的数据显示在指定的 DIV 元素中
$('#data').html(data);
},
error: function() {
alert('获取数据失败');
}
});
}
// 生成分页控件，并为分页控件的每个按钮设置事件监听器
function generatePaging(currentPage) {
var pagingHTML = '<ul>';
if (currentPage == 1) {
pagingHTML += '<li><span class="disabled">上一页</span></li>';
} else {
pagingHTML += '<li><a href="javascript:void(0);" class="page-btn" data-page="' + (currentPage - 1) + '">上一页</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">下一页</span></li>';
} else {
pagingHTML += '<li><a href="javascript:void(0);" class="page-btn" data-page="' + (currentPage + 1) + '">下一页</a></li>';
}
pagingHTML += '</ul>';
$('#paging').html(pagingHTML);
}/*
* 分页控件相关的 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!