Overview
jQuery DataTables already has official plug-in for column reordering ColReorder. But if you need the ability to resize columns, you may want to use ColReorderWithResize instead.
Plug-in can be initialized multiple ways:
-
Using dom option and adding character
R.var table = $('#example').DataTable({ 'dom': 'Rlfrtip' }); -
Using
new $.fn.dataTable.ColReorder().var table = $('#example').DataTable(); new $.fn.dataTable.ColReorder(table);
Example
Allow column resizing only
You can disable column reordering and allow column resizing only by setting colReorder.allowReorder option to false.
var table = $('#example').DataTable({
'dom': 'Rlfrtip',
'colReorder': {
'allowReorder': false
}
});
ColReorder position not changed when drag columns one place to another pokace
$(document).ready(function () {
var page_load = true;
var new_array = [];
var table = $(‘#example’).DataTable({
“ajax”: {
“url”: “https://gyrocode.github.io/files/jquery-datatables/arrays.json”,
“type”: “GET”,
“dataType”: “json”,
“complete”: function(res) {
console.log(“api complete “);
new_array.map(function(v, i) {
$(“#example thead tr th”).eq(i).width(v);
});
page_load = false;
}
},
‘dom’: ‘Rlfrtip’,
// ‘scrollX’: true,
‘stateSave’: true,
‘colReorder’: {
‘allowReorder’: true
},
stateSaveCallback: function (settings, data) {
if(page_load == false) {
var columns = data[‘columns’];
$.each(columns, function (index, el) {
data[‘columns’][index][‘width’] = $(“#example thead tr th”).eq(index).width();
});
console.log(data);
$.ajax({
“url”: “http://blakbit.com/dt_test.php?id=example”,
“data”: data,
“dataType”: “json”,
“type”: “POST”,
“success”: function () { }
});
}
},
stateLoadCallback: function (settings, callback) {
new_array = [];
$.ajax({
url: ‘http://blakbit.com/dt_test.php?id=example&load’,
dataType: ‘json’,
//async : false,
success: function (json) {
console.log(“json “, json);
var table_columns = json.columns;
// let load_index = 0;
for(var i = 0; i < table_columns.length; i++) {
if(table_columns[i].visible == true) {
var width = table_columns[i].width;
if(width) {
new_array.push(width);
}
}
}
callback(json);
}
});
}
});
});
You have to add library ‘ColReorderWithResize.js’.
hi,
I am getting the following errors
Uncaught TypeError: Cannot read properties of null (reading ‘dt’)
at ColReorder._fnStateSave (ColReorderWithResize.js:903)
at S.fn.init.<anonymous> (ColReorderWithResize.js:773)
at jquery.dataTables.js:6700
at Function.map (jquery-3.6.0.min.js:2)
at _fnCallbackFire (jquery.dataTables.js:6699)
at _fnSaveState (jquery.dataTables.js:6381)
at _Api.<anonymous> (jquery.dataTables.js:8761)
at _Api.iterator (jquery.dataTables.js:7091)
at _Api.<anonymous> (jquery.dataTables.js:8750)
at _Api.visible (jquery.dataTables.js:7258)
thanks for your great plugin, just a question about save state…it’s possible?
Hello,its not saving state of a table . Is it possible?
I am not the author of this plugin, apparently state saving is not supported, see github.com/jeffreydwalter/ColReorderWithResize/issues/25.
HI,
My table has twelve columns so when using this plugin it doesn’t work resize
Please try using option
scrollX: true, see this example.