Width set is not work

systemsNatu · September 2020

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

there is my code

if ($.fn.DataTable.isDataTable('#example')) {
table.state.clear();
//table.dataTable().clear();
table.destroy();
table.MakeCellsEditable("destroy");
$("#example tbody").empty();
}* *

table = $('#example').DataTable({
ajax: {
"url": domain + '/api/GetAllLocationInfoDetail',
"type": "GET",
"dataSrc": "",
},
//autoWidth: true,
autoWidth: true,
//Paginate: false,
deferRender: true,
scrollY: 700,
scrollX: true,
//sScrollX: "100%",
"sScrollXInner": "150%",
scrollCollapse: true,
paging: true,
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength: 25,
stateSave: true,
processing: true,
//bLengthChange: false,
'sPaginationType': 'ellipses',
fixedColumns: {
leftColumns: 3
},
language: {
"url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json",
"processing": "処理中...",
"lengthMenu": "MENU 件表示",
"zeroRecords": "データはありません。",
"info": " TOTAL 件中 START から END まで表示",
"infoEmpty": " 0 件中 0 から 0 まで表示",
"infoFiltered": "（全 MAX 件より抽出）",
"infoPostFix": "",
"search": "部分検索:",
"url": "",
"paginate": {
"first": "先頭",
"previous": "前",
"next": "次",
"last": "最終"
},
select: {
rows: {
_: "%d行選択しました",
0: "",
1: "1行選択しました"
}
}
},
dom: '<"top"lf>irpt<"bottom"B>',
buttons: [
{
extend: 'excelHtml5',
text: 'Excel出力',
footer: true,
filename: '360°Viewer-保管場所マスタ',
exportOptions: {
//columns: ':visible:not(:eq(0))'
columns: "thead th:not(.noExport)"
}
},
{
extend: 'cexcelImport',
text: 'Excel取込'
},
{
extend: 'colvis',
text: '表示列選択'
},
{
extend: 'cupdate',
text: '登録'
},
{
extend: 'cdelete',
text: '削除'
}
],
initComplete: function () {

            var api = this.api();

            $(this).on('click', "i.fa.fa-plus-square", function (e) {

                var currentPage = api.page();

                var text = '[{"Id":"DT_RowId","ORGANIZATION_ID": "DOC_0001","LOCATION_ID": "","LOCATION_B": "","LOCATION_F": "","LOCATION_A": "","STORE_TYPE": "0","DESCRIPTION": "","LOCATION_TYPE": "11","LOCATION_TYPE_NAME": null,"LOCATION_X":0,"LOCATION_Y": 0,"LOCATION_Z": 0,"COLOR_R": 0,"COLOR_G": 0,"COLOR_B": 0,"LEADER_POS_TOP": 0,"DIFF_X_TOP": 0,"DIFF_Y_TOP": 0,"DIFF_Z_TOP": 0,"LEADER_BREAK_TOP": 0,"LEADER_POS_360": 0,"DIFF_X_360": 0,"DIFF_Y_360": 0,"DIFF_Z_360": 0,"LEADER_BREAK_360": 0,"SHELVES_COUNT": 0,"CAMERA_ANGLE": 0,"CREATE_ID": "SYSTEM","UPDATE_ID": null,"CREATE_DATE": null,"UPDATE_DATE": null,"DATA_STATUS": "N","LABEL_DEFAULT_POS_X": 0,"LABEL_DEFAULT_POS_Y": 0,"LABEL_DEFAULT_POS_Z": 0,"LABEL_AXIS_Y": 0,"LABEL_ANGLE": 0}]';

                var data = JSON.parse(text);

                api.row
                    .add(data[0])
                    .draw();

                //move added row to desired index (here the row we clicked on)
                var index = api.row(this).index(),
                    rowCount = api.data().length - 1,
                    insertedRow = api.row(rowCount).data(),
                    tempRow;

                insertedRow["Id"] = "DT_RowId" + rowCount;

                for (var i = rowCount; i > index + 1; i--) {
                    tempRow = api.row(i - 1).data();
                    api.row(i).data(tempRow);
                    api.row(i - 1).data(insertedRow);
                }
                //refresh the page
                api.page(currentPage).draw(false);


            });

            $(this).on('change', "select.team_ddl", function (e, d) {
                var sel = $(this)[0],
                    index = $(this).parent().parent()[0].rowIndex - 1,
                    opt = sel.options[sel.selectedIndex];
                api.cell(index, 11).data(opt.value).draw();
                api.cell(index, 12).data(opt.text).draw();
            });
        },
        aoColumns  : [
            //{ data: 'check', defaultContent: '' },
            { data: 'Id', "sWidth": "300px" },
            null,
            {
                "data": null, "sortable": false,
                 "sWidth": "300px",
                render: function (data, type, row, meta) {
                    return data.Id;
                }
            },
        { data: 'ORGANIZATION_ID', "sWidth": "300px"},
        { data: 'LOCATION_ID', "sWidth": "300px"},
        { data: 'LOCATION_B', "sWidth": "300px"},
        { data: 'LOCATION_F', "sWidth": "300px"},
        { data: 'LOCATION_A', "sWidth": "300px"},
        { data: 'STORE_TYPE', "sWidth": "300px"},
        { data: 'DESCRIPTION', "sWidth": "300px"},
        { data: 'LOCATION_TYPE', "sWidth": "300px"},
        { data: 'LOCATION_TYPE', "sWidth": "300px"},
        { data: 'LOCATION_TYPE_NAME', "sWidth": "300px" },
        { data: 'LOCATION_X', "sWidth": "300px"},
        { data: 'LOCATION_Y', "sWidth": "300px"},
        { data: 'LOCATION_Z', "sWidth": "300px"},
        { data: 'COLOR_R', "sWidth": "300px"},
        { data: 'COLOR_G', "sWidth": "300px"},
        { data: 'COLOR_B', "sWidth": "300px"},
        { data: 'LEADER_POS_TOP', "sWidth": "300px"},
        { data: 'DIFF_X_TOP', "sWidth": "300px"},
        { data: 'DIFF_Y_TOP', "sWidth": "300px"},
        { data: 'DIFF_Z_TOP', "sWidth": "300px"},
        { data: 'LEADER_BREAK_TOP', "sWidth": "300px"},
        { data: 'LEADER_POS_360', "sWidth": "300px"},
        { data: 'DIFF_X_360', "sWidth": "300px"},
        { data: 'DIFF_Y_360', "sWidth": "300px"},
        { data: 'DIFF_Z_360', "sWidth": "300px"},
        { data: 'LEADER_BREAK_360', "sWidth": "300px"},
        { data: 'SHELVES_COUNT', "sWidth": "300px"},
        { data: 'CAMERA_ANGLE', "sWidth": "300px" },
        { data: 'CREATE_ID', "sWidth": "300px"},
        { data: 'UPDATE_ID', "sWidth": "300px"},
        { data: 'CREATE_DATE', "sWidth": "300px"},
        { data: 'UPDATE_DATE', "sWidth": "300px"},
        { data: 'DATA_STATUS', "sWidth": "300px"},
        { data: 'LABEL_DEFAULT_POS_X', "sWidth": "300px"},
        { data: 'LABEL_DEFAULT_POS_Y', "sWidth": "300px"},
        { data: 'LABEL_DEFAULT_POS_Z', "sWidth": "300px"},
        { data: 'LABEL_AXIS_Y', "sWidth": "300px"},
        { data: 'LABEL_ANGLE', "sWidth": "300px"}
        ],
        columnDefs: [
            {
                'targets': 0,
                "orderable": false,
                "sortable": false,
                'checkboxes': {
                    'selectRow': true
                }
            },
            {
                targets: 1,
                type: "dom-text",
                "searchable": false,
                "orderable": false,
                "className": "dt-center",
                render: function (data, type, row, meta) {
                    return "<i class=\"fa fa-plus-square\" aria-hidden=\"true\"></i>";
                }
            },
            {
                targets: 10,
                "searchable": false,
                "sortable": false,
                render: function (data) { return createSelect(data); }
            },
            {
                targets: 11,
                visible: false
            },
            {
                targets: 12,
                visible: false
            }
            //{ "width": "100px", "targets": [0] }
        ],
        select: {
            'style': 'multi+shift',
            'selector': 'td:first-child',
            "blurable": false,
            info: false
        },
        order: [[3, 'asc'], [4, 'asc']],
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            var info = $(this).DataTable().page.info();
            $("td:nth-child(3)", nRow).html(info.start + iDisplayIndex + 1);
            return nRow;
        }
    });

I have tried some adviced, like turn off autoWidth, set num% width ,use table-layout: fixed ,set static css into table , nothing work
help me plese!
thanks.

colin · September 2020

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

systemsNatu · September 2020

use this to change

$('.table').dataTable({
bAutoWidth: false,
aoColumns : [
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '15%' },
{ sWidth: '10%' }
]

});

https://stackoverflow.com/questions/19819597/datatables-setting-column-width

Width set is not work

Width set is not work

there is my code

Replies

use this to change

});

Howdy, Stranger!

Categories

DataTables

Width set is not work

Width set is not work

there is my code

Replies

use this to change

});

Howdy, Stranger!

Quick Links

Categories

DataTables