jquery datatbale动态列-CSDN博客

最近做新项目的时候遇到一个问题，在同一个页面切换TAB显示不同的table列。弄了很久，后来在一个同事的帮助下解决了。

table = $("#example").dataTable({
        dom:"<bottom><'row'<'col-xs-5 pt-10'li><'col-xs-7'p>>",
        autoWidth: false,  //禁用自动调整列宽
        stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
        processing: true,  //隐藏加载提示,自行处理
        serverSide: true,  //启用服务器端分页
        searching: false,  //禁用原生搜索
        orderMulti: false,  //启用多列排序
        /*order: [],  //取消默认排序查询,否则复选框一列会出现小箭头*/
        ordering:false,//取消默认排序
        renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
        pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
        columnDefs: [{
            "targets": 'nosort',  //列的样式名
            "orderable": false    //包含上样式名‘nosort’的禁止排序
        }],
        ajax: function (data, callback, settings) {
            //封装请求参数
            var param = $("#myForm").serializeObject();
            param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
            param.start = data.start;//开始的记录序号
            param.page = (data.start / data.length)+1;//当前页码
            //ajax请求数据
            $.ajax({
                type: "POST",
                url: "${ctx}/web/order/getImportList",
                cache: false,  //禁用缓存
                data: param,  //传入组装的参数
                dataType: "json",
                success: function (result) {
                    //封装返回数据
                    var returnData = {};
                    returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                    returnData.recordsTotal = result.total;//返回数据全部记录
                    returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
                    returnData.data = result.rows;//返回的数据列表
                    //console.log(returnData);
                    //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                    //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                    callback(returnData);
                }
            });
        },
        //列表表头字段
        columns: [
            { "data": ""},
            { "data": "order_no" },
            { "data": "customs_ent_plat_name" },
            { "data": "package_number" },
            { "data": "way_bill_no" },
            { "data": "order_total_price"},
            { "data": "actual_amount_paid"},
            { "data": "recipient_name" },
            { "data": "order_status" },
            { "data": "create_time" }
        ],
        aoColumnDefs:[
            {  
                "sClass":"text-c",  
                 "aTargets":[0],  
                "mData":"statCleanRevampId",
                "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象
                    if(c.order_status=='import'){
                         return '<input type="checkbox"  name="ids" value="'+c.order_id+'">';  
                    }else{
                        return "";
                    }
                }  
            },
            {  
                "sClass":"text-c",  
                 "aTargets":[1],
                "mData":"statCleanRevampId",  
                "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
                    if(c.order_status=='import' && c.exception_status=='interface_fail'){
                         return a+'<img  title="'+c.exception_msg+'" src="${resource }/images/img61.png">';  
                    }else{
                        return a;
                    } 
                }  
            },
            {  
                "sClass":"text-c",  
                 "aTargets":[4],  
                "mData":"statCleanRevampId",  
                "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象
                    if(a){
                         return a;  
                    }else{
                        return "";
                    }
                }  
            },
            {  
                "sClass":"text-c",  
                 "aTargets":[8],  
                "mData":"statCleanRevampId",  
                "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
                     return $("#span_order_"+a).text();
                }  
            },
            {  
                "sClass":"text-c",
                "aTargets":[10],
                "mData":"statCleanRevampId",  
                "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象
                    if(c.order_status=='import'){
                        return '<a class="btn btn-link " οnclick="del('+c.order_id+')" href="javascript:void(0)">删除</a><a class="btn btn-link " οnclick="openDetail(\'${ctx}/web/order/ImportDetail?id='+c.order_id+'\',\'订单详情\')" href="javascript:void(0)">详情</a>'; 
                    }else{
                        return '<a class="btn btn-link " οnclick="openDetail(\'${ctx}/web/order/ImportDetail?id='+c.order_id+'\',\'订单详情\')" href="javascript:void(0)">详情</a>';
                    }
                }
            }
        ]
    });

如上是页面初始化的时候第一个TAB页显示的TABLE数据渲染。那么问题来了，在点击第二个TAB的时候怎么去动态加载TABLE列。

这里的第一列是不需要显示的(一个CHECKBOX列)

//列表表头字段
        columns: [
            { "data": ""},
            { "data": "order_no" },
            { "data": "customs_ent_plat_name" },
            { "data": "package_number" },
            { "data": "way_bill_no" },
            { "data": "order_total_price"},
            { "data": "actual_amount_paid"},
            { "data": "recipient_name" },
            { "data": "order_status" },
            { "data": "create_time" }

我试过声明2个table，分别给赋值，结果并不能解决问题，会出现列错位或报一些莫名的错误。

实际上我这里并没有找到问题所在，后来网上搜了一下和同事的点拨，原来这个地方table是需要清空的。不能存在2个table

jQuery.Huitab =function(tabBar,tabCon,class_name,tabEvent,i){
        var $tab_menu=$(tabBar);
          // 初始化操作
          $tab_menu.removeClass(class_name);
          $(tabBar).eq(i).addClass(class_name);
          
          $tab_menu.bind(tabEvent,function(){
                $tab_menu.removeClass(class_name);
              $(this).addClass(class_name);
              var index=$tab_menu.index(this);
              if(currentIndex==index){
                  return;
              }
              table.fnClearTable(); //清空一下table
              table.fnDestroy();
              if(index==0){
                  $("#order_status").val("import");
                  $("#not_status").val("");
                  $("#operation").show();
                  $("#importWeightDiv").hide();
                  $("#status_div").hide();
                  $("#checktr").show();
                  init();
                  currentIndex=0;
              }else{
                  //table.columns(0).visible(false);
                  $("#order_status").val("");
                  $("#not_status").val("import");
                  $("#operation").hide();
                  $("#importWeightDiv").show();
                  $("#status_div").show();
                  $("#checktr").hide();
                  init2();
                  currentIndex=1;
              }
              $(':input','#myForm').not(':button,:submit,:reset,:hidden').val('');
                  search();
              });}
            $.Huitab("#tab_demo .tabBar span","#tab_demo .tabCon","current","click","0");

我这里用到了前端的hui框架中的huitab

在出发tab点击事件时调用table清空。完美解决

table.fnClearTable(); //清空一下table
table.fnDestroy();

在init2中重新给table赋值给第一列加visible属性为false,该列就不显示了。

PS：这里我用到了一个currentIndex来防止tab的重复点击。要不然框架会报错。

转载于:https://www.cnblogs.com/imsai/p/7240821.html