I have the following table:
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Using this script I can scroll the 2nd columns onward and let 1st column (First name
) fixed.
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false
} );
new $.fn.dataTable.FixedColumns( table );
} );
JSFiddle
What I want to do is to manually interactively resize the first column on the fly. How can I achieve that?
In order to allow user to resize col , we have to handle three events: mousedown on the resizer: Track the current position of mouse. mousemove on document : Calculate how far the mouse has been moved, and adjust the width of the column. mouseup on document : Remove the event handlers of document.
How to fix column width in DataTable? The columns that are fixed in place by FixedColumns take their width from the parent DataTable. As such, the width of the column can be controlled using the columns. width option.
Use the arrow keys to move around the table. To enter action mode, press the Enter key or Space Bar. Columns can be resized in action mode.
There is no native method in FixedColumns API to do this. Instead, set the width through header()
, here setting the first column to 200px
:
table.tables().header().to$().find('th:eq(0)').css('min-width', '200px');
$(window).trigger('resize');
table.draw()
results in double scrollbars (disappearing upon resize though). Somehow FixedColumns is not fully included in a draw()
- not even FixedColumns update()
does this correct. But triggering resize
on the window does the job right.
forked fiddle -> https://jsfiddle.net/k7err1vb/
Update. The meaning of the question changed completely (?)
Well, there once was a great plugin ColReorderWithResize.js, but this works poorly with dataTables 1.10.x. So you could downgrade if the demand for a resizeable fixed column is essential. Apart from the new API
and default styling there is not so much difference between 1.9.x and 1.10.x - use 1.9.x myself in a project exactly because of the need of ColReorderWithResize
.
Some guy have made a colResize plugin -> https://github.com/Silvacom/colResize that works with 1.10.2 and up. Here used on OP's fiddle :
var table = $('#example').DataTable( {
dom: 'Zlfrtip',
//target first column only
colResize: {
exclude: [2,3,4,5,6,7]
},
...
})
demo -> https://jsfiddle.net/mhco0xzs/ and it "works" - somehow - but not nearly as smooth as the good old ColReorderWithResize.js. Someone could take the challenge to refactor ColReorderWithResize.js, but I myself have certainly not have time for that at the moment.
You should try using a plugin to add resizable header functionality. You can try using this: http://www.bacubacu.com/colresizable/
The question was asked and answered on StackOverflow.com already here: Resizable table columns with jQuery
I also have problems just like you and I use the following solution.
window.fixedColumns = new $.fn.dataTable.FixedColumns( table , { leftColumns: 3} );
//Events occur when changing column width.(paginate, sort , click, ... )
// $('.sorting').click....
// $('.paginate_button').click....
$('.DTFC_Cloned').width();
fixedColumns.fnRedrawLayout();
http://datatables.net/docs/FixedColumns/3.0.0/FixedColumns.html#fnRedrawLayout
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With