Bootstrap Table 获取数据库数据
简介
在现代Web开发中，表格是展示数据的一种非常常见的方式，Bootstrap Table是一个流行的基于Bootstrap的jQuery插件，用于创建动态和交互式的数据表格，本文将介绍如何使用Bootstrap Table从数据库获取数据并展示在网页上。
准备工作
安装必要的软件和库
1、Node.js：用于运行服务器端代码。
2、Express：一个简洁而灵活的Node.js Web应用框架，提供了一系列强大的功能来开发Web和移动应用。
3、MySQL：一个流行的开源关系型数据库管理系统。
4、mysql：Node.js的MySQL客户端库，用于与MySQL数据库进行交互。
5、jQuery：一个快速、小巧的JavaScript库，用于简化HTML文档遍历、事件处理、动画和Ajax交互。
6、bootstrap-table：Bootstrap的扩展，用于创建响应式的数据表。
创建项目结构
mkdir my-bootstrap-table-project cd my-bootstrap-table-project npm init -y npm install express mysql jquery bootstrap-table --save
设置数据库
假设我们使用的是MySQL数据库，首先创建一个新数据库和一个表。
创建数据库
CREATE DATABASE mydatabase; USE mydatabase;
创建表
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
age INT NOT NULL
);
插入示例数据
INSERT INTO users (name, email, age) VALUES
('John Doe', 'john@example.com', 30),
('Jane Smith', 'jane@example.com', 25),
('Mike Johnson', 'mike@example.com', 35);
编写服务器端代码
使用Express框架创建一个简单的服务器，并连接到MySQL数据库。
创建`server.js`文件
const express = require('express');
const mysql = require('mysql');
const app = express();
const port = 3000;
// 配置MySQL连接
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'mydatabase'
});
connection.connect(err => {
if (err) throw err;
console.log('Connected to the database.');
});
// 设置静态文件目录
app.use(express.static('public'));
// API端点，用于获取用户数据
app.get('/api/users', (req, res) => {
connection.query('SELECT * FROM users', (err, results) => {
if (err) throw err;
res.json(results);
});
});
app.listen(port, () => {
console.log(Server is running on http://localhost:${port});
});
编写前端代码
使用Bootstrap Table插件来展示从服务器获取的数据。
创建public/index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Table Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css">
</head>
<body>
<div class="container mt-5">
<h1>Bootstrap Table Example</h1>
<table id="usersTable" data-toggle="table" data-url="/api/users" data-pagination="true" data-search="true" class="table table-bordered">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="email">Email</th>
<th data-field="age">Age</th>
</tr>
</thead>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
</body>
</html>
解释代码
1、引入必要的CSS和JS文件：包括Bootstrap和Bootstrap Table的CSS文件，以及jQuery和Bootstrap的JS文件。
2、创建表格：使用data-toggle="table"属性初始化Bootstrap Table插件，并通过data-url属性指定API端点。data-pagination="true"和data-search="true"启用分页和搜索功能。
3、定义表头：使用<th>标签定义表格的列名，并通过data-field属性指定对应的数据字段。
运行项目
确保MySQL服务正在运行，然后启动Node.js服务器：
node server.js
打开浏览器访问http://localhost:3000，你应该能看到一个包含用户数据的表格，并且支持分页和搜索功能。
相关问题与解答
问题1：如何自定义Bootstrap Table的样式？
解答：你可以通过修改CSS文件或使用内联样式来自定义Bootstrap Table的样式，可以添加自定义的CSS类来覆盖默认样式：
<style>
.custom-table .table-striped > tbody > tr:nth-child(odd) > td,
.custom-table .table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
</style>
然后在表格上添加class="custom-table"：
<table id="usersTable" data-toggle="table" data-url="/api/users" data-pagination="true" data-search="true" class="table table-bordered custom-table">
问题2：如何在Bootstrap Table中实现排序功能？
解答：Bootstrap Table默认支持排序功能，只需在<th>标签上添加data-sortable="true"属性即可启用排序：
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="email" data-sortable="true">Email</th>
<th data-field="age" data-sortable="true">Age</th>
</tr>
</thead>
这样，用户就可以通过点击表头来对数据进行排序。
以上内容就是解答有关“bootstrap table获取数据库”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/705111.html
微信扫一扫 