https://jsfiddle.net/sancorUI/f85sgzwv/

Debugger code (debug.datatables.net):

-

Error messages shown:

-

Description of problem:

The fixedHeader extension miscalculates the width of all table headers when responsive is configured with a control column and that specific control column is hidden

I think the bug is in this function

_api_registerPlural("columns().widths()", "column().width()", function() {
    var columns = this.columns(":visible").count();
    var row = $("<tr>").html("<td>" + Array(columns).join("</td><td>") + "</td>");
    $(this.table().body()).append(row);
    var widths = row.children().map(function() {
        return $(this).outerWidth();
    });
    row.remove();
    return this.iterator("column", function(settings, column) {
        var visIdx = _fnColumnIndexToVisible(settings, column);
        return visIdx !== null ? widths[visIdx] : 0;
    }, 1);
});

widths has the array of width but this.iterator starts in column 1 (0 is the responsive control column but is hidden)

When I use a datetime and have a dependent on it:

.dependent('datetime_field', function (val, data, callback, e) {
    console.log('Do something here')
    return true
})

I always get this error when the Editor initially opens:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

It goes away after that first time even if I open the Editor again.

I haven't tested it otherwise, but I'm opening the Editor with e-edit:

editor.edit( row, opts);

Link to test case:

https://stackblitz.com/edit/vitejs-vite-zcrl5ek8?file=src%2Fmain.ts

Debugger code (debug.datatables.net):

N/A

Error messages shown:

Object literal may only specify known properties, and 'focused' does not exist in type
'Node | JQuery<HTMLElement> | ((idx: number, data: any, node: Node | null) => boolean) | RowSelector<any>[]'. (2353)

Description of problem:

I'm working with DataTables (keytable extension included) and TypeScript. These two method overloads appear to be missing the proper typing for selector modifiers:

https://datatables.net/reference/api/cell()#cell(-[-modifier-]-)
https://datatables.net/reference/api/row()#row(-[-modifier-]-)

Using selector modifiers such as { focused: true } results in a TypeScript error, even though it is valid according to the documentation.

Would you like me to submit a PR to address this?

The problem is being caused by this code In the Editor PHP library Editor.php (I think intoduced in v:2.4.0):

        // Paging makes little sense without an ordering clause, so if there is
        // no order to apply (possible in DT2 on the third click of a header)
        // we apply the primary key as the ordering value.
        if (!isset($http['order']) || count($http['order']) === 0) {
            $query->order($this->_pkey[0] . ' asc'); 
        }

My fix is to comment out the above code, which solves the problem, but it is a bit of an ugly fix.

An example of my JS:

    var table = $("#table_1").DataTable({
        ajax: {
            url: "/php/members.php",
            type: "POST",
        },
        serverSide: true,
        searchDelay: 800,
        columns: [
            {
                data: null,
                defaultContent: "",
                className: "control",
                searchable: false,
                responsivePriority: 10,
            },
            {
                data: "no",
                render: $.fn.dataTable.render.text(),
                responsivePriority: 10,
            },
            {
                data: "nm",
                render: $.fn.dataTable.render.text(),
                responsivePriority: 10,
            },
            {
                data: "email",
                render: $.fn.dataTable.render.text(),
            },
            {
                data: "mob",
                render: $.fn.dataTable.render.text(),
                searchable: false,
            },
            {
                data: "day",
                render: $.fn.dataTable.render.text(),
                searchable: false,
            },
            {
                data: "night",
                render: $.fn.dataTable.render.text(),
                searchable: false,
            },
            {
                data: "secemail",
                render: $.fn.dataTable.render.text(),
            },
            {
                data: "stat",
                render: $.fn.dataTable.render.text(),
                searchable: false,
                responsivePriority: 10,
            },
            {
                data: "cur",
                render: function (data, type, row) {
                    if(data == true) {
                        return "Y";
                    } else {
                        return "N";
                    };
                },
                className: "dt-center",
                searchable: false,
                responsivePriority: 10,
            },
        ],
        ordering: false,
        pagingType: "full_numbers",
        responsive: true,
    });

And the associated PHP:

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;

// Build our Editor instance and process the data coming from _POST
Editor::inst($db, 'members', 'ID')
    ->fields(
        Field::inst('members.memb', 'no'),
        Field::inst('members.name', 'nm'),
        Field::inst('members.pday', 'day'),
        Field::inst('members.pnight', 'night'),
        Field::inst('members.mobile', 'mob'),
        Field::inst('members.membemail', 'email'),
        Field::inst('members.membemail2', 'secemail'),
        Field::inst('members.status', 'stat'),
        Field::inst('members.isfinancial', 'cur')
    )
    ->validator(function($editor, $action, $data) {
        if ($action !== Editor::ACTION_READ) return ERRMSG['action'];  // Only allow read
    })
    ->process($_POST)
    ->json();

Is there some method to prevent orderng that I have missed?

The event doesn't trigger the handler regardless if it's applied before or after table initialization. Listening on either 'childRow' or 'childRow.dt' makes no difference and neither does using a static data set or AJAX for table data. I've also tried adding and removing a row manually afterwards with DtTable.row.add() and DtTable.row().remove().

Am I doing something wrong or is this event deprecated or perhaps just not working in the latest version of DataTables?

At first I thought it was the column control's filters. I waited until it got updated and just downloaded everything again today, and it still does it. Even on tables without any Column Control when they load it readjusts itself for a few seconds. No AJAX calls either. It is just data local in the table. I have one page with two tables side by side- one has like 130 rows and the other a little over 1000 with each showing 15 rows at a time in pages. When the page loads the tables go nuts with one getting bigger and one getting smaller. It takes 3-5 seconds for them to stop sizing and settle, and is really annoying. Sometimes the columns will jump in size 10-20 pixels, and towards the end of the process it seems to adjust 1-3 pixels in size.

To reproduce, simply resize the window vertically only to trigger the appearance/disappearance of the table body scroll bar...note that the column headings do not resize to reflect the appearance/disappearance of the scrollbar (as they do when resizing the window both horizontally and vertically simultaneously).

In the code, this looks to be due to a conscious choice to only monitor for changes to widths (i.e., to the 0-height dt-autosize element) for purposes of triggering re-adjustment of the columns. However, when the scrollY value is set based on 'vh' units (e.g., scrollY: '50vh', scrollY: 'calc(100vh - 300px)', etc. ), which is done to avoid the potential appearance of an 'ugly' second scrollbar in the element containing the table as a whole, even a pure change in height can cause the appearance/disappearance of the body scrollbar, resulting in this visual glitch.

As a local fix, I've tried modifying the code to attach the ResizeObserver directly to the dt-scroll-body element instead of to dt-autosize so as to detect both width and height changes, which seems to address this issue- though not sure if this will have other/unitended consequences to performance, or otherwise (i.e., the fact that the dt-autosize element was introduced in the first place perhaps suggests there's something wrong with simply observing dt-scroll-body directly)?

The example is broken. When using the pagination controls, the headers become misaligned and only show correctly on the first page.

Can this be fixed?

I hope you are doing well! I think I might have found a bug:

Description of problem:
When using columnDefs.orderData in DataTables 2.1.8, the sorting arrow icons are not toggled in the "target" column but in the (potentially hidden) column with the "orderData".
The expected result would be that the sorting arrow icons are updated in the sorted-on column, as is the case with DataTables 1.13.11.

Testcase with DataTables 2.x (nightly): https://live.datatables.net/jivalori/1/edit?html,js,output (wrong behavior)
Testcase with DataTables 1.13.11: https://live.datatables.net/biqogobi/1/edit?html,js,output (expected behavior)

Best wishes,
Tobias

However, if a <thead> only has a single <tr> with cells that use colspan, a JavaScript error is raised.

Here is a test case with a single header row and one colspanned cell in it:
https://live.datatables.net/nipufeda/1/

However, when duplicating the row (I prepared that as a HTML comment in the test case), everything works fine again.

Getting a 502 error running ajax test cases.

Kevin

Please let me know if you need more from my example.

Link to test case:

https://stackblitz.com/edit/stackblitz-starters-toglu3?file=index.html

Debugger code (debug.datatables.net):
Not sure what you want here...
Error messages shown:
not error message shown
Description of problem:
Basically the checkbox is not showing checked when using inline row inserting (possible edit to but I haven't got that far yet). It will only show checked when it looses focus. If I remove a class from a div above called "DTE_Field" the checkbox starts working right but then the displaying of the label appears which is not wanted.

Steps and Description is on the test case page I set up for you at the top of the page.

Any help in resolving this would be great

I have been successfully using the code outlined by the example here https://datatables.net/blog/2019/parent-child-editing-in-child-rows

I recently upgraded to the latest libraries and have found that the table controls in the child table no longer align. (ie topStart does not align with topEnd. However, they do in the parent table.

If you look at https://datatables.net/blog/2019/parent-child-editing-in-child-rows you will also see the issue.

The header-cell of the select column is always wider than the cell of the column itself.
I think the reason for that is the way the width gets calculated for the column. I debugged through the datatable.net code and recognized that the calculation for the column itself works fine and the select column gets calculated with about 20px, which is more or less expected.
But the calculation method is later on called again, i think when the rowGroup extension gets initialized and uses the rowgroup levels as calculation base. The rowGroup div is over the whole width of the table. The table uses btw 100% width.
So it ends up calculating a width of the 100% of the table for the first column.
The following colgroup gets rendered:
<colgroup><col data-dt-column="0" style="width: 1687px;"><col data-dt-column="3" style="width: 676.641px;"><col data-dt-column="4" style="width: 91.8984px;"><col data-dt-column="5" style="width: 205.047px;"><col data-dt-column="6" style="width: 122.234px;"><col data-dt-column="7" style="width: 75.5781px;"><col data-dt-column="8" style="width: 106.07px;"><col data-dt-column="9" style="width: 112.906px;"><col data-dt-column="10" style="width: 138.664px;"><col data-dt-column="11" style="width: 124.961px;"></colgroup>

The total width of the table is 1678px. So it assigns the total table width to the first column.
Is this a problem of the calculation? Or is there anything we might be doing wrong on our side?

We have similar issues with the width of details-control, which did only use minimal width in version 1.x. But since update to 2.x in some tables the width has changed and it uses much more space than necessary. Because we render only an icon in there, the calculated space should actually be everywhere the same. But maybe this is worth another ticket?

Setting the width property for the above mentioned columns that not change anything. It gets ignored.

    ->upload( Upload::inst( savePath.'__NAME__')//.__EXTN__' )
        ->db( 'files', 'id', array(
            'filename'    => Upload::DB_FILE_NAME,
            'filesize'    => Upload::DB_FILE_SIZE,
            'web_path'    => Upload::DB_FILE_NAME, //Upload::DB_WEB_PATH,
            'system_path' => Upload::DB_SYSTEM_PATH,
            'extension' => Upload::DB_EXTN,
            'createdate' => date("Y-m-d H:i:s") ,
            'modifiydate' => date("Y-m-d H:i:s")    
        ) )

editor 2.0.10
Upload.php
line 649

    default:
        if ( is_callable($prop) && is_object($prop) ) { // is a closure
            $q->set( $column, $prop( $db, $upload ) );
        }
        else {
            $q->set( $column, $prop );
        }

        break;

editor 2.2.22
Line 662

default:
    $val = $prop;

    // Callable function - execute to get the value
    if (is_callable($prop) && is_object($prop)) {
        $val = $prop($db, $upload);
    }

    // If the primary key value was set - use that
    if ($column === $this->_dbPKey) {
        $insertedId = $val;
    }

    if (is_string($val) && !empty($val)) {
        // Allow for replacement of __ID__, etc when the value is a string
        $pathFields[$column] = $val;
        $q->set($column, '-'); // Use a temporary value (as above)
    } else {
        $q->set($column, $val);
    }

    break;

Web debug:
The fields "createdate" and "modifiydate" values are set to "-"

Error:
After updating to Editor 2.2.2 and trying to upload a file I started receiving the following error:

"An SQL error occurred: SQLSTATE[22007]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]Conversion failed when converting data and/or time from character string."

Checking the web response the two date fields I specified "createdate" and "modifydate" values were both set to hyphen "-"

After investigating the error it appears to be caused in the Upload.php code section as shown above.

I have reverted the "default" section of code in Upload.php to the Editor 2.0.10 version (as above) and it is working again. The Editor reference states that you can add additional fields to the array. I am unsure how to resolve the issue.

The same issue occurs on using PHP 8.1.23 and 8.1.24

Debugger code (debug.datatables.net): The issue doesn't seem to pop a Datatables error. It results in an error sent to Sentry.

Error messages shown:
On Sentry, the error looks like this:
Object captured as exception with keys: isTrigger, jQuery3700892121091154535

Description of problem:
I'm using the DataTables plugin and encountering errors in production. I suspect it's related to sorting, since the requested URL includes these parameters:

• filters[fiscal_year]=2024
• filters[month]=04
• filters[sales_doc_type]=month_summary
• ... (other filter parameters)
• draw=3
• columns[0][data]=placeholder
• columns[0][name]=placeholder
• ... (other column definitions)
• order[0][column]=3
• order[0][dir]=asc
• start=0
• length=50
• search[value]=
• search[regex]=false
• _=1719849866708

While sorting usually doesn't cause errors, it makes testing difficult in this case.

I've encountered two types of errors:

{"isDefaultPrevented":"[Function: returnTrue]","isTrigger":3,"jQuery37008835334434631363":true,"namespace":"dt","result":false,"rnamespace":{},"target":"[HTMLElement: HTMLTableElement]","timeStamp":1719826898448,"type":"error"}

and

{"isTrigger":3,"jQuery37008835334434631363":true,"namespace":"dt","rnamespace":{},"target":"[HTMLElement: HTMLTableElement]","timeStamp":1719826898448,"type":"error"}

There's a similar unresolved issue on the DataTables forum: https://datatables.net/forums/discussion/57125/i-would-like-to-know-the-cause-of-this-error-i-could-not-find-the-solution

Could the issue be related to extremely long ajax requests? We send a lot of data via ajax to be handled by datatables.

Thanks!

At first glance, the follwing line in fixedColumns.mjs triggers the problem:

applyStyles(dt.column(idx + ':visible', { page: 'current' }).nodes().to$(), 'body');

To reproduce, go to a page other than the first page and reload the output-window.

Upgraded to Datatables 2.0.3 and Select 2.0.0 now the following code that previously worked generates the error message.

resident_table.on( 'select', function ( e, dt, type, indexes ) {
    resident_table[type](indexes).nodes().to$().removeClass('warn');
};

The example on the page: https://datatables.net/reference/event/select
Generates the same error.

static function add_bindings(&$a, $vals)
{
    foreach($vals['bindings'] as $key => $value) {
        $bindings[] = array(
            'key' => $key,
            'val' => $value,
            'type' => PDO::PARAM_STR
        );
    }
}

Note that $a is passed by reference, but $a is not used in the function - a new array named $bindings is created.

All line numbers are the line numbers found on this page: https://github.com/DataTables/DataTablesSrc/blob/master/examples/server_side/scripts/ssp.class.php

Also note that on line 387, the variable $bindings is passes to sql_exec, but on line 375 the variable $whereAllBindings is passed to self::add_bindings, not $bindings, so even if the add_bindings function is working correctly, the returned value(s) aren't added the the $bindings array, and therefore aren't included in the call to self::sql_exec on line 387. I solved this issue by adding the following line immediately after the call to add_bindings on line 375:

$bindings = array_merge( $bindings, $whereAllBindings );

Becasue $whereAllBindings is needed to get the total record count and needs to contain only the whereAll bindings.

The relevant section of code:

// Likewise for whereAll
    if ( $whereAll ) {
        $str = $whereAll;

        if ( is_array($whereAll) ) {
            $str = $whereAll['condition'];

            if ( isset($whereAll['bindings']) ) {
                self::add_bindings($whereAllBindings, $whereAll['bindings']);
            }
        }

        $where = $where ?
            $where .' AND '.$str :
            'WHERE '.$str;

        $whereAllSql = 'WHERE '.$str;
    }

    // Main query to actually get the data
    $data = self::sql_exec( $db, $bindings,
        "SELECT `".implode("`, `", self::pluck($columns, 'db'))."`
         FROM `$table`
         $where
         $order
         $limit"
    );

It kind of makes me wonder if a lot of developers aren't using bound parameters like they should and are thus opening themselves to SQL injection attacks, or I could be completely off base here due to lack of coffee...

Might be an artifact of this from the Release Notes:

Plural methods were available on singular API invocations. For example row().nodes() was available, even although there was no definition for it - it was rows().nodes() leaking through.

But, I created a new webpage with the same setup as above and it works on the first search but subsequent searches (which causes the datatable to be destroyed and then re initialised) are throwing the error: "Uncaught TypeError: Cannot read properties of null (reading 'clientWidth')".

I've been through the code & compared it to a working web page and the only difference I can see is the new page has searchPanes enabled, so I disabled searchPanes and now it works correctly, so just to confirm the issue I re-instated searchPanes and the error returns.

Thought I should report it to try and get a fix.

I'm happy to give access to my web app to demonstrate the issue if required, just pm me.

Thanks, Chris

TLDR: I have created an issue on the GitHub repository and also submitted a PR with my take on a fix.

Setup

Using the current example download for Editor. Showing this with SearchPanes because it is easier to see in the browser:
1. Modify Controllers\SearchPanesController.cs to add a top level filter on site using the Where clause

var response = new Editor(db, "users")
    .Model<UploadManyModel>()
    .Where("site", "1", "=")

1. Run the project and visit /examples/extensions/searchPanes.html

Result

The resulting table shows the correct data set:

However, the SearchPanes options still show the options from the full data set:

This includes the other options like Name:

Selecting one of the pre-filtered names results in zero records found, while the options show there should be one.

Here's an example from the Payload:

trackingInstanceId: 1258
criticalImpactCommentsLOCS1258: Test comment
trackingInstanceId: 1258
criticalImpactCommentsLOCS1258: Justin Testing

The first is the original and the second is the new value. I am using DataTables 1.10.12 and here's my script that creates the table:

$(document).ready(function(){
$('#myTableInWork').DataTable({
"order":[[0,'desc']],
"ordering": true,
"fixedHeader": true,
"responsive": true,
"autoWidth": true
});
});

I am not using AJAX or anything, just a simple form with a textarea that I fill in and then hit submit. When I comment out the code above, the form works properly. So I have narrowed it down to the DataTable tool. I have Googled and researched all day and cannot find a solution. Any help or guidance would be much appreciated.

Thanks in advance.

       {
            label: 'Shift end:',
            name: 'shift_end',
            type: 'datetime',
            format: 'HH:mm:ss',
            fieldInfo: '24 hour clock format with seconds',
            opts: {
                minutesIncrement: 15,
                secondsIncrement: 15
            }
        }

Other point... If format is set to "HH:mm" picker has no value linked

       {
            label: 'Shift end:',
            name: 'shift_end',
            type: 'datetime',
            format: 'HH:mm'
        }

Other point
If setting minutesAvailable: [00, 15, 30, 45], when clicking on hour control, minute is set to current time minute, not regarding minute limitation.

Reverse case :
hoursAvailable: [7, 8, 9, 10, 11] , when clicking on minute control, hour is set to current time hour, not regarding hour limitation.

I've created a example repo to replicate the issue. Check the readme.md for instructions on how to set up the app and recreate the issue.

The solution I am currently using for this is a small change to the _fnSort function. The original code is as follows:

/**
* Change the order of the table
*  @param {object} oSettings dataTables settings object
*  @memberof DataTable#oApi
*  @todo This really needs split up!
*/
function _fnSort ( oSettings )
{

…

/* No sorting required if server-side or no sorting array */
if ( _fnDataSource( oSettings ) != 'ssp' && aSort.length !== 0 )
{

    // Create a value - key array of the current row positions such that we can use their
    // current position during the sort, if values match, in order to perform stable sorting
    for ( i=0, iLen=displayMaster.length ; i<iLen ; i++ ) {
        aiOrig[ displayMaster[i] ] = i;
    }

…

}

My proposed solution is to change the above for loop to the following:

for ( i=0, iLen=displayMaster.length ; i<iLen ; i++ ) {
    aiOrig[i] = i;
}

In doing this aiOrig will not inherit the sorting currently in place on aiDisplayMaster. From what I can tell aiDisplayMaster seems to be pretty much read-only with the exception of clearing a table or performing sorting. I don't see a reason to read from the property rather than using an array with no previous sorting performed (i.e. [0, 1, 2, 3, …, n]).

I worried that this may affect the RowReorder plugin but after digging into to it a bit RowReorder seems to manipulate the data source directly rather than aiDisplayMaster.

There are a number of other ways to approach this such as calling _fnClearTable or manually resetting aiDisplayMaster in _fnSortListener before running _fnSort but the proposed solution seemed the cleanest to me. After a fair amount of testing I haven't seen any adverse effects from its implementation.

           .on('xhr.dt.dte' + this.s.unique, function (e, settings, json) {
           ** if (json && _this.s.table && settings.nTable === $(table$1)[0]) **{
                // Automatically update fields which have a field name defined in
                // the returned json - saves an `initComplete` for the user
                _this._optionsUpdate(json);
            }
        });

Datatables.editor.js V 2.1.0 NOK... If json is null, system crash (row 6693)

            .on('xhr.dt.dte' + this.s.unique, function (e, settings, json) {
            var table = _this.s.table;
            if (table) {
                var dtApi = new DataTable.Api(table);
                if (settings.nTable === dtApi.table().node()) {
                    // Automatically update fields which have a field name defined in
                    // the returned json - saves an `initComplete` for the user
                    _this._optionsUpdate(json);
                }
            }
        });