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

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

SWATswatSWATswat Posts: 42Questions: 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: 42Questions: 0Answers: 0

    Editor Version 1.8.1

  • kthorngrenkthorngren Posts: 5,541Questions: 19Answers: 1,232

    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: 42Questions: 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: 49,501Questions: 1Answers: 7,285 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: 42Questions: 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: 42Questions: 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: 4,686Questions: 0Answers: 822

    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: 42Questions: 0Answers: 0

    Hello Colin,

    Link send by Private Message.

    Thank you.

  • allanallan Posts: 49,501Questions: 1Answers: 7,285 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: 42Questions: 0Answers: 0

    Allan,

    Thank you very much, it works perfectly!

  • SWATswatSWATswat Posts: 42Questions: 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: 4,686Questions: 0Answers: 822

    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: 42Questions: 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: 42Questions: 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: 49,501Questions: 1Answers: 7,285 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: 42Questions: 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.

Sign In or Register to comment.