web-dev-qa-db-fra.com

Uncaught TypeError: Impossible de lire la propriété 'aDataSort' de undefined

je travaille sur la pagination et j'utilise DataTables plugin, sur certains tableaux, cela fonctionne, mais sur d'autres, cela donne une erreur:

Uncaught TypeError: Impossible de lire la propriété 'aDataSort' de undefined

mon script de page ressemble à:

$(document).ready(function() {
     $('.datatable').dataTable( {
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true
    } );
} );

//Code HTML

<table class="table table-striped table-bordered datatable">
   <thead>
        <tr>
          <th><?php echo lang('date_label')?></th>
          <th><?php echo lang('paid_label')?></th>
          <th><?php echo lang('comments_label');?></th>
        </tr>
   </thead>
   <tbody>
      <?php foreach ($payments as $pay): ?>
      <tr>
        <td><?php echo dateformat($pay['time_stamp'], TRUE);?></td>
        <td><?php echo format_price($pay['amount']);?></td>
        <td><?php echo $pay['note'];?></td>
      </tr>
      <?php endforeach?>
   </tbody>
</table>

aucune idée de la façon dont le problème vient, je sais que c'est une erreur très commune mais je cherche et ne trouve rien pour supporter mon problème.
Quelqu'un connaît-il la solution?

javascriptjqueryjquery-datatables
7
Abdul Manan

utilisez quelque chose comme ceci dans votre code pour désactiver le tri sur DataTables (adapté d'un de mes projets utilisant la dernière DataTables)

$(document).ready(function() {
     $('.datatable').dataTable( {
        'bSort': false,
        'aoColumns': [ 
              { sWidth: "45%", bSearchable: false, bSortable: false }, 
              { sWidth: "45%", bSearchable: false, bSortable: false }, 
              { sWidth: "10%", bSearchable: false, bSortable: false } 
        ],
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true
    } );
} );

le tableau aoColumns décrit la largeur de chaque colonne et ses propriétés sortable; ajustez-le selon vos besoins pour votre propre table (nombre de) colonnes.

9
Nikos M.

J'ai rencontré le même problème et plus tard, j'ai trouvé une erreur de frappe dans la propriété "cibles" sous columnDefs. Voir ci-dessous exemple,

Mauvais code ci-dessous,

{
 "name": "firstName",
 "target": [1],
 "visible": false
}

Correction - manqués dans les cibles :(

{
 "name": "firstName",
 "targets": [1],
 "visible": false
}

On dirait que cette erreur se produit lorsque quelque chose empêche les colonnes d'être initialisées. J'ai vérifié que l'événement 'preInit.dt' n'est pas déclenché dans ce cas.

J'espère que ça aide quelqu'un.

4
Prasoon

J'ai rencontré ce problème en utilisant KnockoutJS car les colonnes n'étaient pas encore définies lorsque le javascript essayait de lui appliquer le DataTable. Mon approche avec knockoutJS était de déplacer mon code de liaison de données dans un modèle de knockout et d'utiliser l'événement afterRender pour appliquer le DataTable à la table. 

Voici un lien vers knockoutJS docs pour l’événement template afterRender. 

Voici à quoi ressemble ma liaison de données:

<div data-bind="template: { name: 'schedule-table', data: $data, afterRender: setupDataTable }"></div>

Il y avait un autre tour. Dans la fonction setupDataTable, la table n'est toujours pas complètement configurée (j'essayais d'obtenir les fixedHeaders et les largeurs n'étaient pas encore configurées). J'ai donc appelé setTimeout avec un délai de 0 milliseconde pour que le code s'exécute au premier cycle d'inactivité. 

Voici mon setupDataTable:

function setupDataTable() {
    setTimeout(function() {
        $("#schedule").DataTable({fixedHeader: true});
    }, 0);
}

J'espère que cela aidera quelqu'un d'autre à la recherche d'une solution knockoutJS et rencontrant le même problème que moi.

2
Greg Veres

Je pense que cette erreur s’est produite parce que mes "mData" et "sTitle" n’étaient pas définis.

1
maia