模态框展示dataTables分页信息

实际开发过程中可能会遇到这样的需求，后端计算的列表信息需要展示的页面上。这个列表信息没有保存在数据库就会考虑使用前端分页组件，并且想使用bootstrap框架的模态框展示该部分数据，当有触发事件的时候就会弹出模态框展示计算结果列表，datatables支持查询与分页等配置。

页面需要引入css、js

页面必须引入datatables、bootstrap、jquery相关资源

定义触发按钮

这里触发函数是按钮的onclick点击方法，触发show()

        开始演示模态框
 

定义模态框

模态框分标题和内容区域，需要指定模态框的id方便jquery调用“myModal”

    

        

            

                

                    
                        ×
                    
                    

                        模态框（Modal）标题
                    
                
                

                    
                    

                        

                        

                                
职工号
                                
姓名
                                
部门
                        
                        
                        

                            
                    
                
                

                    关闭
                    
                
            
        
    

定义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 lnry = xzlioRepository.selectByOutId(ry);
		
		//数据封装
        Map map = new HashMap();
        //重要！数据列表需要封装在data字段中构成dataTable可解析的json
        map.put("data", lnry);
		//转化成json格式传递至页面
        return JsonUtil.toJson(map);
    }

展示效果