The search don't find the row with values added via jQuery

MelodyNelson · November 2023

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

In this table, the last column in bold (that will be invisible in the future) contains no data, but I'm adding a text in it with jQuery :

This is how I'm adding the html in the <td> in this column :

createdRow: function( row, data, dataIndex ) {
        var today = DateTime.fromISO(DateTime.now());
        var currentYear = today.year;
        var currentMonth = today.month;
        var currentWeek = today.weekNumber;
        var currentDay = today.day;
                
        var contract_deliveryYear = data.venteAlivrer.annee;
        var contract_deliveryWeek = data.venteAlivrer.semaine;
        
        var deliveryYear = data.venteLivree.annee;
        var deliveryWeek = data.venteLivree.semaine;
                        
        // s'il n'y a pas de date de livraison (data.venteLivree), on fait les contrôles pour mettre en avant les ventes à livrer et en retard
        
        if (data.venteLivree.Valeur_alpha == '') {      
            
            // VERT = ventes à livrer
            if (contract_deliveryYear > currentYear ) {
                $(row).addClass( 'alivrer' );
                $(row).children('td.statut_livraison').html("A livrer");
            }
            
            if (contract_deliveryYear == currentYear && contract_deliveryWeek >= currentWeek) {
                $(row).addClass( 'alivrer' );
                $(row).children('td.statut_livraison').html("A livrer");
            }
                        
            // ROUGE = livraison en retard
            if (contract_deliveryYear < currentYear ) {
                $(row).addClass( 'retard' );
                $(row).children('td.statut_livraison').html("Retardée");
            }
            if (contract_deliveryYear == currentYear && contract_deliveryWeek < currentWeek) {
                $(row).addClass( 'retard' );
                $(row).children('td.statut_livraison').html("Retardée");
            }
        }                   
    },

When I'm using the search form (the default one at the top right corner of the table), if I'm searching the terms « livrer » or « retard ». I don't have any result, message : No matching records found

What should I do to work it out ?

At the end, what I want to do is adding 2 buttons, each one making a search (don't know how but I didn't read the doc yet).
The first button (searching « A livrer »), will show the rows in green of the table.
The second button (searching « Retardée ») will show rows in red of the table.

Maybe I didn't choose the better idea to create these buttons for my table ?

Your suggestions are welcome

Thank you

colin · November 2023

Yep, if you just edit the HTML in the DOM directly, then DataTables will have no idea what's there. DataTables indexes the data when the table is initialised, and updates that index when calls are made via the API - directly changing the HTML bypasses that.

To update those cells, use cell().data() or row().data() - there's an example on the reference pages.

Colin

MelodyNelson · November 2023

Thank you Colin, I'll check your links

MelodyNelson · December 2023

When I read the doc, I've discovered the extension State restore and it give me ideas.
I can use it to create predefined states and it could be useful to users.
I tried it, it works great for the predefined states including a search.

But I try to add another predefined state with a search panes selection and this one doesn't work : no selection of the value in the pane and search + the check sign is shown even if I don't select the state.

In this example : I've chose the first state « Planning des livraisons » and when I click again on the button, 2 states are √ (including the one supposed to work with a search pane).

The search panes are working great when I don't use state buttons.

Let me know if I did some mistakes in this code.
If not, I will try to make a test case but I need to create fake datas.

dom: 'PBifrt',
    searchPanes: {
        columns: [12, 13, 14, 15, 1],
        preSelect: [{
            rows:[ new Date().getFullYear() ],
            column: 12
        }]
    },
    buttons:[
        'createState',
        {   
            extend: 'savedStates',
            config: {
                creationModal: true,
                preDefined: {
                    ' Planning des livraisons': {
                        order: [[2,'desc']],
                        search: { 'search': 'Livraison'}
                     },
                    'Test 2021': {
                        order: [[2,'desc']],
                        SearchPanes: {
                            selectionList: [ { column: 12, rows: ['2021'] } ]
                        }
                    },
                    'Livraisons retardées': {
                        order: [[2,'desc']],
                        search: { 'search': 'Retard'}
                     }
                }
            }
        }
    ],

Thank you

kthorngren · December 2023

I've discovered the extension State restore and it give me ideas.

Ideas are always dangerous ;-)

I will try to make a test case but I need to create fake datas.

For most test cases, unless the issue is data specific, you can use the generic data found in these JS Bin templates. I applied your code to this example:
https://live.datatables.net/tavajode/1/edit

Found that the problem is SearchPanes should be searchPanes with a lower case s in this code:

                        SearchPanes: {
                            selectionList: [ { column: 12, rows: ['2021'] } ]
                        }

Kevin

MelodyNelson · December 2023

Ideas are always dangerous ;-)

hahaha, ideas are the best part of the job and maybe life

Thanks for the tip and the solution Kevin
I thought I copy/paste the code but maybe I add the S by myself.
Also, as I have a numeric in the value, I needed to delete the quotes around the year searched. And it works great now !

buttons:[
        'createState',
        {   
            extend: 'savedStates',
            config: {
                creationModal: true,
                preDefined: {
                    ' Planning des livraisons': {
                        order: [[2,'desc']],
                        search: { 'search': 'Livraison'}
                     },
                    'Ventes signées en XXX': {
                        order: [[2,'desc']],
                        searchPanes: {
                            selectionList: [ { column: 12, rows: [ DateTime.now().year ] } ]
                        },
                        search: { 'search': ''}
                    },
                    'Livraisons retardées': {
                        order: [[2,'desc']],
                        search: { 'search': 'Retard'}
                     }
                }
            }
        }
    ],

I have 2 more questions about State/Restore.

1) How can I add the current year inside the text of the state ?
For the second defined state I want « Ventes de l'année + current year ».
I tried inside the definition like 'Ventes de l'année ' + DateTime.now().year, but it broke the datable. I tried without the + sign too.
I've created a variable at the beginning of the script, and tried like that but I see the name of the var (even if it's not between quotes).

<script>

// DATASET ALIMENTE PAR 4D
var dataSet = <!--#4DHTML WEB_vt_dataSet -->;

//  VARIABLES UTILISÉES POUR LES STYLES + LES LIENS
var interface = '<!--#4DHTML WEB_vt_interface -->';
var textColor = 'txt-color-'+interface;
var textColor2 = 'txt-color-second-'+interface;

// VARIABLE POUR STATE/RESTORE
var textVentesAnneeCourante = 'Ventes signées en ' + DateTime.now().year;

// DATATABLE
$(document).ready(function() {

...etc...

textVentesAnneeCourante: {
                        order: [[2,'desc']],
                        searchPanes: {
                            selectionList: [ { column: 12, rows: [ DateTime.now().year ] } ]
                        },
                        search: { 'search': ''}
                    }

2) I read that the states created are saved locally. What does it mean ?
Are they in a browser cookie ?
I want that every user can create his own states but not share them with the others users because It could be a mess quickly if it's an open bar

kthorngren · December 2023

1) How can I add the current year inside the text of the state ?

I'm not familiar with DateTime.now().year. I don't believe the DateTime extension has a now() method. I could be wrong though. Are you using a different DateTime library? Do you get errors in the console with this statement or does it work?

I updated my test case to use new Date().getFullYear():
https://live.datatables.net/tavajode/2/edit

For example:

              selectionList: [{
                column: 4,
                rows: [ 'my date ' + new Date().getFullYear() ]
              }]

2) I read that the states created are saved locally. What does it mean ?

StateRestore uses the stateSave option which has this in the docs:

Data storage for the state information in the browser is performed by use of the localStorage or sessionStorage HTML5 APIs.

By default localStorage will be used in which the data is stored in the browser. This is not the same as a cookie. If each user has their own browser then their saved states will be stored in their browser. It is possible to customize where the states are saved using stateSaveCallback and stateLoadCallback.

Kevin

MelodyNelson · December 2023

I'm using Luxon for the date/time library. It works great with my example and yours inside the rows attribut. But it doesn't in the « title / name » of the state option.

I « broke » your example to explain what I wanted to do :
https://live.datatables.net/tavajode/3/edit

// this is also here that I want a text + the current year
'Ventes + new Date().getFullYear()': {
            order: [[2,'desc']],
            searchPanes: {
              selectionList: [{
                column: 4,
                rows: [ 'my date ' + new Date().getFullYear() ]
              }]
              //selectionList: [ { column: 12, rows: ['2021'] } ]
            }
          }

Thanks for the explanation about data storage, I will read it later

kthorngren · December 2023

See this SO thread for options to use a variable as the key of an object. Updated example:
https://live.datatables.net/hufipoti/1/edit

Kevin

MelodyNelson · December 2023

Nice ! Thank you Kevin

The search don't find the row with values added via jQuery

The search don't find the row with values added via jQuery

Replies

Howdy, Stranger!

Categories

DataTables

The search don't find the row with values added via jQuery

The search don't find the row with values added via jQuery

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables