Editor Joined Table - Empty Select - Java

Enowar

Hello,

I try to use the "joined table" fonctionality (https://editor.datatables.net/examples/inline-editing/join.html)
When i click on column, my <select> is empty. Dunno how to debug, no error show.

JSON :

{
    "data": [
        {
  "id": 14516224,
  "secteurs": {
    "id": 14516224,
    "title": "Public",
    "ordre": 2,
    "pstatus": 10
  },
  "pstatus": {
    "id": "Inactif"
  }
},
        {
  "id": 14516225,
  "secteurs": {
    "id": 14516225,
    "title": "Privé",
    "ordre": 1,
    "pstatus": 10
  },
  "pstatus": {
    "id": "Inactif"
  }
}
    ],
    "options": {
        "secteurs.pstatus": [
            {
                "label": "Actif",
                "value": 0
            },
            {
                "label": "Inactif",
                "value": 10
            }
        ]
    },
    "searchPanes": {
        "options": []
    }
}

JS :
!function ($) {

    var table;
    var editor;
    
    //Contournement pour permettre à  datatable de retourner un complete qui n'est pas une fonction mais plutôt un tableau de fonction 
    //Les tableaux de fonction pour le complete ne sont pas gérés par la méthode fixWait de Jalios
    _.set($,"jalios.Ajax._fixWait",undefined);

    var loadSecteurColleges = function () {
        table.clear()

        $.getJSON(window.jeduweb.ApplicationConstants.Api.Public.Get.secteurcolleges,
            {
                "modeJson" : "DETAILLE",
                "datatable" : true,
            })
            .done(function (reponse) {
                console.log(reponse);
                $.each(reponse.data, function (i, secteurCollege) { 
                    if (jQuery.isEmptyObject(secteurCollege)) {
                        return;
                    }

                    table.row.add( secteurCollege);
                });

                table.draw();
            })
            .fail(function (data) {
                console.log("Erreur doAdminGeneral : ", _.get(data, "responseJSON.status","erreur inconnue"));
            });
    };
    
    var editorColleges = function () {
        editor = new $.fn.dataTable.Editor( {
            ajax: {
                     
                     create: {
                        type: 'POST',
                        url:  window.jeduweb.ApplicationConstants.Api.Public.Edit.secteurcollege,
                        datatype : "json",
                        contentType: "application/json; charset=utf-8",
                        data:  function ( d ) {
                            return { "data" : JSON.stringify( d.data ), "action" : d.action };
                        },
                    },
                    edit: {
                        type: 'PUT',
                        url:  window.jeduweb.ApplicationConstants.Api.Public.Edit.secteurcollege,
                        datatype : "json",
                        contentType: "application/json; charset=utf-8",
                        data:  function ( d ) {
                            return { "data" : JSON.stringify( d.data ), "action" : d.action };
                        }
                    },
                    remove: {
                        type: 'DELETE',
                        url:  window.jeduweb.ApplicationConstants.Api.Public.Edit.secteurcollege,
                        datatype : "json",
                        contentType: "application/json; charset=utf-8",
                        data:  function ( d ) {
                            return { "data" : JSON.stringify( d.data ), "action" : d.action };
                        },
                    }
             },
            table: "#secteurCollegeList",
            idSrc:  "id",
            fields: [ {
                    label: window.jeduweb.ApplicationConstants.Entities.Label.secteurCollege.secteur,
                    name:  "secteurs.title"
                }, {
                    label: window.jeduweb.ApplicationConstants.Entities.Label.NomenclatureType.ordre,
                    name:  "secteurs.ordre"
                }, {
                    label: window.jeduweb.ApplicationConstants.Entities.Label.NomenclatureType.etat,
                    name:  "secteurs.pstatus",
                    type: "select"
                }
            ]
        });
        
        // Activate an inline edit on click of a table cell
        $('#secteurCollegeList').on( 'click', 'tbody td:not(:first-child)', function (e) {
            editor.inline( this, {
                buttons: { label: '>', fn: function () { this.submit(); } }
            });
        });
    };

    var initGestionSecteurColleges = function () {      

        editorColleges();
        
        table = $('#secteurCollegeList').DataTable({
            "dom": 'Bfrtip',
            "responsive": true,
            "orderCellsTop": true, //nécessaire pour le filtre par colonne
            "fixedHeader": true,
            "language": {
                "url": "plugins/jeduweb/js/libs/DataTables/i18n/french.json"
            },
            "order": [2, "asc"],
            "columnDefs": [
                {
                    "targets": [0],
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                {
                    "targets": [1],
                    "data" :  "id",
                    "className": "hide-column",
                    "visible": true,
                    "searchable": false
                },
                {
                    "targets": [2],
                    "data" : "secteurs.title",
                    "visible": true,
                    "searchable": true
                },
                {
                    "targets": [3],
                    "data" : "secteurs.ordre",
                    "visible": true,
                    "searchable": true
                },
                {
                    "targets": [4],
                    "data" : "pstatus.id",
                    "editField" : "secteurs.pstatus",
                    "visible": true,
                    "searchable": true
                }
            ],
            order: [ 3, 'asc' ],
            select: {
                style:    'os',
                selector: 'td:first-child'
            },
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        });
        
        //Ajout des filtres de colonnes
        $('#collegeList thead tr').clone(true).appendTo( '#collegeList thead' );
        $('#collegeList thead tr:eq(1) th.filterColumn').each( function (i) {
            $(this).html( '<input type="text" placeholder="Filtrer" />' );
     
            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            });
        });
        $('#collegeList thead tr th.nofilterColumn').html("&nbsp;");

        loadSecteurColleges();
    };
    
    $(document).ready(function () {     
        initGestionSecteurColleges();
    });

}(window.jQuery);

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The issue is that you are making the Ajax call to get the data and then adding it to the DataTable yourself. Editor's automatic filling of the options only works if DataTables makes the Ajax call to get the data.

With your method, you'd need to use the field().update() method to set the options - e.g.:

editor.field('secteurs.pstatus').update( response.options['secteurs.pstatus'] );

That said, I'm not clear on why you aren't using the ajax option to get the data for the table? Is it just because you want to check for empty objects and filter them out?

Allan

Enowar

Indeed, adding ajax directly to the datatable solved my problem.

I don't need to filter but the structure of my JSON is an endpoint which is not only used for datatable. I wanted to restructure according to my endpoint but I found a compromise.

Thank you Allan for your quick response.