Rajan Singh
Rajan Singh

Reputation: 31

How to increase Column width in datatable

$(document).ready(function() {
    var myTable = $('#example').DataTable({
      "serverSide": true,
      "processing": true,
      "paging": true,
      "autoWidth": false,
      //"searching": { "regex": true },
      searching: false,
      "lengthMenu": [ [10, 25, 50, 100, 250,500 ,1000], [10, 25, 50, 100, 250,500 ,1000] ],
      "ajax": {
          "type": "POST",
          "url": "packetsScannedListData?total=" +total ,
          "dataType": "json",
          "contentType": 'application/json; charset=utf-8',
          "data": function (data) {
              var info = $('#example').DataTable().page.info();
              pageOrders = {};
              return JSON.stringify(info);
          } 

    }, 
      "columns": [
                { "data": "orderNo" },
                { "data": "crderDate" },
                { "data": "clientName" }
             ],

     }); 

Upvotes: 1

Views: 87

Answers (4)

varad mayee
varad mayee

Reputation: 619

You can do it by

$('#example').dataTable( {
  "columns": [
    { "width": "20%" },
    null,
    null,
    null,
    null
  ]
} );

this will setup first column width 20%

Upvotes: 0

Tharsan Sivakumar
Tharsan Sivakumar

Reputation: 6531

You can set the column with like

 "columns": [
                { "data": "orderNo" , "width":"20%" },
                { "data": "crderDate" , "width":"50%" },
                { "data": "clientName" , "width":"30%" }
             ],

https://datatables.net/reference/option/columns.width

Upvotes: 2

Nitin Dhomse
Nitin Dhomse

Reputation: 2602

Like this, Set the first column's width to 20% with

$('#example').dataTable( {
      "columns": [
        { "width": "20%" },
        null,
        null,
        null,
        null
      ]
    } );

Upvotes: 1

Hicham Zouarhi
Hicham Zouarhi

Reputation: 1060

you can add :

"columnDefs": [
    { "width": "percent%", "targets": numOfDesiredColumn }
]

Upvotes: 1

Related Questions