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 :",
searchPlaceholder: "Saisir ...",
lengthMenu: "Afficher _MENU_ éléments",
info: "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
infoEmpty: "Affichage de l'élement 0 à 0 sur 0 éléments",
infoFiltered: "(filtré de _MAX_ éléments au total)",
infoPostFix: "",
loadingRecords: "Chargement en cours...",
zeroRecords: "Aucun élément à afficher",
emptyTable: "Aucune donnée disponible dans le tableau",
paginate: {
first: "Premier",
previous: "Précé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);
}
});
}
});
});
