添加特定列后未显示jQuery Datatable列

Question

我有一个数据表 js 表的开头如下：-

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">

<table id="demo-foo-filtering" class="table table-striped table-bordered 
toggle-circle m-b-0" style="width:100%">

               <colgroup>
                        <col style="width:5%;"/>
                        <col style="width:10%;"/>

                        <col style="width:20%;"/>
                        <col style="width:20%;"/>
                        <col style="width:10%;"/>
                        <col style="width:10%;"/>


                    </colgroup>

                   <thead class="pattern-table">
                    <tr>
                        <th></th>
                        <th>카테고리</th>

                        <th>해시(MD5)</th>
                        <th>파일명</th>
                        <!-- New UI requirement, column name changed.-->
                        <th>분석장비</th> <!-- New UI requirement, column name changed.-->
                        <th>등록일</th>
                    </tr>
                    </thead>

JQuery 代码是

dtTable = $('#demo-foo-filtering').DataTable({
                ajax: {
                    url:"/secure-log/black-list/list",
                    type:"POST",
                    "data": function (d) {
                        d.perpage = $("#perpage").val();
                        d.search_source = $("#search_source").val();
                        d.search_keyword = $("#search_keyword").val();
                    }
                },
                dataFilter: function(data){
                var json = jQuery.parseJSON( data );
                json.recordsTotal = json.total;
                json.recordsFiltered = json.total;
                json.data = json.list;

                return JSON.stringify( json ); // return JSON string
            },
            "initComplete": function(settings, json){
              $('#divTotal').text("총 "+json.recordsFiltered.toLocaleString() + "건");
            },
            error: function(xhr, error, thrown) {
                alert(error);
                error(xhr, error, thrown);
            },
            dom: 'Bfrtip',
            "pagingType": "full_numbers",
            fixedHeader: true,
            "scrollY" : "700px",
            serverSide: true,
            pageLength: $("#perpage").val(),
            bLengthChange: false,
            processing: true,
            searching: false,
            sort: false,
            paging: true,
            info: false,
            deferRender: true,
            responsive: true,
            autoWidth : true,
            //select: 'single',
            "sPaginationType": "full_numbers",

            columns: [
                {
                  data:null
                },
                {
                    data : "rule_name",
                    label: "카테고리" //New UI requirement, column name changed.
                },

                {
                    data : "md5",
                    label: "유해파일(MD5)" //New UI requirement, column name changed.
                },
                {
                    data : "mal_file_name",
                    label: "파일명" //New UI requirement, column name changed.
                },
                {
                    data : "description",
                    label: "분석장비"
                },
                {
                    data : "cre_dt",
                    label: "등록일"
                }
            ],
            columnDefs : [
                {
                    targets : 0,

                    render : function (data, type, row, meta) {

                        var btnHtml = "<input type='checkbox' name='dtSelector' value='"+ meta.row + "'/>";

                        return btnHtml;
                    }
                }



            ]




    }
}

此代码从服务器检索数据，并将数据很好地显示在屏幕上。但是，如果我在表中再添加一列，就会出现问题。此列包含很长的字符串，URL。

当我添加它时，最后三列得到display:none，并且表格行也没有显示。 我一直在尝试很多事情，例如重新调整宽度％，使隐藏的列在列定义中可见。

我想如果我可以调整这个特定的列宽，并使大字符串显示为多行而不是单行。 这个问题将得到解决。你有什么解决办法吗？

如果您需要我更具体地阐述问题，请告诉我。

好表

在我添加具有大字符串值的 URL 列之后

Answer 1

我在修剪大型 URL 字符串变量后对其进行了整理。 如果你们有任何其他想法如何避免它。 非常欢迎您回答。