CODEWITHSUNDEEP
jquerydatatables
user3833682
user3833682

Reputation: 263

How to remove extra white space in jQuery DataTables

I'm using jQuery DataTables and having an issue with it

image

In Dest Port column there is a lot of extra space and same as in Sub Client and Prod Type columns and my initialization code is:

function calcDataTableHeight() {
    return $(document).height() - 320;
}

var browserScrollPercentage = function () {
     if($.browser.chrome) {
        return '178%';
     }else{
        return '228%';
     }
}

var oTable = new Datatable();
oTable.init({
    src: $("#tableOrder"),
    onSuccess: function (oTable) {
        // execute some code
    },
    onError: function (oTable) {
        // execute some code
    },
    loadingMessage: 'Loading...',
    dataTable: {
        "bStateSave": false,
        "bScrollAutoCss": true,
        "lengthMenu": [
            [30, 60, 90, 120, -1],
            [30, 60, 90, 120, "All"]
        ],
        "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 31 ]}],
        "pageLength": 30,
        "ajax": {
            "url": "order-ajax" // ajax source
        },
        "order": [
            [1, "desc"]
        ], // set first column as a default sort by desc
        scrollY: calcDataTableHeight(),
        "sScrollX": "100%",
        "sScrollXInner": browserScrollPercentage(),
        "bScrollCollapse": true,
        "sDom": '<"top">rt<"bottom"pi><"clear">',
        "bInfo": true
    }
});

I've tried many things from different sources but didn't succeed I also try trim in my jQuery code and also in PHP code but didn't work for me.

Upvotes: 2

Views: 7768

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58900

CAUSE

Like HTML tables, DataTables attempts to layout tables in an optimal format based on the data in the cells. When content is not long enough to fill the page, there will be white space in some columns.

SOLUTION

You can use columnDefs.width to target specific columns with targets and force certain width with width option.

For example, to set width of fifth and sixth columns, use the code below:

var table = $('#example').DataTable({
   columnDefs: [
       { targets: [4,5], width: '10%' }
   ]
});

DEMO

See this jsFiddle for code and demonstration.

Upvotes: 2

Related Questions