Return Row ID and Data- in a hidden column with Ajax

andras2

Hi there,

I would like to ask how it is possible to to retrive the (AJAX) data of a selected row? Eg. I click on a row and retrive the full data into input fields including hidden columns such as row ID.

kthorngren

Start with this example to get the data. You can then populate your form with the data.

Kevin

andras2

Thank you. It seems fine without checkbox. Can you help me if I use checkbox?

<script>    
$(document).ready(function() {  
    var table = $('#example').DataTable( {
        select: true,
        stateSave: true,
        //ajax: '/api/staff',
        rowId: 'id',
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]],
        "ajax": "data.txt",
        "columns": [
            { "data": "select" },    
            { "data": "id" },
            { "data": "title" },
            { "data": "description" },
            { "data": "cost" },
            { "data": "start_date" },
            { "data": "end_date" },
            { "data": "image_url" }
        ]
    } ); 
    ////
    $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[1]+'\'s row' );
        $("#issue_title").text(data[1]);
        $("#issue_description").text(data[2]);
        $("#Date-start").text(data[4]);
        $("#Date-end").text(data[5]);

    } );
    ///
    setInterval( function () {
        var rows = table.rows({selected: true});
        table.ajax.reload( 
            function () {rows.select()}, false );}, 
            1000 );
});
</script>

kthorngren

What seems to be the problem when using the checkbox? Please provide atest case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

One problem might be this:

alert( 'You clicked on '+data[1]+'\'s row' );

Your data structure is objects, ie, using columns.data, but you are trying to access the data using array notation data[1]. You should use data.id.

Kevin

andras2

Could you help me please, how to change cursor type to _.pointer {cursor: pointer;} _for the get data script?

https://datatables.net/examples/advanced_init/events_live.html

kthorngren

It just takes standard CSS settings to apply the cursor type to the elements you want. This should apply to all td elements:

td {
  cursor: pointer;
}

Kevin