Datatable-Spalte onClick

Ich beziehe mich in den folgenden Datatable Beispiel -

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

Beispiel erfasst onclick-Ereignis auf die gesamte Zeile 

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

Ich festhalten möchte eine Veranstaltung an der Klick auf eine bestimmte Spalten,
sagen wir Spalte Name, Position und Office.
Wie mache ich das?

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

    Wenn Sie wissen, die Tabelle Spalten-index dann könnten Sie Sie verwenden Sie diese.

    $('#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" funktioniert nur für die erste Zeile verwenden nth-of-type. z.B. auf('click', 'tr td:nth-of-type(5)',...
    InformationsquelleAutor WhoAmI
  2. 0

    Können Sie zugreifen, Klicks in Spalten Einhaken und event-handler in die Elemente, die Sie wollen in der fnRowCallback.
    Hier ist ein vollständiges Beispiel mit einer Tabelle mit 2 extra Spalten ein Symbol erhält, dass die auf:

    $('#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
Schreibe einen Kommentar