L'ajout dynamique de lignes de table de données à l'aide d'ajax avec la pagination et le tri
Je suis en train de réaliser https://almsaeedstudio.com/themes/AdminLTE/pages/tables/data.html - "Tableau de Données Avec des Fonctions Complètes de"
Quand j'ai ajouté tbody de manière statique, la pagination et le tri fonctionne très bien mais lorsque j'ajoute tbody à l'aide de jquery comme indiqué ci-dessous, les lignes sont ajoutées, mais la pagination et le tri échoue.
HTML
<table id="tblItems">
<thead>
<tr>
<th>code</th>
<th>Name</th>
<th>Description</th>
<th>Image</th>
<th>Parent</th>
<th>Location</th>
<th>Category</th>
</tr>
</thead>
</table>
jquery
$(document).ready(function() {
$('#tblItems').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
$('#tblItems').append('<tbody><tr><td>asdsa34id</td><td> asdsa34id </td><td>asdsa34id </td><td> asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td></tr></tbody>');
});
https://jsfiddle.net/techjerk2013/vwpsxhaL/
Mise À Jour Du Code
La mise à jour du code de ne pas remplir la table si il y a des données à partir de la réponse. Si j'ai mis le deferRender de vrai, encore la datatable est vide.
$(document).ready(function() {
PopulateItemsTable();
BindTable();
});
function BindTable() {
$("#tblItems").DataTable({
"deferRender": true,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
}
function PopulateItemsTable() {
var txt = "";
$.ajax({
type: "POST",
url: "Item.aspx/Search",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var jsonObject = JSON.parse(response.d);
if (jsonObject) {
var len = jsonObject.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
if (jsonObject[i].Id) {
Id = jsonObject[i].Id;
}
else {
Id = '';
}
if (jsonObject[i].Name) {
Name = jsonObject[i].Name;
}
else {
Name = '';
}
if (jsonObject[i].Description) {
Description = jsonObject[i].Description;
}
else {
Description = '';
}
if (jsonObject[i].Image) {
Image = jsonObject[i].Image;
}
else {
Image = '';
}
if (jsonObject[i].Parent) {
Parent = jsonObject[i].Parent;
}
else {
Parent = '';
}
if (jsonObject[i].Location) {
Location = jsonObject[i].Location;
}
else {
Location = '';
}
Category = '';
txt += "<tr><td>" + Id + "</td><td>" + Name + "</td><td>" + Description + "</td><td>" + Image + "</td><td>" + Parent + "</td><td>" + Location + "</td><td>" + Category + "</td></tr>";
$('#tblItems').append('<tbody>' + txt + '</tbody>');
}
}
else {
$("#tblItems").append("No records found");
}
}
},
failure: function () {
$("#tblItems").append(" Error when fetching data please contact administrator");
}
});
}
Réponse
Aura de l'aide de personnes répondu ci-dessous, le code ci-dessous fonctionne comme prévu.
<script type="text/javascript">
var myTable;
$(document).ready(function () {
BindItemTable();
PopulateItemsTable();
});
function BindItemTable() {
myTable = $("#tblItems").DataTable({
"deferRender": true,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
}
function PopulateItemsTable() {
$.ajax({
type: "POST",
url: "ItemManagement.aspx/SearchIdList",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var jsonObject = JSON.parse(response.d);
var result = jsonObject.map(function (item) {
var result = [];
result.push(item.Id);
result.push(item.Name);
result.push(item.Description);
result.push(item.Image);
result.push(item.Parent);
result.push(item.Location);
result.push("");
return result;
});
myTable.rows.add(result);
myTable.draw();
},
failure: function () {
$("#tblItems").append(" Error when fetching data please contact administrator");
}
});
}
</script>
OriginalL'auteur Gopi | 2015-06-12
Vous devez vous connecter pour publier un commentaire.
Ne pas ajouter la ligne à la table de balisage directement, au lieu de l'ajouter à DataTable instance et ensuite utiliser le
.draw()
méthode. L'ajout de la DataTable instance interne de l'ajouter en tant quetbody
de toute façon. Quelque chose comme ceci devrait faireVoici une démo https://jsfiddle.net/dhirajbodicherla/vwpsxhaL/1/
Aussi la lecture de comment ajouter des lignes à DataTable de leurs documents de référence
Mise à jour
Vous pouvez utiliser
lignes.ajouter()
(au pluriel) et de faire quelque chose comme cecipouvez-vous partager comment l'objet JSON ?
La réponse.d [{"Id":"2F2203447334C31000000006","Name":"2F2203447334C31000000006","Description":"2F2203447334C31000000006","Parent":"","Image":"","Verified":"no","State":"","Location":"","X":"0","Y":"0","Z":"0","IdClass":"User","Color":null,"Position":null} ........ ]
et vous allez être en utilisant tous les attributs de l'objet?
Nan, je ne les utilisez pas tous et j'ai besoin de mettre une chaîne vide lorsque la valeur est null.
OriginalL'auteur Dhiraj
Si vous êtes en train de modifier le tableau html à l'aide de jQuery, mais pas les api fournies par plugin, alors vous devez appeler le plugin nouveau de sorte qu'il va retrouver comme par le html modifié.
Démo https://jsfiddle.net/8hyr08xb/
Mise à jour basé sur, édité question
Essayer cette
où est votre code mis à jour le violon?
depuis, c'est un ajax réponse que je viens de mettre à jour la question. La réponse.d [{"Id":"2F2203447334C31000000006","Name":"2F2203447334C31000000006","Description":"2F2203447334C31000000006","Parent":"","Image":"","Verified":"no","State":"","Location":"","X":"0","Y":"0","Z":"0","IdClass":"User","Color":null,"Position":null} ........ ]. S'il vous plaît laissez-moi savoir si cela va aider
Vérifier mon édité réponse.
Je ne vois que l'en-tête
OriginalL'auteur ShankarSangoli
Confiance en moi, j'ai fait tous les ci-dessus aucun n'a jamais fonctionne comme prévu sans avoir à écrire de longues lignes de code
La solution pour moi a été assez simple et rapide.
Maintenant, pour obtenir des Données de la Table de travail avec votre requête Ajax, vous devez appeler la demande avant de s'engager datatable
Exemple
Remarque vous n'avez pas à appeler DataTable d'abord avant d'appeler votre ajax, La table de besoin de données pour être introduit dans le corps de table
Juste de l'essayer. Me remercier plus tard.
OriginalL'auteur Delino