J'essaie d'atteindre https://almsaeedstudio.com/themes/AdminLTE/pages/tables/data.html - "Table de données avec fonctionnalités complètes"
Lorsque j'ajoute tbody de manière statique, la pagination et le tri fonctionnent bien, mais lorsque j'ajoute tbody en utilisant jquery comme indiqué ci-dessous, des lignes sont ajoutées, mais la pagination et le tri échouent.
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/
Code mis à jour
Le code mis à jour ne remplit pas la table, bien que la réponse contienne des données. Bien que je règle la valeur deferRender à true, le datatable est toujours 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");
}
});
}
Est-ce que l'aide des personnes répondues 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>
N'ajoutez pas la ligne à la balise de table directement, ajoutez-la à l'instance DataTable, puis utilisez la méthode .draw()
. L'ajout à l'instance DataTable l'ajoutera de manière interne en tant que tbody
de toute façon. Quelque chose comme ça devrait faire
var mytable = $('#tblItems').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
mytable.row.add(['asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id']);
mytable.draw();
Voici une démo https://jsfiddle.net/dhirajbodicherla/vwpsxhaL/1/
Lire également comment ajouter des lignes à DataTable à partir de leur documentation pour référence ultérieure
Vous pouvez utiliser rows.add()
(pluriel) et faire quelque chose comme ça
var jsonObject = JSON.parse(response.d);
var result = jsonObject.map(function(item){
var result = [];
result.Push(item.Id);
// .... add all the values required
return result;
});
myTable.rows.add(result); // add to DataTable instance
myTable.draw(); // always redraw
var myTable;
$(document).ready(function() {
myTable = $("#tblItems").DataTable({
"deferRender": true,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
PopulateItemsTable();
});
function PopulateItemsTable() {
$.ajax({
type: "POST",
url: "Item.aspx/Search",
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);
// .... add all the values required
return result;
});
myTable.rows.add(result); // add to DataTable instance
myTable.draw(); // always redraw
}
});
}
Si vous modifiez la table html à l'aide de jQuery mais pas les apis fournis par le plugin, vous devez appeler le plugin à nouveau pour qu'il rétablisse la conformité au html modifié.
$(document).ready(function() {
$('#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>');
$('#tblItems').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
});
Démohttps://jsfiddle.net/8hyr08xb/
Mise à jour basée sur la question modifiée
Essaye ça
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), html = [];
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 = '';
html.Push("<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>' + html.join('') + '</tbody>')
.DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
}
else {
$("#tblItems").append("No records found");
}
}
},
failure: function () {
$("#tblItems").append(" Error when fetching data please contact administrator");
}
});
}
Croyez-moi, j'ai fait tout ce qui précède, aucun ne fonctionne comme prévu sans écrire de longues lignes de code
La solution pour moi était assez simple et rapide ..___ Maintenant, pour que Data Table fonctionne avec votre demande Ajax, vous devez d'abord appeler la demande avant d'engager datatable Exemple
Notez que vous n’avez pas besoin d’appeler DataTable avant d’appeler votre ajax, la table a besoin que des données soient introduites dans le corps de la table
<tbody class="load-transactions"> and append using jquery for the rest
Essayez ceci. Remercie moi plus tard.