首页 > 其他 > 详细

DataTable动态表头

时间:2019-05-08 12:49:39      阅读:297      评论:0      收藏:0      [点我收藏+]

jsp部分(此处只有table 其他无关):

<table id="dataTable" class="table table-striped table-list table-bordered" width="100%">
    <thead>
           <tr id="colTr">
           </tr>
    </thead>
    <tbody id="colTb">  
    </tbody>  
</table>
技术分享图片

js部分:

//datatable表头
var dataTable;
$(function(){
    //查询按钮                
    $("#searchBtn").click(function(){
        debugger;
        init();
    });
})
function init(){
    
    var id= $("input:hidden[name=‘id‘]").val(),//input type为hidden时的取值方式
        name= $(‘#name‘).val();//input为text时的取值
    var param = {
            id: id,
            name: name
            };
    $.ajax({
        url  : url,//url
        type : ‘POST‘,
        data : param,
        success : function(resdata) {
                    //请求成功后 如果存在datatable结构销毁
                    if(dataTable){
                    dataTable.destroy();
                    }
                    //清空table数据 
                    $("#colTb").html("");
                
                    var colsDef = [];//定义表头列名
            
                    var obj = resdata.colist;//获取表头列名List
                    var tableData = resdata.data;//获取table数据
                    var cols = obj.length;
            if(cols>0){//构建jsp的table表头显示
                $("#colTr").html((function (cols){
                    var html = "";
                    var colsNameCN;
                    for(var i=0;i<cols;i++){ //这里遍历后台返回的字段信息集合
                         //alert(obj[i].column_cn);
                         colsNameCN=obj[i].view_name_cn;//这里取的字段信息的中文名
                         var html1=""
                         if(colsNameCN.length>15){//字段中文名过长截取显示
                             html1 += "<span title=‘"+colsNameCN+"‘>"+ colsNameCN.substr(0, 14) + "...</span>";//title鼠标悬浮显示全部字段中文名
                             html += $("<th></th>").append(html1).prop("outerHTML");//构建table表头的html
                             }else{
                             html += $("<th></th>").append(colsNameCN).prop("outerHTML");//构建table表头的html

                         }
                    }    
                     
                     return html;
                })(cols));    
            }
          
           if(cols>0){
                for(var i=0;i<cols;i++){
                    var colsNameEN;
                        colsNameEN=obj[i].column_en;//这里取的字段信息的英文名 和tabledata的key值对应
                        colsDef.push((function (colsNameEN){
                            var colItem = {
                                    data:colsNameEN,
                                    render: function( data, type, full, meta ) {
                                        if(data){
                                             return data;
                                        }else{
                                             return "";
                                        }
                                    }
                            }
                            return colItem;
                        })(colsNameEN));
            }
        }
                //datatable初始化
                dataTable = $(‘#dataTable‘).DataTable({
                    "ordering": false,
                    "info": true,
                    "bLengthChange": false,
                    "iDisplayLength":10,
                    "bFilter": true,
                    "retrieve": true,
                    "processing": true,
                    "scrollX": true,
                    "fixedColumns": true,
                    "bScrollAutoCss": true,
                    "language": {
                        "search": "过滤:",
                        "lengthMenu": "每页 _MENU_ 条记录",
                        "loadingRecords": "请等待,数据正在加载中......",
                        "zeroRecords": "没有找到记录",
                        "info": "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条,第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                        "infoEmpty": "没有数据",
                        "infoFiltered": "(从 _MAX_ 条数据中检索)",
                        "oPaginate": {
                            "processing": "正在查询中...",
                            "sFirst": "首页",
                            "sPrevious": "前一页",
                            "sNext": "后一页",
                            "sLast": "尾页"
                       }
                     },
                     data:tableData,
                     columns: colsDef
                     
                });
               
                //全选    
                $(‘#checkAll‘).click(function() {
                    $(‘[name=id]:checkbox‘).prop(‘checked‘, this.checked);
                    });
        },
         error: function () {
             
            alert("请求失败")
     }
    });
}
技术分享图片


java后台返回数据

List<数据实体类> list = new ArrayList<TStdataTypeEntity>();
List<列名实体类> listcolu = new ArrayList<TColuEntity>();
Map<String,Object> map = new HashMap<String,Object>();
	map.put("data", list);//table数据
	map.put("colist", listcolu);//表头列名
	return map;

列名实体类:    private String column_en;        //列名中文名  对应obj[i].column_en  
               private String column_cn;        //列名英文名  对应obj[i].column_cn
技术分享图片

 

看到了一个比较简单的动态表头的实现方法 根据需要选择怎么实现吧 附上链接:

https://blog.csdn.net/weixin_40408338/article/details/80900614

 

DataTable动态表头

原文:https://www.cnblogs.com/glass-bottles/p/10831091.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!