I would like to know if it is a bug.
Int the test case, I have the first and last columns that are not reorderable.

If you try to move the second to last column to the right with the reorderable button on the header, you cannot (that is normal for me as the last column is not reorderable)

But, if you use the button "reorderRight", you can see that you are able to move the second to last column to the right.

Is it normal that there is two different behavior?

And it is the same for the first and the second column if you want to make a test.

Thanks in advance for you answer and have a nice day.

Lolo

In my production program, I keep getting this pesky error message: "DataTables warning: table id=mfoptable - ColReorder - column count mismatch"

It happens whenever I update the table headers and then re-initialize.

I've tried recreating the error in a demo program using same html and dt version, but unfortunately, unless I force a "th and td" mismatch, I cannot get the error to repeat.

In the demo, you can hit the botton: "Change column headers." Success each time, no errors! It simply updates the html and ColumnsDefs options with each toggle, then re-initializes.

But the "same code" in the production program results in the error each time.

I've been suppressing it with: DataTable.ext.errMode = 'none';

So, my question: Is the any way to see more of what is triggering the message?

I've already performed every suggestion in your note: https://datatables.net/manual/tech-notes/18

Thanks, as always, in advance.

I have table with dynamic data. When using YADCF, searchBuilder and colReorder I got error: can't access property "mData", N.aoColumns[l] is undefined, when reordering the columns. The error seams to come from YADCF.

It works when:
- I turn off YADCF
- or removing searchBuilder
- or have static data direct in my HTML

In this test case I get error, but still it seem like the colReorder is working, however, in my main project, the order get messed up. Am I missing somthing in the dynamic data setup?

Test case:
https://jsfiddle.net/supernova404/9fdsr5cj/216/

Alternatively, I could use the details.drop flag in conjunction with those events but I have not observed the value of this to ever be defined in my testing

The effect can be seen in this example : https://datatables.net/extensions/colreorder/examples/initialisation/scrolling.html

Thanking you in advance.

Best regards,
Jiny Jose

The Contacts form is a multi-level form which in the parent uses rowOrder sorting and also a dependent field.

parentEditor.dependent( 'project_contacts.country_code', '/bin/contacts/regions' );

This works great when selecting a country then a region. However through quite some testing I identified a failure with rowOrder. In the image you will see 10 rows. Excluding the nancy row the first 4 and last 4 have no country. If I attempt to do a reorder contained within either set roworder works splendidly.

Moving around 1-4 or 7-10 is great. When I reorder the Zigfried row with a country selected the the reorder works but returns a console error with regions and reorder subsequently fails.

The console error image:

With country/regions dependent working, what is happening with dragging that causes this issue?

My problem is:
If I reorder columns the search field in the header of the column does not seem to move. But it should move jointly with the rest of the column of course!

This is the column search BEFORE reordering:

And this is it AFTER reordering:

@kthorngren
Kevin, you should be an expert on this, I guess ... You helped me build this to make it work:

initComplete: function () {
    if ( colSearchPage ) {
        //save the loaded state regarding column visibility
        var colArray = [];
        if ( stateSave ) {
            colArray = ctrTable.state().columns; 
        }
        //set all table columns to visible
        ctrTable.columns().visible( true );
        var table = this.api();
        $('.filterHead', table.table().header()).each( function (i) {
            var title = (lang === 'de' ? 'Suche ' : 'Search ') + $(this).text();
            var column = table.column(i);
            var throttledSearch = $.fn.dataTable.util.throttle(                        
                function (e) {
                    var code = e.which;
                // 8: backspace, 46: delete, 13: enter, 32: space, 
                // 59 or 186: semi-colon,
                // 188: comma, 189: dash or minus, 190: period
                    if ( code == 13 ) { //enter key
                        e.preventDefault();
                    }
                    var txt = $(this).val();
                    if ( txt.length > 1 || code == 8 || code == 46 ) {
                        column
                            .search(txt)
                            .draw();
                    }
                },
                3000
            );
            $('<input type="text" placeholder="'+title+'" class="text-muted"/>')
                .appendTo( $(this).empty() )
                .on( 'keyup change', throttledSearch); 
        } ); 
        //restore the loaded state regarding column visibility
        $.each(colArray, function(key, value) {
            if ( ! value.visible ) {
                ctrTable.column(key).visible( false );
            }
        })
    }
},

I know the two-step method works:

var table = $('#example').DataTable( {
    colReorder: true
} );

table.colReorder.order( [ 0, 1, 2, 3, 4, 5 ], true );

But I would like to do something like:

var table = $('#example').DataTable( {
    colReorder: {
        enable: true,
        order:  [ 0, 1, 2, 3, 4, 5 ],
        original: true
    }
} );

If not possible, no big deal.

Thanks, as always!

    <table id="order_products" class="table">
        <thead>
            <tr>
                <td></td>
                <td></td>
                <td><input /></td>
                <td><input /></td>
            </tr>
            <tr>
                <th></th>
                <th scope="col" style="width: 1em;">ID</th>
                <th scope="col" style="width: 1em;">Order ID</th>
                <th scope="col">Customer</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    var table = $('#order_products').DataTable({
        dom: 'lrBtip',  
        ajax: {
            url: '/api/v1/admin/order/product',
            dataSrc: 'data'
        },
        columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            {data: 'id'},
            {data: 'order_id'},
            {data: 'customer'}
      ],
        select: true,
        serverSide: true,
        processing: true,
        colReorder: true,
        initComplete: function() { init_search(this, g_filter_sources) }
    });

function init_search(table, filter_sources) {
    var promise = $.Deferred();
    var columns_left = table.api().columns().count();
    table.api().columns().every(function() { 
        column = this;
        $('td:nth-child(' + (this.index() + 1) + ') input', 
            $(this.header()).closest('thead'))
            .each((_idx, item) => init_search_input(item, column))
            .val('');
        columns_left--;
        if (!columns_left) {
            promise.resolve();
        }
    });
    return promise;
}

function init_search_input(target, column) {
    $(target).on('keyup change clear', function () {
        if ( column.search() !== this.value ) {
            column
                .search(this.value, false)
                .draw();
            // console.log(column.dataSrc(), this.value);
        }
    });
}

Filtering works fine until the moment I reorder columns. In this case there are two filterable columns: order_id and customer. If I swap them the filter inputs still work as they were on their original places.

I tried to add reorder event handler and reinitialize filtering like that:

table.on('column-reorder', () => { init_search($('#order_products').dataTable(), g_filter_sources) });

but it didn't have any effect.

What could you suggest to overcome it?

Is there a way to make it so that a user's own column ordering does not reset if I add a new column at a later point?

Here's a basic example: http://live.datatables.net/vidiyabo/1/edit
Ordering saves, but resets when I edit and add a new column.

Thanks!

You can see from the picture, it's sorted descending by the column of 'no_surat'. But, however, i didn't understand why but the table that's showed in the actual page is sorted ascending.

Here's my code for my models:

public function get_surat_join()
{
return $this->db->table('tr_surat')
->join('ms_user', 'tr_surat.user_id=ms_user.user_id', 'left')
->join('ms_subbag', 'ms_user.id_subbag=ms_subbag.id_subbag', 'left')
->join('ms_bag', 'ms_user.id_bag=ms_bag.id_bag OR ms_subbag.id_bag=ms_bag.id_bag', 'left')
->join('ms_div', 'ms_user.id_div=ms_div.id_div OR ms_bag.id_div=ms_div.id_div', 'left')
->join('ms_akses', 'ms_user.id_akses=ms_akses.id_akses', 'left')
->join('tr_revisi', 'tr_surat.no_surat=tr_revisi.no_surat', 'left')
->join('(select r1.id_revisi, r1.tanggal_revisi, r1.no_surat from tr_revisi as r1 join (select max(id_revisi) id_revisi from tr_revisi group by no_surat) as r2 on r1.id_revisi=r2.id_revisi) as revisi', 'tr_surat.no_surat=revisi.no_surat', 'left')
->join('tr_surat as s', 's.no_surat=tr_surat.no_surat', 'left')
->groupBy('tr_surat.no_surat')
->orderBy('tr_surat.no_surat', 'DESC')
->get()->getResultArray();
}

Here's my code for my js script for the table:

$(document).ready(function() {
$('#table-surat-all').DataTable({
ordering:true,
"dom": '<"toolbar">frtip',
"info": false,
"oLanguage": {
"sSearch": "Search"
}
});
} );

I'll really hope you can help me, thank you

Hi folks - I recently discovered DataTables, and am really enjoying it. I switched to DataTables for the colreorder extension, so that I could re order columns on my table - so far, it's been great! The table I'd been using it on, had just a single <tr> tag within <thead>. However, today I tried to make another table, but on my new table, my table header has a sub header (I mean, two <tr> tags within <thead> - the jsfiddle above shows the simple example). I noticed that the col reordering only applies to the lowest row in the table header (the sub columns). Is there a way to control this, so that only the top row is re-orderable? Or is this not currently possible?

Thanks so much in advance.

(P.S. I realize the jsfiddle is giving console errors from DataTables - locally, I am not receiving any errors, but I have DataTables downloaded locally, not sure what's the exact difference. Either way - the column re-ordering is happening in the jsfiddle, but just like it does locally, it only applies to the sub headers.)

On the first load, the dynamic table is complete generated, with the colReorder, and this works fine

But then I need to generate another dynamic table with another data, and I need to use the same table ID
I call the DataTable().clear() and when I call DataTable.destroy(), it gives me an error like the one below

"Uncaught TypeError: Cannot read properties of null (reading 'dt')
at ColReorder._fnStateSave (dataTables.colReorder.js:853)"

If I don't call the destroy() method, I can't initialise another dynamic table using the same table ID...

Can someone help me please?

I'm using angular 9 and the package versions are
"datatables": "^1.10.18",
"datatables.net": "^1.11.2",
"datatables.net-bs": "^1.11.2",
"datatables.net-bs4": "^1.11.2",
"datatables.net-colreorder": "^1.5.4",
"datatables.net-colreorder-bs4": "^1.5.4"

Below is my DataTable() code

var _table = $('#datatable').DataTable(
{
select: true,
colReorder: true,
}
});

Can someone please help me?

Other than reordering the columns, if there another parameter which must be added to instruct drag/drop to link to the new position?

Demo at: https://www.dottedi.xyz/bin/notepad.php

The relevant parameters:

    info: true,
    dom: 'Bfrtip',
    select: true,
    order: [ 0, "asc" ], /* Not to be confused with rowOrder, this only changes the default initial sort column. */
    rowReorder: { dataSrc: 'notes.rowOrder', editor:  editor },

The columns:

    columns: [
      // { data: 'notes.rowOrder', className: 'reorder' },
      { data: 'notes.id'},
      { data: 'notes.title' },
      { data: 'notes.date' },
      { data: 'note_categories.name' },
      { data: 'notes.summary' },
      { data: 'notes.rowOrder', className: 'reorder' },
    ]

I have a problem with your extension, let me explain:

I have a table that contains several columns, one of which has numbers, when I want to sort this column by ascending numbers, it does not work well,

I get this problem for the column "Capacité théorique/heure", sur mon site https://www.hopstockagromecanique.fr/

Can you help me? Do you have a code to use to replace this way of processing?

Thank you,

I am creating a performance table of my co-workers, the intent is to keep track of their work and understand our overall efforts.

The efforts are showed by current month totals / total year
So in the first column I put the name and the other columns have their efforts indicators. Here goes an example

NAME | Visits realized | Opportunities Created | Projects Conluded
Jhon S | 10/ 300 | 2/44 |1/25

again: 10/300 means 10 this month and 300 in the current year.

Problem:
When I try to reorder by column it does not order by the number at left of the slash, it seems that it is somehow considering the data as a date I try to change the / by an # and the result is the same

How can I force to be interpreted as a String instead of date, or witch is the prettiest way to present this type of information

Thanks in advance!!

"order": [[ 12, 'asc' ]] /* columns from left to right starting at 0 */

However, as this module is reused across many pages on my website, I've written a condition which hides the first column if you're on a particular page, meaning that you may only see 12 columns - breaking the order value.

Is there a way to reverse the order to read right to left so my 13th column becomes 0?

$("#caseMainTable").DataTable({
                "fnRowCallback": function (nRow, data, iDisplayIndex, iDisplayIndexFull) {
                    if (data.IsRead == false)
                    {
                        $('td', nRow).css('color', 'orangered');
                    }
                },
                "responsive": true,
                "destroy": true,
                "processing": true,
                "colReorder": { order: [6,1,2,3,4,5,0,7,8,9,10] },
                "serverSide": true,
                "order": [[3, "desc"]],
                "lengthMenu": [
                    [10, 25, 50, 100, -1],
                    ['10 rows', '25 rows', '50 rows', '100 rows', 'Show all']
                ],
                "dom": 'Bfrtip',
                "buttons": ['pageLength',
                    {
                        extend: 'excelHtml5',
                        autoFilter: true,
                        sheetName: 'Exported data',
                        exportOptions: {
                            columns: ':visible'
                        }
                    }],
                "columnDefs": [
                    { responsivePriority: 1, targets: 0 },
                    { responsivePriority: 2, targets: [-1,-2,-3] },
                    { targets: -1, className: 'text-center align-middle' },
                    {
                        targets: '_all',
                        render: $.fn.dataTable.render.ellipsis(20, true, false)
                    }
                ],
                "ajax": $.fn.dataTable.pipeline({
                    "url": "/Case/loadCaseGrid",
                    "data": {
                        caseStatus: ischk,
                        region: regionv,
                        type: typev,
                        subtype: subtypev,
                        agent: Agentv,
                        caseActive: active,
                        caseInactive: inactive,
                        caseDel: isdel,
                        AppCase: isApp,
                        UnAppCase: isUnApp,
                        PendCase: isPnApp
                    },
                    "cache": false,
                    "type": "POST",
                    "datatype": "json"
                }),
                "columns": [
                    {
                        "title":'Approved ?',
                        "data": "IsApproved",
                        "visible":true,
                        "searchable": false,
                        "sortable": false,
                        "render": function (data, type, full, meta) {
                            if (data == "Approved") {
                                return '<span title="Approved"><i class="fa fa-thumbs-up" style="color:#227e77"></i></span>';
                            }
                            else if (data == "Disapprove") {
                                return '<span title="Disapproved"><i class="fa fa-thumbs-down"  style="color:#ef5350"></i></span>';
                            }
                            else {
                                return '<span title="Pending"><i class="fa fa-exclamation-circle" style="color:#d39e00"></i></span>';
                            }
                        }
                    },
                    { "title":'Case #', "data": "caseNumber", "autoWidth": true,"visible":true, },
                    { "title":'Description', "data": "caseDescription", "autoWidth": true,"visible":true, },
                    {
                        "title":'Register Date',
                        "data": "caseOpenDate",
                        "visible":true,
                        "autoWidth": true,
                        "render": function (data, type, row) {
                                if (data == null) {
                                    return "";
                                }
                                if (type === 'display' || type === 'filter') {
                                    return (moment.utc(data).format("DD-MMM-YYYY"));
                                }
                                return data;
                            }
                    },
                    { "title":'Status', "data": "status", "autoWidth": true,"visible":true, },
                    { "title":'Type', "data": "type", "autoWidth": true,"visible":true, },
                    { "title":'Sub Type', "data": "subType", "autoWidth": true,"visible":true, },
                    { "title": 'Region', "data": "CaseRegion", "autoWidth": true,"visible":true, },
                    { "title": 'Stage', "data": "Stage", "autoWidth": true,"visible":true, },
                    { "title": 'Original Complaint', "data": "OriginalComplaint", "autoWidth": true,"visible":true, },
                    { "title":'Assign To Agents', "data": "AssignAgent", "autoWidth": true,"visible":true, },
                    {
                        "title": "Action",
                        "searchable": false,
                        "sortable": false,
                        "data": null,
                        "render": function (data, type, full, meta) {
                            var status = full.status;
                            var Perm = '<a href="#" onclick="DownloadCase(\'' + full["caseId"] + '\')" title="Download"> <i class="fas fa-download" style="color:#227e77;font-size:1.5em"></i></a>';
                            Perm += '<a href="#" onclick="ConverttoPdf(\'' + full["caseId"] + '\' )" title="PDF"> <i class="far fa-file-pdf" style="color:red;font-size:1.5em"></i> </a>';
                            if ('True' == "True" && full["IsDeleted"] == "0") {
                                Perm += '<a href="#" onclick="DelCase(0,\'' + full["caseId"] + '\')" title="Recover"> <i class="far fa-trash-restore" style="color:#227e77;font-size:1.5em"></i> </a>';
                            }
                            else {
                                if ('True' == "True")
                                {
                                    Perm += '<a href="#" onclick="ConverttoPdf(\'' + full["caseId"] + '\')" title="PDF"></a>';
                                }
                                if ('True' == "True")
                                {
                                    if (status == "Closed")
                                    {
                                        if('True' == "True")
                                        {
                                            Perm += '<a href="#" onclick="AddEditCase(\'' + full["caseId"] + '\')"  title="Open"> <i class="far fa-edit" style="color:#227e77;font-size:1.5em"></i> </a>';
                                        }
                                    }
                                    else
                                    {
                                        Perm += '<a href="#" onclick="AddEditCase(\'' + full["caseId"] + '\')"  title="Open"> <i class="far fa-edit" style="color:#227e77;font-size:1.5em"></i> </a>';
                                        Perm += '<a href="#" onclick="RelCase(\'' + full["caseId"] + '\')" title="Related Case"> <i class="fas fa-retweet" style="color:#227e77;font-size:1.5em"></i> </a>';
                                    }
                                }
                                if ('True' == "True" && full["IsDeleted"] == "1")
                                {
                                    Perm += '<a href="#" onclick="DelCase(1,\'' + full["caseId"] + '\')" title="Delete"> <i class="far fa-trash-alt" style="color:red;font-size:1.5em"></i> </a>' ;
                                }
                                Perm += '<a href="#" onclick="RemoteReview(\'' + full["caseId"] + '\')" title="Remote Review"> <i class="fa fa-link" style="color:yellowgreen;font-size:1.5em"></i> </a>';
                            }
                            return Perm;
                        }
                    }
                ]
        })

Error messages shown:
No
Description of problem:
I have set the column predefined order but it display the standard order.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

$('#example').DataTable().data() gives this values:

And the display data could look like that:

After reordering of any column the internal data will be invalidated and again loaded from the DOM. So the internal data will look like that:

The next time the date column gets rendered (e.g. for sorting) it will not work correctly. I don’ t know how to prevent this behavior without copying the original data before rendering it. I would like to avoid this overhead.

I tried to check why the data is reloaded after the column was moved. As far as I can tell, the function $.fn.dataTableExt.oApi.fnColReorder has the 4th parameter invalidateRows. And if this parameter is not set the data will be invalidated:
if ( invalidateRows || invalidateRows === undefined ) { $.fn.dataTable.Api( oSettings ).rows().invalidate(); }

The mouse move event does not provide this parameter. If the colReorder is triggered from the API with the 4th parameter set to false everything works fine.

This will work:
$('#example').DataTable().colReorder.move( 2, 3, true, false );

This will invalidate the data (same like column moved by mouse):
$('#example').DataTable().colReorder.move( 2, 3);

Do I need to change my existing apps for sorting after column reorder to work? Or is there a better way to do this?

Thanks for your help

I've been researching the error and I verified that it is because the footerCallBack generates a "colspan" and with colspan it is not possible to use ColReorder.

Is it already possible to solve this problem?

Thanks,
Pavan