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

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

andras2andras2 Posts: 31Questions: 12Answers: 0

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.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    Answer ✓

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

    Kevin

  • andras2andras2 Posts: 31Questions: 12Answers: 0

    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>
    
  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    Answer ✓

    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

  • andras2andras2 Posts: 31Questions: 12Answers: 0

    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

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    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

Sign In or Register to comment.