Bootstraptable的使用，与后台数据连接，可自动翻页资源-CSDN文库资源-CSDN文库

共9个文件

js：4个

css：2个

html：1个

1星需积分: 47 56 浏览量 2016-12-15 14:57:33 上传评论 1 收藏 88KB ZIP 举报

Bootstrap表格是一种基于HTML5和CSS3的前端框架，用于创建响应式、美观的表格。它由Twitter开发并广泛应用于现代Web应用中。Bootstrap表格通过简洁的HTML标记和JavaScript插件，能够快速构建功能丰富的交互式表格。在本场景中，我们将讨论如何结合Bootstrap表格与后台数据连接，实现自动翻页功能，特别是当后台数据传输使用JAVA Servlet和JSON格式时。我们需要在HTML页面中引入Bootstrap的相关库，包括CSS和JavaScript文件。这通常意味着将Bootstrap CDN链接添加到`<head>`部分，以便获取样式和交互功能： ```html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js"></script> ``` 接下来，我们可以创建一个基本的表格结构： ```html <table id="myTable" class="table table-striped table-bordered" data-pagination="true" data-page-size="10"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> </tbody> </table> ``` 这里，我们设置了`data-pagination`属性为`true`以启用分页，`data-page-size`设置每页显示的行数。为了从后台获取数据并填充表格，我们需要使用Bootstrap Table的JavaScript API。这个API允许我们在表格加载时从服务器拉取数据。在`<script>`标签中添加以下代码： ```javascript $(document).ready(function () { $('#myTable').bootstrapTable({ url: 'yourServletPath', // 替换为你的JAVA Servlet路径 columns: [ { field: 'column1', title: '列1' }, { field: 'column2', title: '列2' }, { field: 'column3', title: '列3' } ], responseHandler: function (res) { return { total: res.total, // 数据总数 rows: res.data // 数据数组 }; } }); }); ``` 在后台，我们使用JAVA Servlet来处理HTTP请求，返回JSON格式的数据。Servlet中的代码可能如下： ```java protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 查询数据库并获取数据 List<DataObject> dataList = yourDatabaseQuery(); // 将数据转化为JSON格式 ObjectMapper mapper = new ObjectMapper(); String jsonData = mapper.writeValueAsString(dataList); // 设置响应类型和内容 response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(jsonData); } ``` 这里的`DataObject`是包含你表格所需字段的Java类，`yourDatabaseQuery()`是执行数据库查询的方法，返回一个`List<DataObject>`。现在，Bootstrap表格将自动从后台Servlet获取数据并显示，同时具备分页功能。用户在翻页时，Bootstrap Table会自动发送请求到后台，获取对应页码的数据。`responseHandler`函数用于解析后台返回的JSON数据，将其格式化为Bootstrap Table可以理解的格式。结合Bootstrap Table与JAVA Servlet，我们可以创建一个动态的、可分页的数据展示表格。这种方法使得前端与后端之间的数据交互变得简单高效，同时也提供了良好的用户体验。在实际项目中，你可能还需要考虑错误处理、数据过滤、排序等功能的实现，这些可以通过Bootstrap Table的API和Servlet的自定义逻辑来完成。

资源推荐

资源详情

资源评论

收起资源包目录

bts.zip （9个子文件）

bts

WebContent

css

bootstrap-table.css 7KB

bootstrap.min.css 118KB

META-INF

MANIFEST.MF 39B

WEB-INF

lib

fonts

jquery.min.js 91KB

bootstrap-table.js 105KB

bootstrap.min.js 36KB

bootstrap-table-zh-CN.js 1KB

demo

edittable.html 5KB

src

DataListServ.java 3KB

import java.io.File; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * 文件展示，可以下载，需要jdk8，tomcat8 * * @author zhouxj * @date 2016-12-15 * @version 1.0 */ @WebServlet("/DataList") public class DataListServ extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String queryStr=request.getParameter("realname"); System.out.println("查询参数："+queryStr); String jsonRet = "[{\"realname\":\"王三\",\"card_id\":\"620511199410183376\",\"phone\":\"13652671416\",\"usremail\":\"\",\"credit\":0}," + "{\"realname\":\"李四\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"[email protected]\",\"credit\":0}," + "{\"realname\":\"李6\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"[email protected]\",\"credit\":0}," + "{\"realname\":\"李7\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"[email protected]\",\"credit\":0}," + "{\"realname\":\"李8\",\"card_id\":\"110102198506020018\",\"phone\":\"18951295644\",\"usremail\":\"[email protected]\",\"credit\":0}," + "{\"realname\":\"周八皮\",\"card_id\":\"430202198709111516\",\"phone\":\"13915979089\",\"usremail\":\"[email protected]\",\"credit\":0}]"; String jsonRetQuery = "[{\"realname\":\"王三\",\"card_id\":\"620511199410183376\",\"phone\":\"13652671416\",\"usremail\":\"\",\"credit\":0}," + "{\"realname\":\"周八皮\",\"card_id\":\"430202198709111516\",\"phone\":\"13915979089\",\"usremail\":\"[email protected]\",\"credit\":0}]"; if(queryStr==null || ("").equals(queryStr)){ resposWrite(response, jsonRet); }else{ resposWrite(response, jsonRetQuery); //条件查询，记录变少了 } } /** * 向 response输出中文内容 * * @param response * @param string */ private void resposWrite(HttpServletResponse response, String string) { try { response.setCharacterEncoding("UTF_8");// 设置Response的编码方式为UTF-8 response.setHeader("Content-type", "application/json;charset=utf-8");// 向浏览器发送一个响应头，设置浏览器的解码方式为UTF-8,其实设置了本句，也默认设置了Response的编码方式为UTF-8，但是开发中最好两句结合起来使用 PrintWriter writer; writer = response.getWriter(); writer.write(string); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } }

评论收藏

内容反馈