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 mik, you can catch it like this:

       Self.oTable.on('column-resize.dt.mouseup', function(event, oSettings) { // do something here. });
  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+” )
    } );
    } );

  3. Your code worked fine for me. Try my exact code.

            
                
                    
                        Name
                        Date
                        Address
                        Yes/No
                    
                
                
                    
                        
                            Jeff
                        
                        
                            04/07/2018
                        
                        
                            123 My Way
                        
                        
                            Yes
                        
                    
                        
                            Joe 
                        
                        
                            01/01/1999
                        
                        
                            123 Her Way
                        
                        
                            Yes
                        
                    
                    
                        
                            Sparky 
                        
                        
                            01/01/2011
                        
                        
                            123 His Way
                        
                        
                            No 
                        
                    
                    
                        
                            Blah 
                        
                        
                            05/05/1995
                        
                        
                            123 Their Way
                        
                        
                            No 
                        
                    
                
            
    
    $(document).ready( function () {
        var divExample = $('#t1');
        var tableExample = divExample.DataTable({
            "paging": false,
            "searching": true,
            "stateSave": true,
            "dom": 'Rlfrtip'    
        });
    
        $("#t1 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+'' )
            } );
        } );
    } );
    

  4. Also, to fixed a column and disallow it from being re-ordered and resized

    
    // Apply fixed column feature on table.
    new $.fn.dataTable.FixedColumns(_table, {leftColumns: 1}); // Note: leftColumns: 1 = Number of columns (counting from the left) to disallow. if from right use rightColumns: 1 or both if required.
    // Apply column position re-ordering and resizing features on table.
    new $.fn.dataTable.ColReorder(_table, {fixedColumnsLeft: 1});// Note: fixedColumnsLeft: 1 = Number of columns (counting from the left) to disallow. if from right use fixedColumnsRight: 1 or both if required.
    
    

    Finally the following plugin is need for the datatable fixed column:
    https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js

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)

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