实际开发过程中可能会遇到这样的需求,后端计算的列表信息需要展示的页面上。这个列表信息没有保存在数据库就会考虑使用前端分页组件,并且想使用bootstrap框架的模态框展示该部分数据,当有触发事件的时候就会弹出模态框展示计算结果列表,datatables支持查询与分页等配置。
页面需要引入css、js
页面必须引入datatables、bootstrap、jquery相关资源
<link href="https://cdn.bootcss.com/datatables/1.10.16/css/jquery.dataTables.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
定义触发按钮
这里触发函数是按钮的onclick点击方法,触发show()
<button class="btn btn-primary btn-lg" data-toggle="modal" onclick="show()">
开始演示模态框
</button>
定义模态框
模态框分标题和内容区域,需要指定模态框的id方便jquery调用“myModal”
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框(Modal)标题
</h4>
</div>
<div class="modal-body">
<!--模态框内容-->
<table class="table table-bordered jambo_table bulk_action table-striped table-hover"
id="example">
<thead>
<tr class="headings">
<th>职工号</th>
<th>姓名</th>
<th>部门</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
定义js
需要在js中定义按钮的触发函数show()
需要注意的地方:
1、dataTable每次加载表格之后,如果数据变化需要销毁之前的重新绘制;(dataTable原理是一次性加载数据,前端处理数据进行分页)
2、bProcessing配置为展示正在加载的提示(建议)
3、oLanguage配置中文
4、表格通过ajax加载数据,columns必须按照如下代码。
//表头对应的列
//outid、name、dpname分别为需要展示的数据列,必须保证(表头【模态框里】、数据列【如下代码】、后端实体类三个地方命名一致)
"columns": [
{ "data": "outid" },
{ "data": "name" },
{ "data": "dpname" }
]
function show() {
var url= [[@{/xzl/lnry}]];
//再次查询时先删除paymentlist,如果少了以下语句每次只能查询一次,第二次点击查询就不执行。
var table=$('#example').dataTable();
if(table){
table.fnDestroy();
}
$('#example').dataTable( {
"ajax": url,
"bProcessing" : true,
"oLanguage": { //国际化配置
"sProcessing" : "正在获取数据,请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "搜索",
"sUrl" : "",
"oPaginate": {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
},
"columns": [
{ "data": "outid" },
{ "data": "name" },
{ "data": "dpname" }
]
} );
$('#myModal').modal('show')
}
后端ajax请求的数据接口
重要!数据列表需要封装在data字段中构成dataTable可解析的json
@GetMapping("lnry")
@ResponseBody
public String dqLnrs() {
//展示的数据列表
List<Xzlio> lnry = xzlioRepository.selectByOutId(ry);
//数据封装
Map map = new HashMap();
//重要!数据列表需要封装在data字段中构成dataTable可解析的json
map.put("data", lnry);
//转化成json格式传递至页面
return JsonUtil.toJson(map);
}
展示效果