实际开发过程中可能会遇到这样的需求，后端计算的列表信息需要展示的页面上。这个列表信息没有保存在数据库就会考虑使用前端分页组件，并且想使用bootstrap框架的模态框展示该部分数据，当有触发事件的时候就会弹出模态框展示计算结果列表，datatables支持查询与分页等配置。
页面必须引入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中定义按钮的触发函数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') }重要！数据列表需要封装在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); }
