jq分页加载数据库_html jq分页_jq实现html分页 - 腾讯云开发者社区

jq分页加载数据库

基础概念

jq 是一个轻量级的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。分页加载数据库是指将大量数据分成多个页面进行加载，以提高用户体验和系统性能。

类型

前端分页：数据全部加载到前端，通过 JavaScript 进行分页显示。
后端分页：每次请求只加载当前页的数据，减轻前端负担。

应用场景

适用于数据量较大的网站或应用，如新闻网站、电商网站、社交平台等。

示例代码

以下是一个简单的后端分页加载数据库的示例，假设使用 Node.js 和 Express 框架，数据库使用 MongoDB。

后端代码（Node.js + Express）

const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 3000;

// 连接 MongoDB 数据库
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义数据模型
const Item = mongoose.model('Item', { name: String, description: String });

// 分页加载数据
app.get('/items', async (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const limit = parseInt(req.query.limit) || 10;

  try {
    const items = await Item.find()
      .skip((page - 1) * limit)
      .limit(limit);
    res.json(items);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

前端代码（HTML + jQuery）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分页加载示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <ul id="item-list"></ul>
  <button id="load-more">加载更多</button>

  <script>
    let currentPage = 1;
    const limit = 10;

    function loadItems(page) {
      $.get(`/items?page=${page}&limit=${limit}`, (data) => {
        data.forEach(item => {
          $('#item-list').append(`<li>${item.name} - ${item.description}</li>`);
        });
      });
    }

    $('#load-more').click(() => {
      currentPage++;
      loadItems(currentPage);
    });

    // 初始加载第一页数据
    loadItems(currentPage);
  </script>
</body>
</html>