Data table column and width gets larger after loading data

inchanhee

My data table loads data without any problem. However, it shows a bit odd behavior. After each data load and refresh, its column and table widths get wider. I wonder why it happens. Here is my code

function GetList(){
    if ($('#demo-foo-filtering').length !== 0) {
        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();

                        d.search_type = $("#search_type").val();
                        d.search_security_level = $("#search_security_level").val()
                        d.search_keyword_type = $("#search_keyword_type").val()
                        d.search_keyword = $("#search_keyword").val();
                        d.timeFrom = $("#dateFrom").val();
                        d.timeTo = $("#dateTo").val();
                    }
                },
                dataFilter: function(data){
                var json = jQuery.parseJSON( data );
                json.recordsTotal = json.total;
                json.recordsFiltered = json.total;
                for(var i = 0; i < json.list.length; i++){
                     json.list[i].uri.truncStr(5)
                }
                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,
            //select: 'single',
            "sPaginationType": "full_numbers",
            columns: [
                {
                  data:null
                },
                {
                    data : "rule_name",
                    label: "카테고리", //New UI requirement, column name changed.
                    mDataProp: 'rule_name',
                    mRender: function(value) {
                                  return value.truncStr(20);
                              }
                },
                {
                    data : "uri",
                    label: "URL", //New UI requirement, column name changed.
                    mDataProp: 'uri',
                    mRender: function(value) {
                                  return value.truncStr(30);
                              }
                },
                {
                    data : "md5",
                    label: "유해파일(MD5)", //New UI requirement, column name changed.
                    mDataProp: 'md5',
                    mRender: function(value) {
                                  return value.truncStr(30);
                              }
                },
                {
                    data : "mal_file_name",
                    label: "파일명", //New UI requirement, column name changed.
                    mDataProp: 'mal_file_name',
                    mRender: function(value) {
                                  return value.truncStr(25);
                              }
                },
                {
                    data : "analysis_device",
                    label: "분석장비"
                },
                {
                    data : "analysis_result",
                    label: "결과"
                },
                {
                    data : "cre_dt",
                    label: "등록일"
                },
                {
                    data : "detection_source",
                    label: "탐지점"
                },
                {
                    data : "description",
                    label: "설명"
                }
            ],
            columnDefs : [
                {
                    targets : 0,
                    render : function (data, type, row, meta) {

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

                        return btnHtml;
                    }
                }
            ],
            "drawCallback" : function(setting,data){
                    $("input:checkbox").on('click', function() {
                    // in the handler, 'this' refers to the box clicked on
                    var $box = $(this);
                    if ($box.is(":checked")) {
                        // the name of the box is retrieved using the .attr() method
                        // as it is assumed and expected to be immutable
                        var group = "input:checkbox[name='" + $box.attr("name") + "']";
                        // the checked state of the group/box on the other hand will change
                        // and the current value is retrieved using .prop() method
                        $(group).prop("checked", false);
                        $box.prop("checked", true);
                    } else {
                        $box.prop("checked", false);
                    }
                });
                 setTimeout(function(){
                        $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
                 }, 350);
            }
        });

        //$('#dtData').footable();
        //$("#dtTableToolbar").insertBefore( "#demo-foo-filtering_paginate" );

    }
}

kthorngren

Do you have style="width:100%" on your table tag?

Kevin

inchanhee

Yes. it has that style="width:100%;" tag. I believe it causes this problem.

kthorngren

Using style="width:100%" is the general recommendation. I suspect the problem is something in your environment. Can you post a link to your page or a test case with the issue so it can be debugged?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin