模态框展示dataTables分页信息

实际开发过程中可能会遇到这样的需求，后端计算的列表信息需要展示的页面上。这个列表信息没有保存在数据库就会考虑使用前端分页组件，并且想使用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">
                        &times;
                    </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);
    }

展示效果