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