Passing table data to a button's href when clicked

jacquesfrancis · April 5

I'm converting an existing php page to use DataTables because if its funky, groovy features. The DataTable contains multiple rows as the result of a database select. The user can click to select one DataTable row at a time. The first field in the row is 'id', the unique identifier for each table's row. With a row selected in the DataTable, one of several buttons is then pressed, for example Delete

The Delete button's existing code is:

<?php echo '<a href="delete.php?id='. $row['id'] . '" class="btn btn-danger pull-right"> Delete';?>;

Its purpose is to load and display the full data for the selected row id in another page which asks the user to confirm or cancel the deletion.

In the page's previous life, $row['id'] contained the row id, but it's not obvious to me how I capture this from the selected row in DataTables. How can I pass the selected row's 'id' to the button?

kthorngren · April 5

The user can click to select one DataTable row at a time.

There are numerous ways row selection can be done. Are you using the Select extension for this? If yes see this example. If no see this example for getting the row data of a clicked row.

I'm guessing there is a delete button in each row. This example shows how to get the row data from a clicked button:
https://live.datatables.net/xijecupo/1233/edit

Use row().data() in whatever event handler you are using. Possibly you can use /row().id() to get the specific ID if you are also using rowId to define the ID.

To help further please build a simple test case replicating what you have so we can offer more specific suggestions based on your solution.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jacquesfrancis · April 6

Thanks kthorngren, that was very useful and I can now get a message containing the clicked row's id.

The button code, as you can see from my original post, is html constructed in php. My next problem is how I pass the id from DataTables to php. This code pops up the message containing the id twice ie "You clicked on 41's row (41)";

    table.on('click', 'tbody tr', function () 
        {
        let data = table.row(this).data();
        let $id_selected = data[0];
        alert('You clicked on ' + data[0] + "'s row (" + $id_selected + ")");
        });

My problem is that $id_selected is empty by the time the button's pressed in here:

<body style='background-color: #afd5d3'>
<h2 style="color:red" class="pull-left"><?php echo $title_line_1; ?><?php if ($title_line_2 !== "") echo $title_line_2; ?><br /> Pupils</center></h2>
<div class="mt-5 mb-3 clearfix">
<?php echo '<a href="delete_bbs.php?id='. $id_selected . '" class="btn btn-danger pull-right"><i class="fa fa-minus"></i> Delete Pupil';?>;
</div>
</body>

Can you suggest how to go about passing the id variable to php?

kthorngren · April 6

One option is to update the generated HTML link with the ID inside the click event handler.

Another option, if you are selecting rows, is to create a button and a click handler for the button. In the event handler get the ID of the selected row and send it via jQuery ajax() to the server for deletion. Use the success and error functions to appropriately handle the response from the server. For example in success use row().remove() to remove the row from the client Datatable.

Kevin

Passing table data to a button's href when clicked

Passing table data to a button's href when clicked

Answers

Howdy, Stranger!

Categories

DataTables

Passing table data to a button's href when clicked

Passing table data to a button's href when clicked

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables