How to use the methode update of an select field ?

GuillaumeBoucher

I try to find an example but i can't find one easy to implement.
I read the documentation https://editor.datatables.net/reference/field/select and try to implement the brendons's example in the bottom of the page.

below this is my code, if someone can help me ? why when i select update the combobox is still empty ?

var editor; 
    var table;

    $(function () {

        $('.sidebar-menu').tree();

        var optionsA = [];
        $.getJSON("LookupStatus", {
            term: "-1"
        },
            function (data) {
                var option = {};
                $.each(data, function (i, e) {
                    option.label = e.text;
                    option.value = e.id;
                    optionsA.push(option);
                    option = {};
                });
            }
        ).done(function () { editor.field('statut').update(optionsA); });

        editor = new $.fn.dataTable.Editor({
            ajax: {
                url: "@Url.Action("DataTableChange", "User")",
                type: "POST"
            },
            table: "#TablePerson",
            i18n: {
                create: {
                    button: "Nouveau",
                    title: "Créer nouvelle entrée",
                    submit: "Créer"
                },
                edit: {
                    button: "Modifier",
                    title: "Modifier entrée",
                    submit: "Actualiser"
                },
                remove: {
                    button: "Supprimer",
                    title: "Supprimer",
                    submit: "Supprimer",
                    confirm: {
                        _: "Etes-vous sûr de vouloir supprimer %d lignes?",
                        1: "Etes-vous sûr de vouloir supprimer 1 ligne?"
                    }
                },
                error: {
                    system: "Une erreur s’est produite, contacter l’administrateur système"
                },
                multi: {
                    title: "Plusieurs valeurs",
                    info: "Les éléments sélectionnés contiennent des valeurs différentes pour cette entrée. Pour modifier et mettre tous les éléments pour cette entrée pour la même valeur, cliquez ou appuyez ici, sinon ils vont conserver leurs valeurs individuelles.",
                    restore: "Annuler les modifications"
                },
                datetime: {
                    previous: 'Précédent',
                    next: 'Premier',
                    months: ['Janvier', 'Février', 'Mars', 'Avril', 'peut', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                    weekdays: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']
                }
            },
            idSrc: "id",
            fields: [
                {
                    "label": "Nom:",
                    "name": "nom"
                },
                {
                    "label": "Prénom:",
                    "name": "prenom"
                },
                {
                    label: "Statut:",
                    name: "statut",
                    type: "select", placeholder: "Choisir un statut",
                    //options: [
                    //    "Actif",
                    //    "Inactif"                            
                    //]
                },
                {
                    "label": "Site:",
                    "name": "site"
                },
                {
                    "label": "Fonction:",
                    "name": "fonction"
                },
                {
                    "label": "Manager:",
                    "name": "manager"
                },
                {
                    "label": "Email:",
                    "name": "email"
                }
            ]
        });

        var table = $('#TablePerson').DataTable({

            //dom: "BSlfrtip",
            // l - length changing input control
            // f - filtering input
            // t - The table!
            // i - Table information summary
            // p - pagination control
            // r - processing display element

            dom: "<'row'<'col-xs-5'B><'col-xs-2'l><'col-xs-5'f>>" + "<'row'<'col-xs-12'tr>>" + "<'row'<'col-xs-2'i><'col-xs-10'p>>",
            proccessing: true,
            serverSide: true,
            lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
            ajax: {
                url: "@Url.Action("DataTableLoad", "User")",
                type: "POST"
            },
            language: {
                processing: "Traitement en cours...",
                search: "Rechercher&nbsp;:",
                searchPlaceholder: "Saisir ...",
                lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
                info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: "Aucune donnée disponible dans le tableau",
                paginate: {
                    first: "Premier",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: "Dernier"
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }

            },
            columns: [

                { data: "nom" },
                { data: "prenom" },
                { data: "statut.text" },
                { data: "site.nom" },
                { data: "fonction" },
                { data: "manager.email", defaultContent: "<i>Not set</i>" },
                { data: "email" },   
                { data: null, render: function (data, type, row) {
                        // Combine the first and last names into a single table field
                    return '<a href="Details/' + data.id + '">Detail</a>';
                    }
                }
            ],
            select: true,
            buttons: [
                { extend: "create", text: '<a><i class="fa fa-fw fa-plus"></i>Nouveau</a>', titleAttr: 'Nouveau', editor: editor },
                { extend: "edit", text: '<a><i class="fa fa-fw fa-edit"></i>Modifier</a>', titleAttr: 'Modifier', editor: editor },
                { extend: "remove", text: '<a><i class="fa fa-fw fa-remove"></i>Supprimer</a>', titleAttr: 'Supprimer', editor: editor },
                { extend: 'excel', text: '<a><i class="fa fa-fw fa-file-excel-o"></i>Excel</a>', titleAttr: 'Excel' },
                { extend: 'print', text: '<a><i class="fa fa-fw fa-print"></i>Imprimer</a>', titleAttr: 'Imprimer' }
                                                   ]
        }).on('select', function (e, dt, type, indexes) {

            if (type === 'row') {

                var data = table.rows(indexes).data();

                var send_data = [];

                $.each(data, function (item, index, array) {
                    send_data.push(index);
                });

                // do something with the ID of the selected items

                $.ajax({
                    // edit to add steve's suggestion.
                    //url: "/ControllerName/ActionName",
                    url: "@Url.Action("ItemSelected", "User")",
                    type: "POST",
                    dataType: "json",
                    data: {
                        d: send_data
                    },

                    success: function (data) {
                        // your data could be a View or Json or what ever you returned in your action method
                        // parse your data here
                        alert(data);
                    }
                });
            }
        });
    });

colin

Hi @GuillaumeBoucher ,

Are you seeing errors in the console? Is your "LookupStatus" running successfully, or does that return errors? How about if you run that script by hand - does it return the expected list?

Cheers,

Colin