jQuery datatable – Sélectionne une liste dans la colonne

Je suis en train d’extraire des données dans un datatable jQuery qui est grand! Mais je rencontre un problème avec la colonne Role.

J’essaye d’insérer une liste de sélection dans cette colonne qui aura deux options “admin” et “Utilisateur” et quelles que soient les données du tableau, définissez cette valeur dans la liste de sélection.

Mais je n’ai pas été en mesure de rendre la liste de sélection dans la table, puis de la définir en tant qu’administrateur ou utilisateur en fonction de ce qui se trouve dans le tableau.

jQuery(function($) { var data = [ ["test1", "admin", "yes"], ["test2", "admin", "yes"], ["test3", "user", "no"], ["test4", "user", "no"] ] function authusers() { t = $('#authTable').DataTable({ resortingeve: true, paging: false, data: data, columns: [{ "title": "Email", "render": function(data, type, row, meta) { return row[0]; } }, { "title": "Role", "render": function(data, type, row, meta) { return row[1]; } }, { "title": "Active", "render": function(data, type, row, meta) { var checkbox = $("", { "type": "checkbox" }); checkbox.attr("checked", (row[2] === "yes")); checkbox.addClass((row[2] === "yes") ? "checkbox_checked" : "checkbox_unchecked") return checkbox.prop("outerHTML") } }, ], order: [] }); } //Passes value and if it was enabled or disabled value to serverside. $(document).on('click', '.checkbox_checked , .checkbox_unchecked', function() { if ($(this).is(':checked')) { var rowIndex = $(this).closest('tr').find('td:eq(0)').text(); var status = 'yes'; } else if ($(this).prop('checked', false)) { var rowIndex = $(this).closest('tr').find('td:eq(0)').text(); var status = 'no'; } }); authusers(); });

        Email  Active  Role

Et aussi un JSfiddle

Tous les conseils ou recommandations sont les bienvenus!

Ce sont les quelques problèmes dans votre code comme les options de table de données ne devraient pas être dans “”. Vérifiez le violoniste corrigé ici.

https://jsfiddle.net/fjxbz50w/6/

 jQuery(function($) { var sdata = [ ["test1", "admin", "yes"], ["test2", "admin", "yes"], ["test3", "user", "no"], ["test4", "user", "no"] ] function authusers(data) { t = $('#authTable').DataTable({ resortingeve: true, paging: false, data : sdata, columns: [{ "title": "Email", "render": function(data, type, row, meta) { return row[0]; } }, { "title": "Role", "render": function(data, type, row, meta) { return row[1]; } }, { "title": "Active", "render": function(data, type, row, meta) { var checkbox = $("", { "type": "checkbox" }); checkbox.attr("checked", (row[2] === "yes")); checkbox.addClass((row[2] === "yes") ? "checkbox_checked" : "checkbox_unchecked") return checkbox.prop("outerHTML") } }, ], order: [] }); } //Passes value and if it was enabled or disabled value to serverside. $(document).on('click', '.checkbox_checked , .checkbox_unchecked', function() { if ($(this).is(':checked')) { var rowIndex = $(this).closest('tr').find('td:eq(0)').text(); var status = 'yes'; console.log(rowIndex); console.log(status); } else if ($(this).prop('checked', false)) { var rowIndex = $(this).closest('tr').find('td:eq(0)').text(); var status = 'no'; console.log(rowIndex); console.log(status); } }); authusers(); });

pour sélectionner dans la colonne Rôle, vous pouvez faire comme ceci.

 "title": "Role", "render": function(data, type, row, meta) { var a = sdata.indexOf(row); var select = $(""); $("#role_"+a).val(row[1]); return select.prop("outerHTML")

Voici le violoniste mis à jour.

https://jsfiddle.net/fjxbz50w/11/