How to make columns of datatables.js resizable with jQuery UI

Question

I found a solution to resize table's columns in stackoverflow

jQuery UI Resize with table and colspans

I'm trying to apply it to a datatable that is populated using server side processing, but datatable doesn't allow change the column width.

I have tried this http://jsfiddle.net/BlackSRC/JvELx/2/

I have this simple datatable

<table id="datatable-1" class="table table-hover" style="width: 100%">
</table>

My datatable initialization is:

$(table).DataTable({
	'lengthMenu': [[10, 25, 50, 100], [10, 25, 50, 100]],
	'ordering': false,
	'processing': true,
	'serverSide': true,
	'dom': 'Blfrtip',
	'ajax': {
		'url': 'ajax.php',
		'type': 'GET'
	},
	'columns':[
		{'data': 'id', 'title': 'Id'},
		{'data': 'A', 'title': 'A'},
		{'data': 'B', 'title': 'C'},
		{'data': 'C', 'title': 'D'},
		{'data': 'D', 'title': 'E'}
	]
});

Anyone know how can resize column using datatables.js?

show us what you have tried so far.

Rajan Benipuri
– Rajan Benipuri

2017-10-26 21:31:59 +00:00
Commented Oct 26, 2017 at 21:31 — Rajan Benipuri
– Rajan Benipuri, Commented Oct 26, 2017 at 21:31

juntapao · Accepted Answer · 2017-10-30 00:26:49Z

1

Try to set autoWidth option to false on your datatable

$(table).DataTable({
    'lengthMenu': [[10, 25, 50, 100], [10, 25, 50, 100]],
    'ordering': false,
    'processing': true,
    'serverSide': true,
    'autoWidth': false,
    'dom': 'Blfrtip',
    'ajax': {
        'url': 'ajax.php',
        'type': 'GET'
    },
    'columns':[
        {'data': 'id', 'title': 'Id'},
        {'data': 'A', 'title': 'A'},
        {'data': 'B', 'title': 'C'},
        {'data': 'C', 'title': 'D'},
        {'data': 'D', 'title': 'E'}
    ]
});

then add css

table {
    width: 100%;
}

edited Oct 30, 2017 at 0:26

answered Oct 27, 2017 at 1:42

juntapao

4273 silver badges12 bronze badges

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

Comments

Twisty · Accepted Answer · 2019-08-14 23:49:00Z

1

I don't see an issue. You do want to run .DataTable() first, then run .resizable()

Example: http://jsfiddle.net/Twisty/ah67jopf/3/

JavaScript

$(function() {
  $(".data").DataTable({
    'lengthMenu': [
      [10, 25, 50, 100],
      [10, 25, 50, 100]
    ],
    'ordering': false,
    'processing': true,
    'serverSide': true,
    'dom': 'Blfrtip',
    'ajax': {
      'url': 'ajax.php',
      'type': 'GET'
    },
    'columns': [{
      'data': 'id',
      'title': 'Id'
    }, {
      'data': 'A',
      'title': 'A'
    }, {
      'data': 'B',
      'title': 'C'
    }, {
      'data': 'C',
      'title': 'D'
    }, {
      'data': 'D',
      'title': 'E'
    }]
  });
  $('table th').resizable({
    handles: 'e',
    minWidth: 18,
    stop: function(e, ui) {
      $(this).width(ui.size.width);
    }
  });
});

Updated

In the Stop callback, you can set the new size of the th element.

Hope that helps.

edited Aug 14, 2019 at 23:49

answered Oct 27, 2017 at 3:31

Twisty

31k2 gold badges30 silver badges50 bronze badges

9 Comments

gvd Over a year ago

This example work perfectly, is like my code, but mine is not working. I can see in the inspector that th width change, but in browser doesn't show the resize.

Twisty Over a year ago

@omixam do you see any errors in console? How are libraries being loaded, what order, in the <head>?

gvd Over a year ago

Any error in console.I disabled all libraries the order is the following: css: datatables and than jquery-ui, for JS: jquery, jquery-ui, and datatable.

Twisty Over a year ago

I would advise a different order: Jquery UI CSS, Datatable CSS, jQuery, jQuery UI, DataTable. Should work as you described. I assume you meant no errors appear in console?

gvd Over a year ago

I used the order that you suggest me, but the result is the same. There isn't errors in the console.

|

Collectives™ on Stack Overflow

How to make columns of datatables.js resizable with jQuery UI

2 Answers 2

Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related