don't work InLine Editor with Individual column searching (select inputs)

SWATswat

Hello Allan,

I try unsuccessfully to make the Individual column searching (select inputs) work.
when I select a field, the result returns "No matching records found"

Can you help me please, I do not understand where it might come from.

Thank you.

// Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td.editable', function (e) {
        editor.inline( this, {
            //onBlur: 'submit'
            buttons: {  label: ">",
                        className: 'btn-sm',            
                        fn: function () { this.submit(); } }
        } );
    } );

    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns([2,3,4,6]).every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },
        dom: "Bfrtip",
        ajax: {
            url: "Staff_Direction.php",
            type: 'POST'
        },
        serverSide: true,
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false,
                searchable: false
            },
            { data: "r_i_d_a.id", className: "dt-body-center" },
            { data: "perimetre_rida.nom_perimetre", editField: "r_i_d_a.perimetre", className: "editable dt-body-left", searchable: true },
            { data: "client_rida.nom_client", editField: "r_i_d_a.clients", className: "editable dt-body-left", searchable: true },
            { data: "activite_rida.nom_activite", editField: "r_i_d_a.activite", className: "editable dt-body-left", searchable: true },
            { data: "r_i_d_a.date_decision", className: "editable dt-body-left" },
            { data: "r_i_d_a.i_d_a", className: "editable dt-body-left", searchable: true },
            { data: "r_i_d_a.problemes", className: "editable dt-body-left" },
            { data: "r_i_d_a.solutions", className: "editable dt-body-left" },
            { data: "r_i_d_a.date_deadline", className: "editable dt-body-left" },
            { data: "r_i_d_a.etat_avancement", className: "dt-body-center", 
                render: function ( data, type, row ) {
                      var color = 'color:black; ';
                      if (data < '0') {
                       color = 'color:#e13611; font-weight: bold;';
                      }
                      if (data > '0') {
                        color = 'color:#11e166; ';
                      }
                      
                      return '<span style="' + color + '">' + data + '</span>';
                }
            },
            { data: "status.nom_status", editField: "r_i_d_a.status", className: "editable dt-body-center", 
                render: function ( data, type, row ) {
                      var colorStatus = 'color:black; ';
                      if (data === 'A Faire') {
                       colorStatus = 'color:#51c1f5; ';
                      }
                      if (data === 'Demarrer') {
                        colorStatus = 'color:#c851f5; font-weight: bold; ';
                      }
                      if (data === 'Terminer') {
                       colorStatus = 'color:#ffffff; font-weight: bold;  background-color:#51f59e;';
                      }
                      
                     
                      return '<span style="' + colorStatus + '">' + data + '</span>';
                }
            
            },
            { data: "images.nom_images", editField: "r_i_d_a.etat", className: "editable dt-body-left", 
                render: function(data, type, row) {
                    var adresseImage = '';
                   if (data === "OK"){adresseImage = '<img src="img/ok.png" width="51" height="26">';}
                   if (data === "PROBLEME"){adresseImage = '<img src="img/probleme.png" width="51" height="26">';}
                   if (data === "RISQUE"){adresseImage = '<img src="img/risque.png" width="51" height="26">';}
                   if (data === "TERMINER"){adresseImage = '<img src="img/terminee.png" width="51" height="26">';}
                   
                   return adresseImage;
                }
            },
            { data: "users_rida.trigramme_users_rida", editField: "r_i_d_a.users" , className: "editable dt-body-center" },
            { data: "r_i_d_a.commentaire", className: "editable dt-body-left" },
            { data: "r_i_d_a.date_realisation", className: "editable dt-body-center" },
            { data: "r_i_d_a.date_verification", className: "editable dt-body-center" },
            { data: "r_i_d_a.resultat", className: "editable dt-body-center" }
        ],
        order: [ 1, 'asc' ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove',   editor: editor },
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            }
        ]
    } );
} );

Ans send the link in your mail.

Thank you.

SWATswat

Editor Version 1.8.1

kthorngren

You have server side processing enabled. Your server script is responsible for the search. What are you using for your server script?

Kevin

SWATswat

Hello Kthorngren,

Nothing, I use Editor for simplicity, I am not a developer alas.
I try to understand and learn, it remains difficult for me.
Thank you for your response and help

allan

How many records are you going to have in this table? If its less than 10,000 I would suggest disabling server-side processing.

Allan

SWATswat

Hello,

Thanks you very much for your response.

It's work perfectly.

My curiosity obliges me to ask what would be the right method if it exceeds 10,000 lines?
Enable serverSide and?

Thank you in advance .

SWATswat

I shout Victory too fast.

Actually, the fliter works with

serverSide: false,

but the edition of inLine no longer works.

If I put

serverSide: false,

the filter does not work anymore but I can edit the lines with inLine.

Is it possible to have both functions at the same time?

Thanks.

colin

Hi @SWATswat ,

The inline editing with Editor shouldn't be affected by that change - see here. Are you seeing errors in the console? Could you link to your page, please.

Cheers,

Colin

SWATswat

Hello Colin,

Link send by Private Message.

Thank you.

allan

I think I might know what the issue is using server-side processing with the select filters. The client is sending (e.g.):

columns[3][search][value]: ^Gates$

In the initialisation code for the select filters, remove the ^ and $ which are exact matching regex characters (not supported on the server-side processing scripts we publish).

Allan

SWATswat

Allan,

Thank you very much, it works perfectly!

SWATswat

Hello,
when filtering the foot of the column all the information is not present.
It is loaded in the drop-down menu that the data contained in the first page of datatable, if I click on Show All they are the same loaded data that are listed.
How can we make the data loaded in the drop-down menus correspond to the category displayed in datatable?

Part of the code above :

...
select: true,
        lengthMenu: [
            [ 10, 25, 50, -1 ], 
            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
        ],
        buttons: [
            
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'excel',
                    'print'
                ]
            },
            { extend: 'pageLength',   editor: editor }
        ]
    } );
} );

Thank you for your help.

colin

Hi @SWATswat ,

This example here may help - it shows an event listener updating the table footer based on the selection.

If not, could you modify that example to demonstrate your issue, please.

Cheers,

Colin

SWATswat

Hi Colin,

Thank you for this link.
I found the solution :

serverSide: false,

and everything works normally.

Thanks.

SWATswat

Hi Colin, Allan

I dig up this topic because :
There is still a problem that I do not understand:
- With ServerSide True: the filters of the menus at the bottom of the table do not work correctly but the validation during the input in InLine works.

-With ServerSide False: the filters of the menus in feet of table work but the validation during the entry in InLine does not work.

What is the right solution so that the filters of the menus at the bottom of the table AND the validation during the entry in InLine work at the same time?

I despair

Thank you for you precious help

allan

The first thing to do really is decide if you want server-side processing or not. That solely comes down to the number of records you have in the table. If its 50k or more, use server-side processing. If its less, use client-side.

That said, the processing mode should make no difference to the validation of inline editing. Can you give me a link to a page showing that problem so I can take a look please?

Thanks,
Allan

SWATswat

Hi Allan,

Thanks you for your response.

I do not need 50K so serverSide: False.

I sent you a message with the link and access.

Thank you.

SWATswat

Hi Allan,

Have you been able to find the problem ?

Thanks.

allan

Apologies - I've replied back by DM now.

Allan

SWATswat

Hi Allan,
I'm sorry but its

Row : 1
Column : "Commentaires"
for example.

May this problem is on all the cells

Thanks

SWATswat

Hi Allan,

To solve the problem you ask me to update DataTables to version 1.10.18 but I use only DataTable EDITOR.
I updated the version of DataTable EDITOR I was using from v1.8.1 to v1.9 but that does not solve the problem.

How to do ?

Thanking you.

allan

To solve the problem you ask me to update DataTables to version 1.10.18 but I use only DataTable EDITOR.

Editor depends upon DataTables - even if you aren't displaying a DataTable on the page, Editor will still use some of the library functions that DataTables makes available on the page. In this case its specifically the data nested read / write methods.

The issue you are seeing was that Editor had an error in handling local editing (i.e. no Ajax) which required a small change in DataTables as well as Editor, which is why I noted that you need to update the DataTables version on your page.

Allan

SWATswat

Hi,

Not knowing what to update between Datatable and Datatable Editor, I will disable the search at the bottom of the table and activate ServerSide and I will wait patiently for an update of Datatable Editor to come with this fix.

Thanks.

allan

An update to Editor won't fix this issue. Its DataTables that needs to be updated on your page. You are currently using DataTables 1.10.16 (which you can check by typing $.fn.dataTable.version in your browser's console). It needs to be a newer version for compatibility with Editor.

Allan

SWATswat

Hi Allan,

It was out of my head using datatable Editor with "jquery.dataTables.min.js".
I updated it in 1.10.19 and it works perfectly.

Thank you very much and I'm sorry for making you waste time.

Thanks again.