Est-ce que quelqu'un sait, s'il vous plaît, quel est le problème avec le très simple fichier HTML ci-dessous?
J'essaye juste d'utiliser un tableau d'objets comme source de données pour DataTables:
tests.html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.2/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var data = [
{"Name":"UpdateBootProfile","Result":"PASS","ExecutionTime":"00:00:00","Measurement":[]},
{"Name":"NRB Boot","Result":"PASS","ExecutionTime":"00:00:50.5000000","Measurement":[{"TestName":"TOTAL_TURN_ON_TIME","Result":"PASS","Value":"50.5","LowerLimit":"NaN","UpperLimit":"NaN","ComparisonType":"nctLOG","Units":"SECONDS"}]},
{"Name":"NvMgrCommit","Result":"PASS","ExecutionTime":"00:00:00","Measurement":[]},
{"Name":"SyncNvToEFS","Result":"PASS","ExecutionTime":"00:00:01.2500000","Measurement":[]}
];
$(function() {
var testsTable = $('#tests').dataTable({
bJQueryUI: true,
aaData: data,
aoColumns: [
{ mData: 'Name' },
{ mData: 'Result' },
{ mData: 'ExecutionTime' }
]
});
});
</script>
</head>
<body>
<table id="tests">
<thead>
<tr>
<th>Name</th>
<th>Result</th>
<th>ExecutionTime</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
UPDATE: Ok, j'ai la réponse de l'auteur pour utiliser une version plus récente de DataTables ou renommer mData en mDataProp
Vous utilisez un tableau d'objets. Pouvez-vous utiliser un tableau à deux dimensions à la place?
http://www.datatables.net/examples/data_sources/js_array.html
Voir ce jsfiddle: http://jsfiddle.net/QhYse/
J'ai utilisé un tableau comme celui-ci et cela a bien fonctionné:
var data = [
["UpdateBootProfile","PASS","00:00:00",[]] ,
["NRB Boot","PASS","00:00:50.5000000",[{"TestName":"TOTAL_TURN_ON_TIME","Result":"PASS","Value":"50.5","LowerLimit":"NaN","UpperLimit":"NaN","ComparisonType":"nctLOG","Units":"SECONDS"}]] ,
["NvMgrCommit","PASS","00:00:00",[]] ,
["SyncNvToEFS","PASS","00:00:01.2500000",[]]
];
Edit pour inclure un tableau d'objets
Il y a une solution possible à cette question: jQuery DataTables fnrender with objects
Jsfiddle http://jsfiddle.net/j2C7j/ utilise un tableau d’objets. Pour ne pas avoir l'erreur, je devais la compléter avec 3 valeurs vides - moins qu'optimal, je sais. Vous pouvez trouver un meilleur moyen avec fnRender, merci de poster si vous le faites.
var data = [
["","","", {"Name":"UpdateBootProfile","Result":"PASS","ExecutionTime":"00:00:00","Measurement":[]} ]
];
$(function() {
var testsTable = $('#tests').dataTable({
bJQueryUI: true,
aaData: data,
aoColumns: [
{ mData: 'Name', "fnRender": function( oObj ) { return oObj.aData[3].Name}},
{ mData: 'Result' ,"fnRender": function( oObj ) { return oObj.aData[3].Result }},
{ mData: 'ExecutionTime',"fnRender": function( oObj ) { return oObj.aData[3].ExecutionTime } }
]
});
});
Pournullouvaleur indéfinieerror, ajoutez simplement cette ligne aux attributs: ,"columnDefs": [ { "defaultContent": "-", "targets": "_all" } ]
Exemple :
oTable = $("#bigtable").dataTable({
"columnDefs": [{
"defaultContent": "-",
"targets": "_all"
}]
});
La boîte d'alerte ne s'affichera plus, toutes les valeurs vides seront remplacées par ce que vous avez spécifié.
Cela m'a tourmenté pendant plus d'une heure.
Si vous utilisez l'option dataSrc et l'option defs de colonnes, assurez-vous qu'elles se trouvent aux emplacements appropriés. J'avais imbriqué les définitions de colonne dans les paramètres ajax et perdu beaucoup trop de temps à comprendre cela.
C'est bon:
Ce n'est pas bien:
Différence subtile, mais suffisamment réelle pour causer la perte de cheveux.
J'avais le même problème. Il s'avère que dans mon cas, il me manquait la virgule après la dernière colonne. 30 minutes de ma vie perdue, je ne reviendrai jamais!
Assurez-vous que les noms de colonne sont les mêmes. Ils sont sensibles à la casse. Ici, dans mon cas, j'ai eu cette erreur lorsque les noms de colonne de mon modèle sont en majuscule et j'ai utilisé toutes les lettres minuscules dans les données de la demande ajax.
Donc, j'ai résolu en faisant correspondre les noms de colonnes exactement de la même manière que les noms de modèles existants.
Liaison DataTable
$("#Customers").DataTable({
ajax: {
url: "/api/customers/",
dataSrc: ""
},
columns: [
{
data: "Name",
render: function (data, type, customer) {
return "<a href='/customers/edit/" + customer.Id + "'>" + customer.Name + "</a>";
}
},
{
data: "Name"
},
{
data: "Id",
render: function (data) {
return "<button class='btn-link js-delete' data-customer-id=" + data + ">Delete</button>";
}
}
]
});
Méthode de l'API Web:
public IEnumerable<Customer> GetCustomers()
{
return _context.Customers.ToList();
}
Mon modele:-
public class Customer
{
public int Id { get; set; }
[Required]
[StringLength(255)]
public string Name { get; set; }
[Display(Name="Date Of Birth")]
public DateTime? BirthDate { get; set; }
public bool isSubscribedToNewsLetter { get; set; }
public MembershipType MembershipType { get; set; }
[Display(Name="Membership Type")]
[Required]
public byte MembershipTypeId { get; set; }
}
alors voici dans mon cas, iam remplissant datatable avec des colonnes (Nom, Nom, Id) .. iam dupliquant le nom de la deuxième colonne à tester.
Depuis le site Web de DataTables:
Chaque cellule de DataTables demande des données et lorsque DataTables essaie de obtenir des données pour une cellule et est incapable de le faire, il déclenchera un avertissement, vous indiquant que les données ne sont pas disponibles là où elles étaient attendues être. Le message d'avertissement est:
Avertissement DataTables: id de table =
{id}
- Paramètre inconnu demandé '{parameter}
' pour la ligne{row-index}
où:
{id}
est remplacé par l'ID DOM de la table qui a déclenché l'erreur
{parameter}
est le nom du paramètre de données que DataTables demande
{row-index}
est l'index de ligne interne DataTables pour le serveur rwo qui a déclenché l'erreur.Donc, pour le décomposer, DataTables a demandé des données pour une ligne donnée, de le
{parameter}
fourni et il n'y a pas de données là-bas, ou il s'agit denull
ouundefined
.
Voir cette note technique sur le site Web DataTables pour plus d’informations.
Il s'agit d'un cas très courant dans DataTables lorsqu'il n'est pas possible de trouver le champ de requête défini dans la configuration de DataTable.
Par exemple:
"aoColumns": [{
mData: 'mobile', sWidth: "149px;"
}, {
mData: 'name', sWidth: "121px;"
}, {
mData: 'productName', sWidth: "116px;"
}
}];
Ici, si DataTable ne reçoit pas les propriétés mentionnées ci-dessus. Cela va générer cet avertissement:
Avertissement DataTables: Le paramètre inconnu "0" a été demandé à la source de données pour la ligne "0"
Pour surmonter cela, il vous suffit de définir une valeur par défaut dans "aoColumns"
Par exemple:
"aoColumns": [{
mData: 'mobile',sDefaultContent : '',sWidth: "149px;"
}, {
mData: 'name',sDefaultContent : '', sWidth: "121px;"
}, {
mData: 'productName',sDefaultContent : '', sWidth: "116px;"
}
}];
sDefaultContent supprimera l'avertissement .
Remarque: Cette propriété peut être modifiée en fonction de la version de dataTables que vous utilisez.
Je fais face à ce problème parce que je me suis planté return keyword
dans custom rendering
dans Columns section
columns: [
{....
'data': function(row, type, val, meta) {
if (row.LetterStatus)
return '@CultureHelper.GetCurrentCulture()' == 'ar'? row.LetterStatus.NameInArabic: row.LetterStatus.NameInEnglish;
else row.LetterStatusID.toString();// here is the problem because I messed the Return key keyword
},
......
}
le problème dans mon code est parce que je messed
le Return keyword
dans le else clause
alors je l'ai changé pour
....
else return row.LetterStatusID.toString();// messed return keyword added
.....
Dans mon scénario étrange, j'avais une colonne différente qui ne renvoyait pas toujours une valeur dans la fonction 'render' return null
a résolu mon problème.
Si vous utilisez knockout.bindings.dataTables.js
, vous pouvez éditer le fichier et remplacer cette ligne.
dataTable.fnAddData(unwrappedItems);
avec
if (unwrappedItems.length > 0) {
dataTable.fnAddData(unwrappedItems);
}
Cela m'a aidé et j'espère vous aider.
Si quelqu'un utilise les nouveaux DataTables (ce qui est génial, btw) et souhaite utiliser un tableau d'objets, vous pouvez le faire facilement avec l'option colonnes. Reportez-vous au lien suivant pour un excellent exemple à ce sujet.
DataTables avec tableau d'objets
Je me débattais avec cela depuis 2 jours et cela l'a résolu. Je ne voulais pas passer à des tableaux multi-dimensionnels pour d'autres raisons de code, donc je recherchais une solution comme celle-ci.