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

Question

I have a data-table js table starts like:-

<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 Code is

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;
                    }
                }



            ]




    }
}

This code retrieves data from the server and it displays data over the screen well. However, a problem begins if I add one more column to the table. This column contains a large length of string, URL.

As I add it, the last three columns gets display:none and the table rows are displayed none, too. I have been trying a lot of things, such as readjusting width %, make the hidden columns visible in the column defs.

I guess If I could adjust this particular column width, and make the large string displayed in multiple lines rather than a single line. This issue will be resolved. Do you have any idea to solve it?

If you need me to be more specific in the elaboration of a problem, tell me please.

Good table

after I add URL column with large string value

Answer 1

I sorted it out after trimming large URL string variables. If you guys have any other ideas how to avoid it. You are more than welcomed to answer it.