J'ai réussi à afficher la table MySQL dans la table de données HTML, cependant, il y a un bogue qui rend l'affichage incorrect.
voir l'image:
c'est le code derrière l'affichage.
JAVASCRIPT:
<div class="data-tables">
<table id="dataTable" class="text-center" >
<thead class="bg-light text-capitalize">
<tr>
<th hidden>User ID</th>
<th>Control No.</th>
<th>Account Name</th>
<th>Date Inspection</th>
<th>Date of Report</th>
<th>Actual Use</th>
<th>Landmark</th>
<th>Registered Owner</th>
<th>Status</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
HTML:
$(document).ready(function(){
loadAccountList();
});
function loadAccountList() {
$.ajax({
/*url: "../srtdash/php_functions/account_list.php",
type: "POST",
dataType: "JSON",
data: {}, //this is data you send to your server*/
type: 'POST',
url: '../srtdash/php_functions/account_list.php',
dataType: 'json',
data: {},
contentType: 'application/json; charset=utf-8',
success: function(res)
{
for (var i = 0; i < res.length; i++) {
var lst;
if (res[i]['status'] == 1 ){
lst = '<h4><a href="#" class="badge badge-primary">Pending</a></h4>';
}else if (res[i]['status'] == 2 ){
lst = '<h4><a href="#" class="badge badge-secondary">For Approval</a></h4>';
}else if (res[i]['status'] == 3 ) {
lst = '<h4><a href="#" class="badge badge-success">For CAD</a></h4>';
}else if (res[i]['status'] == 4 ){
lst = '<h4><a href="#" class="badge badge-danger">For Appraisal</a></h4>';
}else if (res[i]['status'] == 5 ){
lst = '<h4><a href="#" class="badge badge-info">Release</a></h4>';
}
$('#tableBody').append('<tr><td hidden>' + res[i]['account_id']
+ '</td><td>' + res[i]['bvcsi_control']
+ '</td><td>' + res[i]['account_name']
+ '</td><td>' + res[i]['date_inspection']
+ '</td><td>' + res[i]['date_report']
+ '</td><td>' + res[i]['act_useof_prop']
+ '</td><td>' + res[i]['landmark']
+ '</td><td>' + res[i]['reg_owner']
+ '</td><td>' + lst
+ '</td></tr>')
}
}
});
}
Et aussi l'erreur, lorsque je recherche en utilisant la zone de texte dans datatable ne filtre pas le tableau, cela indique seulement que Aucune donnée disponible dans le tableau
p >
3 Réponses :
vous devez vérifier plusieurs choses.
assurez-vous que votre champ de texte de recherche fonctionne correctement chaque fois que vous tapez du texte de filtre et que vous y entrez. Je vois que votre code ne passe rien au serveur. (données: {} ici.)
vérifiez si vous recevez des données filtrées de l'appel ajax account_list.php.
essayez de vérifier votre requête dans account_list.php. Il semble que vos données de recherche doivent être interrogées avec la colonne Nom du compte. comme .. ACOUNT_NAME comme «% filter%»
vous devez vérifier les résultats sur le bloc de réussite.
succès: function (res)
en outre,
il serait préférable d'ajouter ci-dessous le bloc de réussite pour le suivi des erreurs. je suppose que ce cas peut être une erreur de résultat ou quelque chose de processus inattendu sur votre requête.
exemple:
error:function(e)
{
alert(e.responseText);
}
Secondaire, chaque fois que vous réussissez l'ajax vous appelez probablement a besoin d'effacer le tableau "tableBody" ci-dessus. sinon, il empilera les données précédentes que vous avez recherchées.
Ce que vous faites de mal, c'est de ne pas AJOUTER à la table. Vous utilisez un datatable. Vous voulez faire $ ("# dataTable"). DataTable (). Rows.add (["col1", "col2", ..., "colLast"]). Draw (); et ensuite vous pouvez rechercher la table. DataTable ne recherche pas les lignes DANS la table, il recherche les lignes que vous AJOUTEZ à la table avec sa propre méthode.
Le dessin est important. Si vous n'ajoutez pas le. draw () à la fin, il n'affichera pas réellement les changements qui ont été effectués.
$('#dataTable').dataTable().rows.add([res[i]['account_id'],
res[i]['bvcsi_control'],
res[i]['account_name'],
res[i]['date_inspection'],
res[i]['date_report'],
res[i]['act_useof_prop'],
res[i]['landmark'],
res[i]['reg_owner'],
lst]).draw();
Cela suppose que votre table a un identifiant de "table"
Datatables est extrêmement puissant - si vous utilisez les fonctionnalités dont il dispose et n'essayez pas de créer les vôtres (ce qui est en quelque sorte ce que vous essayiez de faire .....)
Votre HTML est OK ( vous n'avez pas besoin de l'ID dans le corps pour les tables de données).
Votre JS a besoin de beaucoup de nettoyage (et laisser les tables de données faire son travail!)
$(document).ready(function(){
var theTable = $("dataTable").dataTable({
"ajax": {
url: "../srtdash/php_functions/account_list.php"
// this presumes you are returning a json list of info you want
// (since you see it in the first example, it looks like it is OK)
// see https://datatables.net/examples/data_sources/ajax.html
},
responsive: true, // if you want a responsive table
"order": [0, 'desc'], // make the order as you like (count starts at column 0!)
"columns": [
{data: 'account_id'},
{data: "bvcsi_control"},
{data: 'account_name'},
{data: "date_inspection"},
{data: 'date_report'},
{data: 'act_useof_prop'},
{data: 'landmark'},
{data: 'reg_owner'},
{data: 'status'}
],
columnDefs: [
{
// here is where you do your 'button' stuff (or anything you want to change in the table....)
// 'data' is the info of the column
render: function (data, type, row) {
var lst;
if (data === 1 ){
lst = '<h4><a href="#" class="badge badge-primary">Pending</a></h4>';
}else if (data === 2 ){
lst = '<h4><a href="#" class="badge badge-secondary">For Approval</a></h4>';
}else if (data === 3 ) {
lst = '<h4><a href="#" class="badge badge-success">For CAD</a></h4>';
}else if (data === 4 ){
lst = '<h4><a href="#" class="badge badge-danger">For Appraisal</a></h4>';
}else if (data === 5 ){
lst = '<h4><a href="#" class="badge badge-info">Release</a></h4>';
}
return data;
},
targets: [8] // changes Status to a button
}
]
})
});
@Emma Ok Madame. Je vais le faire.
@Emma Salut madame. Je n'ai pas assez de réputation, c'est pourquoi je ne peux pas insérer d'image.
@Emma Salut encore Madame. je viens de le faire