2017-10-18 6 views
1

Mis à jour avec jsFiddle: https://jsfiddle.net/pnnorhtg/datatables le tri des données avec des numéros et des lettres de mélange

J'ai une table de données et je suis de la difficulté à l'initialisation des « numéros avec html » tables de données plug-in https://datatables.net/plug-ins/sorting/num-html.

Il est initialement trié sur 'Count' DESC. Cependant, une fois que j'exécute ma fonction qui modifie et ajoute html à chacune des cellules de cette colonne, elle n'est plus triable. D'après mes recherches, ce plug-in devrait être capable de résoudre ce problème, mais je n'ai pas de chance.

Ce Mes données:

var preHtmlData = [{ 
    Brand: "Toyota", 
    Count: 33423, 
    GBV: 242445 
}, { 
    Brand: "Ford", 
    Count: 23558, 
    GBV: 334343 
}, { 
    Brand: "Honda", 
    Count: 9466, 
    GBV: 933455 
}]; 

Ceci est ma fonction qui passe par et ajoute du texte HTML à la valeur en fonction de la clé:

//adding text next to Count 
function updateItemCount(preHtmlData) { 
    for(var key in preHtmlData) { 
      var value = preHtmlData[key]; 
      console.log(value) 

    if (value.Brand == 'Toyota') { 
      value.Count = value.Count + ' <div style="font-size: 10px;margin-top: -5px">Toyota Purchases</div>'; 
     } else if (value.Brand == 'Ford') { 
      value.Count = value.Count + ' <div style="font-size: 10px;margin-top: -5px">Ford Purchases</div>'; 
     } else if (value.LOB == 'Honda') { 
      value.Count = value.Count + ' <div style="font-size: 10px;margin-top: -5px">Honda Purchases</div>'; 
     } 
     } 
    } 

C'est ce que là où je suis Initialisation tableau :

summary_data_table = $('#resultsTable').DataTable({ 
     "bSort": true, 
     "destory": true, 
     "data": data, 
     "searching": false, 
     "paging": false, 
     "order": [ 
      [aryJSONColTable.length - 1, "desc"] 
     ], 
     "dom": '<"top">t<"bottom"><"clear">', 
     "columnDefs": aryJSONColTable, 
       [ 
       { type: 'natural-nohtml', targets: 5 } 
       ] 
     "initComplete": function(settings, json) { 
      $("#resultsTable").show(); 
     } 
    }); 

J'ai ajouté le plug-in et construit mon code selon la documentation, j'ai un sentiment de son comment j'ai défini mon columnDefs, mais j'en ai besoin pour exécuter aryJSONColTable et le tri naturel.

+0

les mauvaises ' « columnDefs »: aryJSONColTable,' semble provoquer ce problème – davidkonrad

Répondre

0

MISE À JOUR

Comme on le voit à partir de votre violon, vous pouvez résoudre ce problème en plaçant un type d'ordre (« type »: « naturel ») à l'intérieur de vos propriétés personnalisées que vous passez à columnDefs

customParams = { 
    "targets": keys.length - 1, 
    "sTitle": "Item Count", 
    "type":"natural" 
} 

S'il vous plaît voir le violon mis à jour pour la solution https://jsfiddle.net/pnnorhtg/1/

+0

merci pour votre réponse, je l'ai essayé cela et la fonctionnalité de tri ne fonctionne toujours pas. Dois-je initier le plugin natural.js avant le fichier datatables.js? ou cet ordre n'a-t-il pas d'importance? En ce moment, j'appelle le script natural.js après datatables.js, mais j'ai essayé dans les deux sens. –

+0

Pouvez-vous produire des pls jsfiddle afin que nous puissions vous aider à mieux? – MaVRoSCy

+0

voici un jsfiddle https://jsfiddle.net/pnnorhtg/ J'espère que cela aide. Aussi s'il y a une autre façon de le faire en plus du plugin de tri naturel, j'aimerais en entendre parler –