Bootstrap Table 初始化配置及后端数据交互示例

这段代码展示了使用 Bootstrap Table 插件初始化表格的配置和使用方法，并探讨了如何实现前端与后端的数据交互。

前端代码

$(function() {
	var column =  userNormal_initColumn();
	$('#userNormalTable').bootstrapTable({
		contentType: 'application/x-www-form-urlencoded',
		url: '/user/queryList',
		method: 'post',
		//toolbar: '#toolbar',
		striped: true,
		cache: false,
		sortable: true,
		sortOrder: 'desc',
		pagination: true,
		pageNumber: 1,
		pageSize: 5,
		pageList: [5, 10, 15, 'All'],
		queryParamsType: 'limit',
		queryParams: {'param': 'testData'},
		sidePagination: 'client',
		search: false,
		strictSearch: true,
		showColumns: false,
		showRefresh: false,
		minimumCountColumns: 2,
		clickToSelect: true,
		searchOnEnterKey: true,
		height: 365,
		icons: {
			refresh: 'glyphicon-repeat',
			toggle: 'glyphicon-list-alt',
			columns: 'glyphicon-list'
		},
		iconSize: 'outline',
		columns: column // 列数组
	});
});

后端代码

根据这段前端代码，可以推断出后端需要实现的逻辑：

路由 /user/queryList: 处理前端发送的查询数据请求。
数据查询: 根据请求参数，从数据库或其他数据源中查询相关数据。
数据格式化: 将查询到的数据格式化为 Bootstrap Table 可以识别的 JSON 格式。
返回数据: 将格式化后的数据返回给前端。

示例后端代码（使用 Node.js + Express + MongoDB）

const express = require('express');
const router = express.Router();
const User = require('../models/User'); // 假设 User 是数据库模型

router.post('/queryList', async (req, res) => {
	const { param } = req.body;

	try {
		const users = await User.find({}).skip(req.query.offset).limit(req.query.limit);
		res.json({ total: await User.countDocuments(), rows: users });
	} catch (error) {
		console.error(error);
		res.status(500).send('服务器错误');
	}
});

module.exports = router;

注意：

上述后端代码仅供参考，具体的实现细节需要根据实际业务逻辑和数据结构进行调整。
前端代码中的 queryParams: {'param': 'testData'} 传入了自定义参数 param，后端代码需要根据这个参数进行数据过滤或其他处理。
前端代码使用的是 sidePagination: 'client'，表示客户端分页，因此后端只需要返回所有数据，前端会在客户端进行分页处理。如果您需要使用服务端分页，则需要将 sidePagination 设置为 'server'，并将分页信息（如 offset 和 limit）传递给后端。

总结

本文介绍了使用 Bootstrap Table 插件初始化表格的配置和使用方法，并探讨了如何实现前端与后端的数据交互。希望本文能够帮助您更好地理解 Bootstrap Table 的使用，并为您的前端开发提供一些参考。