Editor Joined Table - Empty Select - Java

Editor Joined Table - Empty Select - Java

EnowarEnowar Posts: 2Questions: 1Answers: 0
edited September 11 in Free community support

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: '&gt;', 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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 52,661Questions: 1Answers: 8,058 Site admin
    Answer ✓

    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

  • EnowarEnowar Posts: 2Questions: 1Answers: 0

    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.

Sign In or Register to comment.