web-dev-qa-db-fra.com

tables de données jquery: ajout d'une colonne supplémentaire

Scénario

J'utilise datatables (@version 1.9.4) pour la première fois pour afficher des données à l'utilisateur. Je réussis à récupérer les données via ajax et à les lier au datatable.

Maintenant, je veux ajouter des colonnes supplémentaires pour permettre à l'utilisateur de traiter les enregistrements. Par souci de simplicité, l'objectif est d'ajouter un bouton avec un gestionnaire onclick qui récupère les données de l'enregistrement "cliqué".

Dans mon plan, je lierais l'élément json correspondant à l'enregistrement "cliqué" au gestionnaire onclick.

Jusqu'à présent, si j'ajoute un TH supplémentaire pour la colonne d'action au DOM, une erreur se produit à partir du code des tables de données:

Requested unknown parameter '5' from data source for row 0

Question

Comment définir des colonnes personnalisées? Comment remplir leur contenu en HTML?

Voici ma configuration actuelle.

[~ # ~] html [~ # ~] 

<table id="tableCities">
    <thead>
        <tr>
            <th>country</th>
            <th>Zip</th>
            <th>city</th>
            <th>district code</th>
            <th>district description</th>
            <th>actions</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Javascript 

$('#tableCities').dataTable({
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": false,
    "bAutoWidth": true
    , "bJQueryUI": true
    , "bProcessing": true
    , "bServerSide": true
    , "sAjaxSource": "../biz/GetCitiesByZip.asp?t=" + t
});

Exemple de résultat Json 

{
    "aaData":
    [
        [
            "IT",
            "10030",
            "VILLAREGGIA",
            "TO",
            "Torino"
        ],
        [
            "IT",
            "10030",
            "VISCHE",
            "TO",
            "Torino"
        ]
    ],
    "iTotalRecords": 2,
    "iTotalDisplayRecords": 2,
    "iDisplayStart": 0,
    "iDisplayLength": 2
}

Modifier

Daniel a raison. La solution consiste à configurer la colonne personnalisée dans aoColumnDefs, en spécifiant les propriétés mData et mRender. En particulier mRender permet de définir des html et javascript personnalisés.

/* inside datatable initialization */
, "aoColumnDefs": [
   {
        "aTargets": [5],
        "mData": null,
        "mRender": function (data, type, full) {
            return '<a href="#" onclick="alert(\''+ full[0] +'\');">Process</a>';
        }
    }
 ]
javascriptjquery-uidatatablescustomization
28
Alberto De Caro

Vous pouvez définir vos colonnes d'une manière différente comme ceci

"aoColumns": [
        null,
        null,
        null,
        null,
        null,
        { "mData": null }
    ]

ou ca

"aoColumnDefs":[
    {
        "aTargets":[5],
        "mData": null
    }
]

Voici quelques documents Columns

Jetez un œil à ceci DataTables AJAX exemple de source - source de données nulle pour une colonne

Notez qu'avant DataTables 1.9.2, mData s'appelait mDataProp. Le changement de nom reflète la flexibilité de cette propriété et est cohérent avec la dénomination de mRender. Si 'mDataProp' est donné, alors il sera toujours utilisé par DataTables, car il mappe automatiquement l'ancien nom au nouveau si nécessaire.

Une autre solution/solution de contournement pourrait être d'ajouter ce paramètre "5" ...

Par exemple, en ajoutant "" à chaque ligne

comme ça:

    [
        "IT",
        "10030",
        "VILLAREGGIA",
        "TO",
        "Torino",
        ""
    ],
    [
        "IT",
        "10030",
        "VISCHE",
        "TO",
        "Torino",
        ""
    ]
30
Daniel

Juste au cas où quelqu'un utilisant une version plus récente de DataTables (1.10+) cherche une réponse à cette question, j'ai suivi les instructions sur cette page:

https://datatables.net/examples/ajax/null_data_source.html

7
Antonio Vinicius Menezes Medei

Publier cette réponse ici, juste pour montrer que où le aoColumnDefs doit être défini. J'ai moi-même obtenu de l'aide pour cette question, mais j'ai eu du mal pendant un certain temps à savoir où mettre le aoColumnDefs. De plus, la fonctionnalité de l'événement onclick a également été ajoutée.

$(document).ready(function() {
  var table = $('#userTable').DataTable( {
        "sAjaxSource": "/MyApp/proctoring/user/getAll",
        "sAjaxDataProp": "users",
        "columns": [
                    { "data": "username" },
                    { "data": "name" },
                    { "data": "surname" },
                    { "data": "status" },
                    { "data": "emailAddress" },
                    { "data" : "userId" }
                  ],
        "aoColumnDefs": [
           {
                "aTargets": [5],
                "mData": "userId",
                "mRender": function (data, type, full) {
                    return '<button href="#"' + 'id="'+ data + '">Edit</button>';
                }
            }
         ]
    } );

    $('#userTable tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        console.log(data);
        $('#userEditModal').modal('show');
    });

} );
3
Bilbo Baggins