Jquery datatable - Table header and columns width mismatching

Question

I'm looking for help jquery data-tables header and columns width size mismatching. i mean columns size is varying based on the text lenght(datatable values).How to fix the columns should be standard width and match with tale header.

Another issue is pagination.I'm looking pagination style like Example of pagination , but i'm not getting same style in my table.Please help me.

And another request for apply same theme which given example (theme redmond) to datatable.

Please find the below my datatable in jsfiddle JSFIDDLE

$("#products1").dataTable({
       "aaData": newarray,
       "bProcessing": true,
       "bDeferRender": true,
       "bFilter": false,
       "bJQueryUI": true,
       "sPaginationType": "full_numbers",
       "bRetrieve": true,
       "bPaginate": true,
       "bSort": true,
       "aaSorting": [[4, "desc"]],
       "iDisplayLength": 5,
       "oLanguage":{
                "sInfo":"_START_-_END_ of _TOTAL_",
                "oPaginate":{
                    "sFirst": "&lt;&lt;",
                    "sLast": "&gt;&gt;",
                    "sNext": "&gt;",
                    "sPrevious": "&lt;" 
                },
                "sLengthMenu":"Show _MENU_"
            },
       "aoColumns": [{"sWidth": "100%","sClass": "center","bSortable": false},
             {
            "sWidth": "150%","sClass": "center","bSortable": false},
             {
            "sWidth": "150%","sClass": "center","bSortable": false},
             {
            "sWidth": "150%","sClass": "center","bSortable": false}


            ],
        "aoColumnDefs": [{ "fnRender": function (o, val) {
            return o.aData[0];
        },
            "sClass": "HEADER","aTargets": [0]
    }, {
        "fnRender": function (o, val) {

            return o.aData[1];
        },
            "sClass": "list","aTargets": [1]
    }, {
    "fnRender": function (o, val) {

            return o.aData[2];
        },
            "sClass": " Number","aTargets": [2]
    },{
    "fnRender": function (o, val) {

            return o.aData[3];
        },
            "sClass": "Name","aTargets": [3]
    }]

});

codeomnitrix · Accepted Answer · 2013-07-05 12:00:36Z

4

You need to put this in table for fixed size column

EDIT: You missed to write table width and layout in style of table, I hope following will work for you

<table border="1" cellspacing="0" cellpadding="0" id="products" style="clear:both;layout:fixed;width:400px;">
    <col style="width: 40%"/>
        <col style="width: 30%"/>
        <col style="width: 10%"/>
        <col style="width:20%"/>

Check update updated fiddle

edited Jul 5, 2013 at 12:00

answered Jul 5, 2013 at 5:41

codeomnitrix

4,25920 gold badges68 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gutblender · Accepted Answer · 2014-10-10 16:09:57Z

2

It was just a minor typo by codeomnitrix, but the answer is correct. Instead of layout, it should be table-layout:

style="clear:both;table-layout:fixed;width:400px;"

This will overwrite the bootstrap CSS setting that causes the mismatch of header and body columns.

edited Oct 10, 2014 at 16:09

Gutblender

1,3501 gold badge12 silver badges25 bronze badges

answered Oct 10, 2014 at 15:26

Exigo

211 bronze badge

Comments

Stephen DuMont · Accepted Answer · 2017-06-13 22:15:44Z

2

this statement used in any context will match the header up with the columns. I would suggest binding it inside a function that is bound to the UI change.

$($.fn.dataTable.tables(true)).DataTable().columns.adjust();

https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/

answered Jun 13, 2017 at 22:15

Stephen DuMont

1,7111 gold badge12 silver badges6 bronze badges

Comments

UMAIR GHOURI · Accepted Answer · 2017-12-07 17:52:06Z

1

$('table.dataTable').wrap('<div class="datatableWrapperdiv"></div>')

with following css

.datatableWrapperdiv{ overflow-x:auto; width:100%; }

answered Dec 7, 2017 at 17:52

UMAIR GHOURI

111 bronze badge

Collectives™ on Stack Overflow

Jquery datatable - Table header and columns width mismatching

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related