nodejs+express+mysql实现数据查询和表格分页展示

最新推荐文章于 2024-12-17 22:36:55 发布

原创

最新推荐文章于 2024-12-17 22:36:55 发布 · 5.6k 阅读

20 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Node.js、Express和MySQL实现数据查询，并通过前端展示查询结果进行表格分页。项目结构包含views、javascripts等文件夹，其中views中的HTML文件用于页面设计，包括查询按钮和分页组件；javascripts文件夹中的JS文件处理查询逻辑和分页功能。通过app.js、routes和interfaces文件夹实现后端路由和接口交互。最终实现了用户交互式的数据查询与表格分页展示。

项目结构

搭建express框架的过程不赘述了，直接附上本项目的结构以及与数据查询、表格分页展示功能相关的文件：

数据库展示

被查询和展示的表为capitalaccountio表，该表的相关信息如下：

drop table if exists capitalaccountio;
create table capitalaccountio(
	id serial primary key,
	capitalaccountid bigint references capitalaccount(capitalaccountid),   -- 资金账户ID（主键、外键）
	iotime timestamp default current_timestamp,   -- 交易时间（主键）
	ioamount numeric(25, 2) not null,   -- 交易金额
	moneytype enum('RMB', 'USD', 'CAD', 'AUD', 'EUR', 'GBP', 'HKD', 'JPY') default 'RMB',   -- 交易币种
	iodescription varchar(500) not null   -- 交易明细
);

views文件夹-html文件

目的

页面设计：在网页上添加查询数据的按钮、查询的说明文字、前后翻页的button。

代码

<div class="loading-box">
    <form id="usersDetailsOrder">
	    <div class="form-group">
			<div class="form-button">
				<input class="form-submit" type="button" id="usersdetails" value="查询">
			</div>
			<div class="form-note">(仅显示最近100条)</div>
		</div>
	</form>

	<div class="table">
		<table id="tabDetails"></table>
		<div class="table-pagination">
			&