Hello everyone, I am in the middle of trying to make it so that any soft deleted entries in the table I am joining into for data are excluded, but I am having quite a bit of grief with where to put the ->where() statement. Refer to the working version without where clauses below

->join(
    Mjoin::inst( $tables->storageUnitsTable )
      ->name( $containers )
      ->link( $containers.'.parentUnitID', $storageUnits.'.storageUnitID')
      ->fields(
        Field::inst('storageUnitID')
      )
    )
  ->join(
    Mjoin::inst( $tables->prototypeSerialsTable )
      ->name( $serializedParts )
      ->link( $serializedParts.'.storageUnitID', $serializedParts.'.storageUnitID')
      ->fields(
        Field::inst('prototypeSerialNumber'),
        Field::inst('isDeleted'),
      )
    )
  ->where( $storageUnits.'.isDeleted', 0)

Both fields have the same soft delete flag isDeleted, but whenever I put the where clause inside the Mjoin or join statements it keeps throwing errors. Any idea on how to make this work?

Thank you

I am trying to implement the datepicker functionality for filtering a date column. I have noticed that selecting a date in the datepicker does not work, but typing a date into the input does (even though the text in the input is the same as what is populated when selecting from the datepicker). This can be seen even in the examples on the website (https://datatables.net/extensions/columncontrol/examples/searchDates/autoLocale-moment.html).

Is there a workaround for this? I have tried my own js to fix this without any luck.

Hello,

I have a mjoin which works great but I want to extend the mjoin with other fields.

Here is what I have:

Client

Clientnumber | Name | Gender | addressnumber
1 | Joe | M | 1
2 | Jack | M | 2
3 | Sylvia | F | 2
4 | Robert | M | 3
5 | Sarah | F | 3
6 | Stephan | M | 3

Address

addressnumber | Street | Zipcode | City
1 | Street 1 | 1111AA | New York
2 | Street 2 | 2222BB | Paris
3 | Street 3 | 3333CC | London

Email

Clientnumber | Email

Here is the Ajax call:

columns: [        
    { data: 'clienten.clientnummer' },
    { data: 'clienten.geslacht' },
    { data: 'clienten.voorletters' },
    { data: 'clienten.tussenvoegsel' },
    { data: 'clienten.achternaam' },
    { data: 'adressen.straat' },
    { data: 'adressen.huisnummer' },
    { data: 'adressen.toevoeging' },
    { data: 'adressen.postcode' },
    { data: 'adressen.woonplaats' },
    { data: 'clienten.geboortedatum',
      render: function (data, type, row) {
        return moment(new Date(data).toString()).format('DD-MM-YYYY');
      }
    },  
    { data: 'email[].email', render: DataTable.render.ellipsis(20,true) }, 
    { data: 'clienten.unieke_url' }        

],
createdRow: function( row, data, dataIndex ) {
    $(row).attr('data-href', 'clienten-details.php?id=' + data.clienten.unieke_url);
},  
columnDefs: [
  { targets: [0,6], className: 'dt-body-left'},
  { targets: [0], render: DataTable.render.number( '.', ',', 0 ) },
  { visible: false, targets: [12] },
  { width: '100px', targets: [8] },
  { targets: [4], render: DataTable.render.ellipsis(25,true) },
  { targets: [5], render: DataTable.render.ellipsis(25,true) },
  { targets: [9], render: DataTable.render.ellipsis(25,true) },
  { targets: [11],render: DataTable.render.ellipsis(20,true) },
  { searchable: false, targets: [1,3,6,7,12] }
], 

And here is the PHP:

Editor::inst($db, 'clienten', 'clientnummer')
->field(
Field::inst('clienten.clientnummer'),
Field::inst('clienten.geslacht'),
Field::inst('clienten.voorletters'),
Field::inst('clienten.tussenvoegsel'),
Field::inst('clienten.achternaam'),
Field::inst('adressen.straat'),
Field::inst('adressen.huisnummer'),
Field::inst('adressen.toevoeging'),
Field::inst('adressen.postcode'),
Field::inst('adressen.woonplaats'),
Field::inst('clienten.geboortedatum'),
Field::inst('clienten.unieke_url'),
Field::inst('clienten.adresnummer')
  ->options(
    Options::inst()
      ->table('adressen')
      ->value('adresnummer')
      ->label('woonplaats')
  )
->validator(Validate::required())
->validator(Validate::dbValues())
  )
  ->leftJoin('adressen', 'adressen.adresnummer', '=', 'clienten.adresnummer')
  ->join(
Mjoin::inst( 'email' )
  ->link( 'clienten.clientnummer', 'email.clientnummer' )
  ->order( 'id asc' )
  ->fields(
    Field::inst( 'clientnummer' )
      ->options( Options::inst()
        ->table( 'email' )
        ->value( 'clientnummer' )
        ->label( 'email' )
      ),
    Field::inst( 'email' )
  )
)
  ->process($_POST)
  ->json();

I get the table good filled with the column Email filled with the mjoin from the table email.

But the table email is filled with these records:

Clientnumber | Email

1 | email11@gmail.com
1 | email12@gmail.com
1 | email13@gmail.com
2 | email21@gmail.com
2 | email22@gmail.com
3 | email31@gmail.com

I get in my table all the first email adresses of each client but I really want to add the other email adresses of each client to the search function.

So I don't want to show them in my table but only if someone search for email12@gmail.com than this client should be found in the search command.

Any idea how to achieve this?

Best regards,

Arie

Hello,

Just a quick question, I see in the forum list a lot of "Free community support" and sometimes "Editor" or something else.

What is the different?

My guess is when someone ask a question which has purchased the Editor version, than his question would be marked as "Editor".

If so, why are my question marked as "Free community support" while I have purchased Editor?

Best regards,

Arie

Link to test case: https://berricktest.co.uk/dist/index.htm
Debugger code (debug.datatables.net): ilixej (2.2.2) ayucof(1.13.6)
Error messages shown: n/a
Description of problem: When horizontal scrolling is active ('scrollX': 'true'), the horizontal scroll bar disappears when the screen height is reduced. This did not occur with 1.13.6. I believe the root cause is the change from this dom setting:
'dom': '<"c9tableTools01"Bf><".c9table-body"t><"c9tableTools02"lipr>',
to this layout:

            'layout': {
                topStart: 'buttons',
                topEnd: 'search',
                bottomStart: {
                    info: {
                        text: 'Displaying _START_ to _END_ of _TOTAL_ events'
                    }
                },
                bottomEnd: ''
            },

I have made a short video which shows the problem. Please see https://berricktest.co.uk/datatablesScrollbarProblem.mp4

Hello, I am using the latest version of DataTables (with bootstrap 5), and I was wondering whether I could set the background color of a specific row based on a function? I could do this with older versions, so I assume it is possible (though some of the specifics may have changed). Here is what my code looks like:

$('#billing-review-table').DataTable({
destroy: true,
responsive: true,
paging: false,
searching: false,
info: false,
scrollY: "65vh",
scrollX: true,
scrollCollapse: true,
autoWidth: true,
initComplete: function() {
applyRowStyles();
}
});

    function applyRowStyles() {
        let tdCounter = 0;
        $('#billing-review-table tr td').each(function () {
            if ($(this).text() == '' && tdCounter === 1) {
                $(this).closest('tr').css({
                    'background-color': '#DCDCDC',
                    'font-weight': 'bold'
                });
                // $(this).closest('tr').css('font-weight', 'bold');
            }
            tdCounter = ((tdCounter + 1) % 13);
        });

        $('#billing-review-table tr td').each(function () {
            if ($(this).text() == '' && tdCounter === 0) {
                $(this).closest('tr').css({
                    'background-color': '#91D1FF',
                    'font-weight': 'bold'
                });
                // $(this).closest('tr').css('font-weight', 'bold');
                $(this).text('SYSTEM TOTAL');
            }
            tdCounter = ((tdCounter + 1) % 13);
        });
    }

I do see the row is set to bold and the font-background is set when I open the page in a browser, but I do not visually see the difference in color (all rows are white so this change should be noticeable). Any help on this matter is much appreciated!

Link to test case: https://live.datatables.net/datovohe/1/edit?html,css,js,console,output
Debugger code (debug.datatables.net): omuzow
Error messages shown: No
Description of problem: Pretty self explanatory. When you want to search data between two dates, the joiner between the two dates (and) is not translated.

Thanks for your help and this fabulous library !

I have a usecase where I need the first column to be rendered checkboxes and for the header of that column to be a checkbox which acts as a select all. I think my requirements are pretty common:
- The select column is bound to the value of another column (e.g. index)
- The set of selected items is maintained in a react state and updates dynamically
- Clicking the checkbox in the header column selects all items on the current page.

You wouldn't believe how many screens-worth of code it takes to brute-force this functionality into a datatable.

I do realize that you currently do have built-in select functionality, but the issues are that:
- You don't have the option of rendering an actual checkbox UI element; clicking the cell itself enables/disables the selection
- As far as I can tell, there is no built-in select all functionality.

I'm not sure how difficult this would be to implement as a core feature of datatables, but it's a common use case & it's not at all intuitive to implement.

Thanks!

Hello, i'm using DataTables Editor on a DataTable that loads its data from the DOM (i don't have a data dict in js) and for presentation reason, the table cells have some arbitrary html inside them.

for filtering, ordering and doing other stuff in the DataTable i put the actual data to be used in the data-search or data-order attribute.
Now i'm trying to use Editor, but if i "bind" an editor field to a column (setting the name of the field in editor the same as the columns.data setting in DataTable), the Editor form contains all the html from the row, while i would want to use the data in data-search instead.

Is it possible to do this?

some example data to clarify my problem:

This is the row in the DOM

and this is what is shown in Editor. i would want Editor to use the value in data-search instead of the html content

For the DateTime plugin, display() is available through the api, but an option would be helpful as well.

{
    label: 'Some date field',
    name: 'some_date',
    type: 'datetime',
    opts: {
        display: {
            year: 1982,
            month: 10
        }
    }
},   

or maybe...

{
    label: 'Some date field',
    name: 'some_date',
    type: 'datetime',
    opts: {
        display: [1982, 10]
    }
},   

Would it be possible to update the NuGet published version for DataTables-Editor-Server to 2.5.0?
The version at NuGet is still at 2.2.2.

I can manually clone it and include that, but the NuGet would make things easier

Note: This is primarily a design/CSS question.

I often use DataTables as an alternative to Excel for filtering and exploring data. However, when applying filters to multiple columns, it’s easy to forget that filters are active - there’s currently no clear visual indicator on the column controls themselves.

While the default column control icons look great, they don’t clearly reflect the filtered state. In my own python package for converting dataframes to DataTables - df2tables (which I previously shared here), I tried making the default (unfiltered) icons slightly more transparent, but that subtle change doesn’t provide enough visual feedback.

I’ve attached a few rough sketches to illustrate the concept, but they’re purely placeholders.

Ideally, this would evolve into icons/CSS styles created by someone with UI/UX or design experience.
Something that visually communicate “filtered” vs. “unfiltered” states without breaking the existing clean look of DataTables.

Thanks for considering this!

Description of problem:

Hey folks!

I hope i am not doubling a previous question. I tried to find topics that answer my question and some were dealing with related issues but didn't really hit home in the end.

The question in itself is relatively simple as stated by the topic of this post.

To illustrate my problem:

I have a datatable with rows that feature a set of different interaction-options within one column depending on the data, like users being able to take tasks or give up on them or removing items from the list and so on. That means that i need to update rows dynamically. I currently do this within rowCallback. I found to be sure that those are being called i need to use ...draw() after updating the row-data. But a redraw of the entire table creates issues when a user is rather fast with their clicks and for example wants to self-assign multiple tasks by clicking the corresponding buttons. the response for the first request comes in, the table is being redrawn and the elements for which the remaining requests were still running don't exist anymore and the rows stay unchanged even though the server answered the request properly. so basically the table redraw has hidden the effect of still running requests. When i use invalidate, the table seems to stay generally "intact" but the rowCallback is not being called so the vizualization of the row stays incomplete.

Hence the question for a callback that we can call on invalidate to update (for example) row visuals.

Or am I simply missing the intended approach for such a scenario?

Hi im loading a lot of data so i've implemented a cache with IndexedDB so the loading is instant except for the first load then i got a function that do the api call, get the data then add/delete/update the row and the cache. To add a newRow to my dataTable i use .rows.add(toAdd).draw();

And it works great the row is added but the row is not added to the columns filter generated by dataTables.net and the row is not added to the search too. The only way i found is to force to show all the data then the filters and search works as expected, is there a way to "refresh" the filters and search ?

Link to test case:
https://live.datatables.net/rizoneki/1/edit

Debugger code (debug.datatables.net):
N/A
Error messages shown:
N/A

Description of problem:
I have a table that users can edit by clicking a row to open inline editing. Because our users might be on mobile, they always aren't able to press the return key to submit a row edit - so we've added an inline save button.

When a user makes a change to the table linked above (i.e. checking or unchecking the checkbox, that's all I've configured my postman endpoint to handle), and presses return, the edit applies beautifully.

However, if the user takes the same action and instead clicks my save button (which only has one action, calling editor.submit()), the editor window closes briefly and shows the pre-save value for a brief moment before reloading the row and showing the data that was returned from the server.

Ideally, I'd like both the return key and save button to behave the same - i.e. not showing the old value once the save button is clicked.

I've tried a bunch of things, including manually modifying the row's underlying data() value and forcing a redraw at each of presubmit/postsubmit/submitcomplete, but I can't get the old values to stop showing up for that brief moment when clicking the save button. Any help would be vastly appreciated.

Hi all,

I've recently been trying to set up a table where you can display tags and search for them. AFAIK there is some support for that in the editor version, but not in the free one and I also didn't find any 3rd party plugin. So I cooked something up and thought I'd share it here.

Use case
I have a data set where each entry can have multiple tags/labels. The tags are available a comma sparated string, as a json list or as a JS array. In the table, I want to display them as colored tag-pills (that's how I usually encounter tags in UIs). They should be sorted alphabetically. While searching, I'd like to allow search for "must have all of these tags" as well as "must have at least one of these tags".

A few notes
My web development & JS-ecosystem skill are rather limited. That's why

• I had quite some help from AI with this
• the code is certainly not optimal and people with deeper knowledge of JS & datatables will likely find lots to improve
• providing the functionality in some form of npm package or similar is currently beyond my scope. I'd be very happy to assist if someone would like to collaborate on this, though!

Implementation
I implented a custom data type as well as a custom column control content for the searching behavior.

A bootstrap based MWE is available at https://gist.github.com/Bibo-Joshi/78bc5f513193649d6ac78ccec747c268.

Feedback
I'm happy to hear your feedback about

• suggestions for improving the implementation
• suggestions for extending the implementation
• packaging this as proper package (either as collaboration or someone covering that completely)
• whether this helped you for something

Cheers!

Looking at the "Options via Ajax only" example it shows how searchList dropdowns can be populated by values returned in columnControl when the table is loaded via ajax.

This is nice, but for my requirement I already know what specific items I want in each dropdown and because I'm using ajax I want them to stay the same, even if the values do not currently exist in the corresponding column of the currently rendered table.

Is there a way of pre-loading the values in columnControl rather than them being returned with every ajax request and thus reducing the size of the response?

i did all steps described in
https://datatables.net/forums/discussion/62113/how-to-reverse-excel-pdf-columns-order-to-rtl#latest
but not worked for me as i attashed to you

i did it as discribed

columnDefs: [
{
targets: '_all',
render: function(data, type, row) {
if (type === 'PDF') {
return data.split(' ').reverse().join(' ');
}
return data;
}
}

but not worked for me

I have an address page that utilizes saved states & state restores with a button that opens a google map with whataver addresses are being shown. Each map icon contains a link to edit the address which opens page to edit (which is the same source page but opens the second page in a new tab) , I pass the addressaid so it knows what is being edited.

In this second page, I want to remove any saved states & serches but I don't want to affect the original page and states applied if & when I refresh.
I currently have this in datatable configuration:
stateLoadParams: function(settings, data) {
if (pAddressAID !==0 ) {
data.search.search = '';
return false;
}; //if (pAddressAID !==0 ) {
},

pAddressAID is the addressID that is being edited passed from the map.

this seems to work but when I refresh my original page, the state is no longer selected and I have to reselect.

I would like to remove current searcheds & searchbuilder in the second page and have it not affect the first address page.

Hi, i'm trying to use an autocomplete field type where options are a label->value pair.
When i select a result from the option list, i expect the input shows me the label and "behind" it has the ID saved to be sent.
This does not happens.

Try it here: https://live.datatables.net/holeqaca/3/edit
Create a new item, select an Office and it will show the ID instead of the office name.

It's not cool to show the user the id...

Any way to solve this?
Thank you

Below is code I am using to populate my DT:

    var maintable = new DataTable('#Stats', {
        serverSide: false,
        processing: true ,
        
         ajax: { url:'php/Stats.php', 
        type: 'POST',
              data: {
                pageAID: thisPageAID,
               groupLevel: (document.getElementById("txtGroupBy")).value,
               vsTimeIncrementHrs: (document.getElementById("txtpVs")).value,

            }
        },

I added buttons which sets the value in the two text fields (txtGroupBy & txtpVs) & issues a dt.ajax.reload, but when I inspect the posted parameters in Stats.php, the values are always set to the initial default values.

buttons: [
                        {
                            text: 'Ward, District, Party',
                            action: function (e, dt, node, config) {
                                pGroupLevel='Ward, District, Party';
                                    (document.getElementById("txtGroupBy")).value = pGroupLevel;
                    dt.ajax.reload(); // Reloads the data from the server
                            }
                        },

from stats.php
```js
if ( isset($_POST['groupLevel']) ) {
$groupLevel = $_POST['groupLevel'];

};
log_message("groupLevel " . $groupLevel, '../logs/debug.log', 'DEBUG', $_SERVER['PHP_SELF'], False);

```js

Hello!
I am getting that "DataTables warning: table id=table_1 - Cannot reinitialise DataTable."

https://lakeeriefallbrawl.com/fb2025/roster/

I've tried several of the snippets here in an attempt to remedy this issue, but have not been successful.

Just to be clear, I am inserting these various code snippets into the "wpDatatables > Settings" section. Is this correct, or am I part of the problem?

The error appears when the table is fully rendered.

Alternately - and I understand this is by no means a solution - would it be possible to change the error message to something like "Thanks for your patience. The official roster is loaded. You can search by your first or last name".

Thanks in advance,
EZ Fall Brawl

I am using DataTables to access and view my collection of ancient roadmaps.
Data of the maps is in a CSV and via the presented table one can link to a zoomable version of a map.
Presentation is done with OpenSeaDragon.
See: https://wbeulink.nl/publiek/zoomables/
Works fine thanks to DataTables.
There is a different way to view cards in OpenSeaDragon called: Collectionmode.
A view to a combination of related cards.
See: https://wbeulink.nl/publiek/Kaarten/show.php?name=ANWB-50-Stadsplattegronden-1917
OpenSeaDragon needs information for this view in a simple file.
Example with 3 items:

var tileSources = [
'/sometext/data from row1 columnx/data from row1 column-y.dzi',
'/sometext/data from row2 columnx/data from row2 column-y.dzi',
'/sometext/data from row3 columnx/data from row3 column-y.dzi'
];

var tileNames = [
'data from row1 column-z',
'data from row2 column-z',
'data from row3 column-z'
];
Until now I made such files in a static way.
But I want to be more flexible.
So select and sort via DataTables and then use a button to create the file and start the view.

Is there a way to achieve this.
First step would be the creation of the file (constant name and every time overwritten by new vesion).

Any help is very welcome.

Thanks in advance Willem

$sqlStr = '(select * from tvf_StatReport2(' . $IsProd . ',' . $groupLevel . ',' . $vsTimeIncrementHrs . ' ) ) as JYStats';
Editor::inst( $db, $sqlStr, 'StatsAID' )
the above os giving me:
An SQL error occurred: SQLSTATE[42S22]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]Invalid column name '1'.

when I look at the console devmode, the query looks like:

.. FROM (select * from tvf_StatReport2(0, [1], 0 ) ) JYStats...

Hi everyone,

I’m using DataTables with FixedColumns, and I’ve split a single datetime value (in yyyymmddHHMMSS format) into two separate columns: Date and Time.

I’m trying to implement a linked sort behavior, where these two columns are always sorted together and both should remain visually active when sorted.

Requirements

1. Two linked columns (Date + Time)
* The table shows:
** Date→ formatted as YYYY-MM-DD
** Time→ formatted as HH:mm:ss
* Sorting must always consider both columns:
** Primary sort → Date
** Secondary sort → Time

There are 4 valid combinations:
* Date ↑ + Time ↑
* Date ↑ + Time ↓
* Date ↓ + Time ↑
* Date ↓ + Time ↓

When the user clicks on the Dateheader, only the Date direction should toggle,
and when clicking the Timeheader, only the Time direction should toggle — but both should stay active.

2. UI requirement
* When Date/Time sorting is active, bothheaders should visually display sorting arrows (sorting_asc / sorting_desc).
* When any other column is sorted, only that single column should be active (the normal DataTables behavior).

3. Other columns
* For all other columns, sorting should behave normally (single-column sort, with only one active sort indicator).

The issue

Technically, I can handle the sorting logic (since the source data has the combined yyyymmddHHMMSS field — extracting date/time parts for comparison works fine, Date ↑ + Time ↑, Date ↓ + Time ↓ worked).
However, the UI part is problematic.

After sorting, DataTables automatically resets sorting classes and aria-sort attributes,
so only one column (the last sorted one) keeps sorting_asc or sorting_desc,
while the other column (e.g., Date) is reset back to just sorting.

Even when I reapply classes in drawCallback, DataTables overwrites them again.
It seems that DataTables internally supports only one “active” sorted column at a time.

Question

Is there a way to configure DataTables to visually keep two columns active at once (both with sorting icons and aria-sort attributes)?
Or should this be handled completely outside DataTables (e.g., manual sorting + custom header styling)?

If anyone has implemented or seen an example of two linked columns with synchronized sort UI,
please share your approach — I’d really appreciate it.

Thanks in advance!

Hi everyone,

I’m using DataTables with FixedColumns, and I’ve split a single datetime value (in yyyymmddHHMMSS format) into two separate columns: Date and Time.

I’m trying to implement a linked sort behavior, where these two columns are always sorted together and both should remain visually active when sorted.

Requirements

1. Two linked columns (Date + Time)
* The table shows:
** Date→ formatted as YYYY-MM-DD
** Time→ formatted as HH:mm:ss
* Sorting must always consider both columns:
** Primary sort → Date
** Secondary sort → Time

There are 4 valid combinations:
* Date ↑ + Time ↑
* Date ↑ + Time ↓
* Date ↓ + Time ↑
* Date ↓ + Time ↓

When the user clicks on the Dateheader, only the Date direction should toggle,
and when clicking the Time **header, only the Time direction should toggle — but **both should stay active.

2. UI requirement
* When Date/Time sorting is active, **both **headers should visually display sorting arrows (sorting_asc / sorting_desc).
* When any other column is sorted, only that single column should be active (the normal DataTables behavior).

3. Other columns
* For all other columns, sorting should behave normally (single-column sort, with only one active sort indicator).

The issue

Technically, I can handle the sorting logic (since the source data has the combined yyyymmddHHMMSS field — extracting date/time parts for comparison works fine, Date ↑ + Time ↑, Date ↓ + Time ↓ worked).
However, the UI part is problematic.

After sorting, DataTables automatically resets sorting classes and aria-sort attributes,
so only one column (the last sorted one) keeps sorting_asc or sorting_desc,
while the other column (e.g., Date) is reset back to just sorting.

Even when I reapply classes in drawCallback, DataTables overwrites them again.
It seems that DataTables internally supports only one “active” sorted column at a time.

Question

Is there a way to configure DataTables to visually keep two columns active at once (both with sorting icons and aria-sort attributes)?
Or should this be handled completely outside DataTables (e.g., manual sorting + custom header styling)?

If anyone has implemented or seen an example of two linked columns with synchronized sort UI,
please share your approach — I’d really appreciate it.

Thanks in advance!

Link to test case: https://live.datatables.net/patumuhi/1/edit
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

It is probably a stupid question but I am not able to do the following things below:
1./ How to copy, export, ... all lines from a DataTable if no lines are selected (even if I see 10 lines on 50)

Yet in this example it works just fine without doing anything special:
https://datatables.net/extensions/buttons/examples/html5/simple.html

2./ How to avoid to select a line when clicking on the button "Action" (see DataTable without checkbox)

Othewise, if you select all lines (with checkbox in header) and unselect all, there is a small issue in html (see screenshot)

can you confirm this behavior.

thanks in advance for your help and have a nice day.

Link to test case: https://live.datatables.net/gepalawi/1/
Error messages shown: none
Description of problem:
hi
minor issue, i hope the test case is setup properly, this is linked to editor
when using a button collection for the editor functionality the edit button is functioning but visually it is not "disabled" when no row is selected.
example also shows an inline edit button which works fine (using 'btn' class) but the drop downs use the 'dt-button' and visually appear the same (new - edit) regardless of selection.

i think its related to

<li class="dt-button buttons-selected buttons-edit disabled" aria-controls="example">
<a href="#" tabindex="0" class="dropdown-item">Edit</a></li>

the disabled class is being set on the <li> and possibly should be on the <a>
ref:https://getbootstrap.com/docs/5.3/components/dropdowns/#disabled

thanks in advance for any help
pete

I am incorporating websocket/STOMP update notifications to make our ajax based datatables more responsive.

As part of this effort, I would like to determine if an updated data object still matches the DataTables search specification (we are using column based search), and do an in-place replacement if the updated data still meets the search criteria (instead of calling draw and triggering an ajax call).

I prefer to just not call draw() for every update (it causes screen jitter and the drop down menus that we have in some column values get rebuilt so they disappear under the user's cursor. It's just not a great experience.

Instead of re-implementing the search logic, I'd ideally like to be able to re-use the DataTables implementation, is there a way to get at that? The key is that this is an ajax driver DT, we just have a few operations where we want to be more surgical than loading the entire table.

BTW, the update algorithm I'm using is as follows:

When we receive a STOMP update notice, it includes the record id that was changed. We loop the existing DataTable rows to see if any of them contain that id. If we find a matching row, we then do an ajax call to get only that record, then do a dtRow.data(newData).invalidate(); This causes only that row to be redrawn.

What I would like to do is detect if the newData no longer matches the search(), and if that happens, then visually mark the row (change the opacity or something) and start a 1500ms interruptible refresh timer. When the UI settles down, the timer will expire, and we would then trigger a draw() to get the updated version of the paged data (effectively removing the row). Same approach for deleted rows.

If this isn't possible, another idea I'm kicking around is to trigger the ajax call, but add an additional parameter for the id of interest (table.ajax.params() + '&id=123'). If that returns no records, then we would use the removal approach I describe above.

Any thoughts?

Hello Allan and Community

I would like to report another PHP deprecated warning related to null being passed on to a function.

We have installed DataTables version 2.3.4 and Editor version 2.5.0. PHP is currently set to version 8.1 but it is intended to upgrade it to a higher version.

The tables were programmed quite a while ago and did not have this issue while they were running on PHP 7. But we have done a server upgrade, with up-to-date Linux, and running PHP 7 is no option anymore; PHP 8 must now be used.

This is the PHP deprecated warning that occurs:

Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/vhosts/.../lib_2.5.0/Editor/Format.php on line 261

This is the function where it occurs:

public static function toDecimalChar($char = ',') {
  return static function ($val, $data) use ($char) {
    return str_replace('.', $char, $val);
  };
}

It is a major undertaking to go through all the tables and make adjustment for this problem in the tables themselves.

As a quick fix I decided to edit the affected section in the Format.php file itself. Here is a possible workaround for this problem:

public static function toDecimalChar($char = ',') {
  return static function ($val, $data) use ($char) {
    if (isset($val) && $val != null)
      return str_replace('.', $char, $val);

    else
      return null;
  };
}

I hope this posting will be helpful to fix these small issues and make this great software more compatible with future PHP versions.

Sincerely,
Gevorg