jQuery DataTables: Column reordering and resizing

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:

  1. Using dom option and adding character R.

    
    var table = $('#example').DataTable({
        'dom': 'Rlfrtip'
    });
    
  2. 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
    }
});

You May Also Like

Comments

  1. 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);

            }

          });

        }

      });

    });

  2. 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)

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.