Bootstrap Table 实现简单的查询和显示功能

最新推荐文章于 2025-03-14 15:28:02 发布

actionzh

最新推荐文章于 2025-03-14 15:28:02 发布

阅读量1.6w

点赞数

分类专栏： java web jquery web 文章标签： bootstrap javascript jquery bootstrap table

本文链接：https://blog.youkuaiyun.com/actionzh/article/details/77131672

版权

java 同时被 3 个专栏收录

15 篇文章

订阅专栏

web

9 篇文章

订阅专栏

jquery web

4 篇文章

订阅专栏

本文介绍如何利用Bootstrap Table进行简单的查询和数据显示。通过引入必要的CSS和JS文件，结合jsp页面、JavaScript以及后台Controller的代码，实现了前端界面的查询功能并展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近用bootstraptable写了一个查询显示的界面。

下面是主要代码：

1. 我引入的css和js

2. jsp的页面代码：

<body>

</div>

<form action="<%=basePath %>/table/page" method="post">

<tbody>

<tr>

<td class="heading">协议单位编码</td>

<td>

</div>

</td>

<td class="heading">协议单位名称</td>

<td>

</div>

</td>

</tr>

<tr>

<td>

</div>

</td>

<td>

</div>

</td>

</tr>

<tr>

<td class="heading">协议单位状态</td>

</div>

</td>

<td class="heading">协议单位类型</td>

<td>

<option value="非直营二网">非直营二网</option>

<option value="二手车零售店">二手车零售店</option>

</select>

</div>

</td>

</tr>

<tr>

</td>

</tr>

</tbody>

</table>

</form>

</div>

</div>

</body>

3. 下面是js中的代码：

$(function () {

alert("jsa");

//1.初始化Table

var oTable = new TableInit();

oTable.Init();

var message = document.getElementById("message").value;

if(message != null &&message != "" ){

alert(message);

}

});

var TableInit = function () {

var oTableInit = new Object();

//初始化Table

var basePath=$("#basePath").val();

alert(basePath);

oTableInit.Init = function () {

$('#table').bootstrapTable({

method: 'post',

contentType: "application/x-www-form-urlencoded",

url: basePath+'/table/init', //请求后台的URL（*）

toolbar: '#toolbar', //工具按钮用哪个容器

striped: true, //是否显示行间隔色

locale:'zh-CN', //中文支持

pagination: true, //是否开启分页（*）

pageNumber:1, //初始化加载第一页，默认第一页

pageSize: 7, //每页的记录行数（*）

pageList: [5,7,9], //可供选择的每页的行数（*）

sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

showRefresh:true, //刷新按钮

queryParams: oTableInit.queryParams, //传递参数（*）

strictSearch: true,

showColumns: true, //是否显示所有的列

showRefresh: true, //是否显示刷新按钮

minimumCountColumns: 2, //最少允许的列数

clickToSelect: true, //是否启用点击选中行

height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

uniqueId: "PROTOCOL_ID", //每一行的唯一标识，一般为主键列

showToggle:true, //是否显示详细视图和列表视图的切换按钮

cardView: false, //是否显示详细视图

detailView: false, //是否显示父子表

columns: [{

field: 'PROTOCOL_CODE',

title: '协议单位编码',

}, {

field: 'PROTOCOL_NAME',

align: 'center',

title: '协议单位名称'

}, {

field: 'PROTOCOL_TYPE',

align: 'center',

title: '协议单位类型',

}, {

field: 'PROTOCOL_STATUS',

align: 'center',

title: '协议单位状态',

}, {

field: 'timeStr',

title: '开业日期',

align: 'center',

}, {

field: 'ADDR',

title: '联系地址',

align: 'center',

}, {

field: 'MANAGER_TEL',

title: '店长电话',

align: 'center',

}, {

field: 'EMAIL',

title: '邮箱',

align: 'center',

}, {

field: 'publisher',

title: '店长姓名',

align: 'center',

}, {

title: '操作',

align: 'center',

formatter:function(value,row,index){

var update = '<a href="javascript:update(\''+ row.PROTOCOL_ID + '\')">修改</a> ';

var del = '<a href="javascript:dlt(\''+ row.PROTOCOL_ID + '\')">删除</a> ';

return update+del;

}

}]

});

};

//得到查询的参数

oTableInit.queryParams = function (params) {

var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

limit: params.limit, //页面大小

offset: params.offset, //偏移量

docNo: $("#PROTOCOL_CODE").val(),

title: $("#PROTOCOL_NAME").val(),

startTime: $("#startTime").val(),

endTime: $("#endTime").val(),

brand: $("#PROTOCOL_STATUS").val(),

important: $("#PROTOCOL_TYPE").val()

};

return temp;

};

return oTableInit;

};

function dlt(id)

{

var basePath = $("#basePath").val();

var url = basePath+"/table/delete?PROTOCOL_ID="+id;

window.location.href=url;

}

function update(id)

{

var basePath = $("#basePath").val();

window.location.href=basePath+"/table/toupdate?PROTOCOL_ID="+id;

}

4. 后台controller中的代码：

@RequestMapping(value = "/init")

publicvoid init(ProtocolBean pb,HttpServletRequest request, HttpServletResponse response) throws SQLException, IOException {

intlimit = Integer.parseInt(request.getParameter("limit"));// 页面大小

intoffset = Integer.parseInt(request.getParameter("offset")); // 偏移量

Map<String, Object> condition = new HashMap<String, Object>();

if (pb.getPROTOCOL_CODE()!= null)

{

condition.put("PROTOCOL_CODE", pb.getPROTOCOL_CODE());

}

if (pb.getPROTOCOL_NAME()!= null)

{

condition.put("PROTOCOL_NAME", pb.getPROTOCOL_NAME());

}

if (pb.getStartTime()!= null)

{

condition.put("startTime", pb.getStartTime());

}

//判断发文终止时间

if (pb.getEndTime()!= null)

{

condition.put("endTime", pb.getEndTime());

}

if (pb.getPROTOCOL_STATUS()!= null)

{

condition.put("PROTOCOL_STATUS",pb.getPROTOCOL_STATUS() );

}

if (pb.getPROTOCOL_TYPE()!= null)

{

condition.put("PROTOCOL_TYPE", pb.getPROTOCOL_TYPE());

}

condition.put("limit", limit);

condition.put("offset", offset);

System.out.println("init3======");

System.out.println(condition);

// 2. 查询数据

List<ProtocolBean> list = protocolMapper.queryByCondition(condition);

if(list.isEmpty())

{

System.out.println("isEmpty======");

}

// 4.把数据转化成json格式

JSONArray array = JSONArray.fromObject(list);

// 5.获取总页数

Integer pageCount = protocolMapper.queryCount();

// 6.需要返回的数据有总记录数和行数据

String json = "{\"total\":" + pageCount + ",\"rows\":" + array + "}";

PrintWriter pw = response.getWriter();

pw.print(json);

}

下面是我的前台运行结果：