引导表从服务器加载数据进行显示的实现方法

Bootstrap-Table是一个Bootstrap表格插件，可以直接在表格中显示JSON数据。当然，这需要配置一些参数并初始化表。它的官方网站地址是：http://bootstrap-table.wenzhixin.net.cn/你可以下载和使用JS和CSS文件，以及参考文件和例子。

引导表向表显示数据有两种方式，一种是客户端模式，另一种是服务器模式。

所谓客户端模式，就是将表中要显示的数据在服务器中加载一次，然后转换成JSON格式，传输到接口中进行显示，可以保存在JavaWeb中的请求中，然后转发到指定的接口，在接口初始化时可以使用EL表达式得到，然后调用相关的初始化函数，传入JSON字符串进行显示。客户端模式比较简单，就是把数据加载一次放在界面上，然后根据你设置的每页记录数自动生成分页。当点击第二页时，数据将自动加载，不会向服务器发送任何请求。同时，用户可以使用自己的搜索功能实现全数据搜索。当数据量很小时，可以使用这种方法。但是对于数据量较大的系统，使用这种方法会导致加载一些用户很久以前就没有注意到的数据，这样会减缓加载速度，增加服务器负担，浪费资源。此时应采用服务器模式。

所谓服务器模式，是指根据设定的每页记录数和当前要显示的页码，将数据发送到服务器进行查询，然后显示在表格中。这种方法可以根据用户需求动态加载数据，节省了服务器的资源，但不能使用自己的全数据搜索功能。因为您加载的数据只有一页数据，所以完整数据搜索的范围只有一页。

客户端模式比较简单，读者可以根据官方文件和实例自行练习。本文主要介绍了服务器模式，可以实现参数查询。

系统界面如下：

上图中，用Bootstrap-Table实现了一个界面，带有输入框和查询按钮。在输入框中输入数字，在后台点击【查询】进行查询，然后在表格中显示查询结果的数据。由于数据库中的数据较少，为了看到效果，每个页面都设置为显示一条数据。以下是前端接口代码：

首先介绍了相应的JS和CSS文件。定义一个表标签，配置相关的boost trap-table属性，并在此省略列代码。

link href=' CSS/bootstrap . min . CSS ' rel='样式表' type=' text/CSS ' link href=' CSS/bootstrap-table . min . CSS ' rel='样式表' type=' text/CSS ' script src=' http : js/jquery . min . js '/脚本脚本src=' http : js/bootstrap . min . js '/脚本src=' http 3360 js/plugins/bootstrap-table . min-这里省略table列的代码，code与上面类似-th class=' col-xs-2 ' data-field=' action ' data-formatter=' action formatter ' data-events=' action events ' action/th/tr/The dtbad/t body/table下面是JavaScript代码：定义了一个函数initTable()来初始化表第7行的方法指定了请求的提交方法。我尝试将其设置为提交后，发现后端无法获取查询参数。我不知道为什么，所以我习惯了屈服。第8行中的url设置了您想要提交请求的地址。这里，JSP中使用了C标签。第17行指定了加载数据的服务器端模式。第20行指定查询参数的类型，可以设置为未定义或限制。不同的设置可以在queryParams函数中获得不同的参数。页码、每页记录和查询条件在第23-25行获得，作为查询参数返回。这里只有一个条件。如果要多条件查询，只需要获取多个条件即可。第40行在ready中调用函数获得的后端数据显示在表中。第43行中的查询按钮与点击事件绑定，当输入数字并点击查询时执行该事件。由于查询只是在第一次加载表之后的一个操作，所以应该调用bootstrap-table提供的函数来销毁第4行中的表，否则当单击查询时，无法在后台加载数据。

脚本类型=' text/JavaScript '函数init table(){//销毁表$ ('# custable ')。引导表(“销毁”)优先；//初始化表并从服务器$(“# custable”)动态加载数据。引导表({method:' get '，//使用get请求从服务器URL 3360 ' c : URL value='/sell servlet获取数据？act=ajaxgetsellerrecord '/'，//获取数据分条的Servlet地址： true，//该表显示分条分页3360 true，//开始分页页面大小： 1，//每页显示的记录数页码：1，//页面页面列表： [5，10，15，20，25]，//可选记录列表搜索： false，//是否启用查询showcolumns3360 true，//检查要显示的列//显示刷新按钮侧分页： '服务器'，//表示服务器请求。//设置为undefined获取页码、页面大小、搜索文本、排序名称、排序顺序//设置为limit获取限制、偏移量、搜索、排序、顺序queryParamsType : 'undefined '，Query params :函数查询参数(params){//设置查询参数varparam={ page number : params . page number，pagesize:params.pagesize，ordernum 3360 $ ('# ordernum ')。val()}；返回参数；}，onload success : function(){//加载成功时执行layer.msg('加载成功')；}，onloaderror : function(){//加载失败时执行layer.msg('加载数据失败'，{time : 1500，icon : 2 })；} });} $(文档)。ready(function(){//调用函数初始化表initTable()；//执行$ ('# search ')。单击查询按钮时绑定(' click '，init table)；});/script后端servlet代码：

在servlet中获得act参数后，调用下面的代码。然后调用服务业务逻辑进行搜索，判断orderNum是否为空字符串，如果为空，则查询不带orderNum参数，如果不为空，则查询带orderNum条件。服务调用dao，dao中的函数也根据orderNum参数是否为空生成不同的SQL语句和查询参数。第23行将查询的记录转换为json字符串，第25行获取满足条件的记录总数。请注意，前端的json设置在第28行。这里需要返回两个参数，一个是total，表示记录总数，另一个是row，表示表数据。

/* * *根据页码和每页记录数，以及查询条件动态加载销售记录* @ param request * @ param response * @ throsio exception * @ authorlzx */private void Ajax getsellerrecord(http servlet request，HttpServletResponse response)抛出IOException { response . setcharacter encoding(' utf-8 ')；PrintWriter pw=response . getwriter()；//获取客户端传递的页码和每页记录数，并将其转换为int类型int page size=integer . par sent(request . getparameter(' page size '))；int page number=integer . parseint(request . getparameter(' page number '))；string order num=request . GetParameter(' order num ')；//逐页搜索商品销售记录，判断是否有listsimssellrecordlist=null且有查询条件；sellerrecordlist=sellerrecordservice . query sellerrecordbypage(页码、页面大小、顺序号)；//将商品销售记录转换为json字符串sellerodjson=sellerodeservice . getsellerodjson(sellerodist)；//获取记录总数int total=sellerrecordservice . countsellrecord(order num)；//要返回的数据包括总计记录和行数据字符串JSON=' { \ ' total \ ' : ' total '，\ ' rows \ ' : ' sellrecordjson ' }pw . print(JSON)；}以上是边肖介绍的Bootstrap Table从服务器加载数据进行显示的实现方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！