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

You Might Also Like

Comments

  1. Hi,

    I am trying to use this js ColReorderWithResize.js replace dataTables.colReorder.min.js

    the resize and reorder worked

    however, the column select input filter not working, it worked in dataTables.colReorder.min.js but not this new js

    is there a conflict?

    $(document).ready( function () {
        var divExample = $('#exampleTable');
        var tableExample =divExample.DataTable({
            "paging": false,
            "searching": true,
            "stateSave": true,
            "dom": 'Rlfrtip'    
        });
    
    //this code is filter//
    
    $("#exampleTable thead th").each( function ( i ) {
    var select = $('')
        .appendTo( $(this).empty() )
        .on( 'change', function () {
            tableExample.column( $(this).parent().index()+':visible'  )
                .search($(this).val() )
                .draw();
        } );
    tableExample.column(i ).data().unique().sort().each( function ( d, j ) {
        select.append( ''+d+'' )
    } );
    } );
    } );
    
  2. Hi,
    append select input filter to your example, not working

    $(“#example tfoot th”).each( function ( i ) {
    var select = $(”)
    .appendTo( $(this).empty() )
    .on( ‘change’, function () {
    table.column(i )
    .search( $(this).val() )
    .draw();
    } );

    table.column( i ).data().unique().sort().each( function ( d, j ) {
    select.append( ”+d+” )
    } );
    } );

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)