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

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

SWATswatSWATswat Posts: 47Questions: 0Answers: 0

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.

Replies

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    Editor Version 1.8.1

  • kthorngrenkthorngren Posts: 7,008Questions: 22Answers: 1,525

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

    Kevin

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    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

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    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

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    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 .

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    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.

  • colincolin Posts: 6,890Questions: 0Answers: 1,177

    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

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    Hello Colin,

    Link send by Private Message.

    Thank you.

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    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

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    Allan,

    Thank you very much, it works perfectly!

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0
    edited May 9

    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.

  • colincolin Posts: 6,890Questions: 0Answers: 1,177

    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

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0
    edited May 10

    Hi Colin,

    Thank you for this link.
    I found the solution :

    serverSide: false,
    

    and everything works normally.

    Thanks.

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    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 :neutral:

    Thank you for you precious help

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    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

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    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.

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    Hi Allan,

    Have you been able to find the problem ?

    Thanks.

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    Apologies - I've replied back by DM now.

    Allan

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    Hi Allan,
    I'm sorry but its

    Row : 1
    Column : "Commentaires"
    for example.

    May this problem is on all the cells

    Thanks

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    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.

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin
    edited June 11

    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

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    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.

  • allanallan Posts: 50,876Questions: 1Answers: 7,626 Site admin

    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

  • SWATswatSWATswat Posts: 47Questions: 0Answers: 0

    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.

Sign In or Register to comment.