Datatable colonne onClick

Je suis le renvoi de la suite de Datatable exemple -

https://datatables.net/examples/api/select_single_row.html

L'exemple de capture de l'événement onclick sur l'ensemble de la ligne 

$('#example tbody').on( 'click', 'tr', function (){}

Je souhaite capturer un événement sur clic d'un particulier colonnes,
dire le Nom de colonne, de la Position et de Bureau.
Comment dois-je faire?

InformationsquelleAutor Aniruddha Raje | 2016-03-21
  1. 3

    Si vous connaissez le tableau en colonnes de l'index, alors vous pourriez vous utilisez ce.

    $('#example tbody').on( 'click', 'tr td:eq(0)', function (){
   alert("col1");
});
$('#example tbody').on( 'click', 'tr td:eq(1)', function (){
   alert("col2");
});
$('#example tbody').on( 'click', 'tr td:eq(4)', function (){
   alert("col5");
});
    • "eq" ne fonctionne que pour la première ligne, l'utilisation nth-of-type. par exemple, on('click', 'tr td:nth-of-type(5)',...
    InformationsquelleAutor WhoAmI
  2. 0

    Vous pouvez accéder à de clics dans les colonnes de l'accrochage et de gestionnaire d'événement dans les éléments que vous voulez dans la fnRowCallback.
    Voici un exemple complet avec un tableau avec 2 colonnes supplémentaires montrant une icône qui reçoit le cliquez:

    $('#example').DataTable({
        dom: 'lfrt',
        paging: false,
        rowBorder: true,
        hover: true,
        serverSide: false,
        rowHeight: 30,
        order: [[ 1, 'asc' ]],
        columns: [
            {
                title: 'Id',
                visible: false,
                searchable: false
            },
            {
                title: 'version',
                visible: false,
                searchable: false
            }                {
                title: Name'
            },
            {
                data: null,
                title: 'Diagram',
                searchable: false,
                sortable: false,
                defaultContent: '<i class="fa fa fa-sitemap icon-btn" data-btnaction="grafo"></i>',
                className: 'text-center'
            },
            {
                data: null,
                title: 'History',
                searchable: false,
                sortable: false,
                defaultContent: '<i class="fa fa-history icon-btn" data-btnaction="appdetail"></i>',
                className: 'text-center'
            }

        ],
        select: false,
        fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            $('td > i', nRow).on('click', function() {
                //if you have the property "data" in your columns, access via aData.property_name
                //if not, access data array from parameter aData, aData[0] = data for field 0, and so on...
                var btnAction = $(this).data('btnaction');
                if (btnAction === 'grafo'){
                } else if (btnAction === 'appdetail'){
                    //do something......
                }
            });
        }
    });
    InformationsquelleAutor Carlos Cuesta