J'ai créé un site Web principalement en utilisant HTML, CSS, PHP et MYSQL et j'ai ajouté une liste déroulante de sélection avec des rôles pour les utilisateurs à choisir. J'en ai besoin pour chaque rangée d'utilisateurs du tableau. J'ai réussi à faire fonctionner tabledit sur le site, mais je ne sais pas comment ajouter cette liste déroulante à la colonne Rôles.
Voici comment le HTML est configuré
<body>
<div class="panel panel-default">
<!-- <div class="panel-heading">Sample Data</div>-->
<div class="panel-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Approval</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!--SELECT DROPDOWN LIST-->
<select id="test">
<?php
for ($a = 1; $a <= $count ; $a++){
?>
<option value="1"><?php echo($roles[($a-1)]);?></option>
<?php
}
?>
</select>
<!--//////////////-->
</body>
<script>
$(document).ready(function(){
var dataTable = $('#sample_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"FetchUserTable.php",
type:"POST"
}
});
$('#sample_data').on('draw.dt', function(){
$('#sample_data').Tabledit({
url:'ActionUserTable.php',
dataType:'json',
columns:{
identifier : [0, 'user_id'],
editable:[
[1, 'first_name'],
[2, 'last_name'],
[3, 'email'],
[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
// [5, 'role_id']
]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#' + data.id).remove();
$('#sample_data').DataTable().ajax.reload();
}
}
});
});
});
4 Réponses :
Regardez comment ajouter une ligne dans datatables.net ...
var t = $('#sample_data').DataTable();
t.row.add([
$('#test').html()
]).draw(false);
t.ajax.reload();
Donc, dans votre cas, dans onSuccess:function(data, textStatus, jqXHR) , nous devrions simplement pouvoir changer cela, $('#sample_data').DataTable().ajax.reload(); , à....
var t = $('#example').DataTable();
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3',
counter +'.4',
counter +'.5'
] ).draw( false );
Cela fait essentiellement ce que votre code faisait auparavant, mais maintenant vous appelez également le .row.add() sur le DataTable() .
Merci jusqu'à présent, mais la raison pour laquelle j'utilise HTML DataTable est pour les extras tels que la limite par page et le champ de recherche qu'il inclut. Lorsque vous utilisez HTML DataTable, votre réponse ne peut malheureusement pas être appliquée
@JoseLuisLandivar Ah, je crois comprendre maintenant! Pensez-vous que cela fonctionnerait? (Je mettrai à jour ma réponse, si oui.) After $('#sample_data').DataTable().ajax.reload(); , essayez: $ ('# sample_data'). find ('tbody'). html ('<tr> <td>' + $ ('# test'). html () + '</td> </tr> '); `? Cela devrait le faire réappliquer après le gestionnaire de succès des tables de données, ou me faire savoir si je me trompe? Cela semble que cela devrait fonctionner?
après avoir implémenté les modifications suggérées, j'obtiens ce message d'erreur: DataTables warning: table id=sample_data - Requested unknown parameter '5' for row 0, column 5. Il disparaît lorsque je commente <th> Rôles </th>. À propos du masquage à l'aide de css J'utilise <select id = "test" style = "display: none">.
Je regarde datatables.net: Ajouter des lignes . Il semble que tout ce dont vous pourriez avoir besoin est juste $('#sample_data').row.add([$('#test').html()]) ?, Ou peut-être la même chose sans l'appel de fin .html() ? Je mettrai à jour la réponse si c'est vrai.
l'ajouté comme ceci vous voulez dire: `` `` onSuccess: function (data, textStatus, jqXHR) {if (data.action == 'delete') {$ ('#' + data.id) .remove (); $ ('# sample_data'). DataTable (). ajax.reload (); $ ('# sample_data'). find ('tbody'). html ('<tr> <td>' + $ ('# test'). html () + '</td> </tr>'); $ ('# sample_data'). row.add ([$ ('# test'). html ()]); }} `` `
Oh, je voulais dire, le seul changement dont vous avez besoin devrait être le code .row.add . Vous pouvez supprimer les autres modifications qui ne fonctionnent pas. Cela devrait fonctionner, avec seulement .row.add , n'est-ce pas ou non?
Jusqu'à présent, cela ne fonctionne toujours pas. J'obtiens toujours la même erreur. Peut-être pourriez-vous mettre à jour votre réponse une fois de plus et je pourrais l'essayer
Merci pour votre patience, mis à jour maintenant! Troisième fois le charme.
Malheureusement, la colonne n'est pas ajoutée au tableau.
La seule chose que je peux penser d'essayer de faire est de faire la même chose pour l'autre ligne avec l'appel datatable . La documentation officielle que j'ai liée est claire, mais je suis sûr que je ne fais que mal l'appliquer à ce cas. Si vous aviez une version de démonstration de sandbox en ligne à moitié fonctionnelle, il serait beaucoup plus clair pour nous deux de voir que mon correctif fonctionne / ne fonctionne pas.
Vous pouvez utiliser l' option de rendu sur les définitions de colonne pour rendre ce que vous voulez. Dans la fonction de rendu, vous avez accès à la ligne et à l'ensemble de l'objet de données.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
<body>
<div class="panel panel-default">
<!-- <div class="panel-heading">Sample Data</div>-->
<div class="panel-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Approval</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div style="display:none;" id="select-box">
<select>
<option>Role 1</option>
</select>
</div>
</body>$(function() {
let $tbl = $('#sample_data'), $select = $('#select-box')
let data = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
]
]
$tbl.DataTable({
data: data,
columns: [
null, null, null, null, {
render: function(data, type, row, meta) {
return $select.html() + `Use this to select "${data}"`
}
},
{
render: function(data, type, row, meta) {
return $select.html() + `Use this to select "${data}"`
}
},
]
})
});ce n'est pas une solution appropriée mais cela résoudra votre problème. Sélectionnez d'abord vos rôles html
var emelnt = $('#test');
//now append to table td
$('table tbody td:nth-child(6)').html(emelnt);
//you can also use a function to first get role id from table each row then create your select here in js and the append it to html so then your roles drop down will be selected.
Je ne sais pas si vous utilisez DataTable ou Tabledit , vous semblez les mélanger pour une raison quelconque. Je ne sais pas si c'est une bonne idée pour commencer. Je suggère de choisir l'un sur l'autre. Cette réponse se concentre sur Tabledit .
Comme la table est essentiellement créée et gérée par Tabledit vous devez y fournir les données. Vous utilisez déjà une sélection pour l'approbation de l'administrateur:
<option value="role_a">role A</option> <option value="role_b">role B</option>
Votre sélection de rôle peut être créée de la même manière. Puisque la structure de $roles n'est pas partagée, je supposerai qu'il s'agit d'un tableau avec des valeurs de chaîne. Créez d'abord une variable roles dans vos balises <script> .
// assumed <?php echo json_encode($roles); ?> output
const roles = {"role_a": "role A", "role_b": "role B"};
Ajoutez ensuite la colonne au paramètre columns.editable :
<option value="0">role A</option> <option value="1">role B</option>
Vous devrez peut-être convertir la structure de $roles pour créer la sortie JSON correcte. Voici quelques exemples de résultats:
Exemple 1
// assumed <?php echo json_encode($roles); ?> output const roles = ["role A", "role B"];
Crée:
[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}'],
[5, 'role', JSON.stringify(roles)]
Exemple # 2
const roles = <?php echo json_encode($roles); ?>;
Crée:
[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
Qu'est-ce qu'une "table HTML jquery"? Voulez-vous dire datatables.net ?
Oui c'est correct. Merci @ Freedomn-m