I have a datatable with two column, "Name" and "Age" and after I fill the datatable with Ajax I create a button (one per row). This works fine. But after the user click on a button the two field (name and age) of that row should be sent to a php and then make an alert like this "Hello, my name is [name] and i'm [age] years old". (i need the php here). I wrote a code that can call the php but i don't know how to send the parameters of each row to the php. How can i do this?
My js:
<script type="text/javascript">
$(document).ready(function() {
var oTable = $('#jsontable').dataTable(
$('td:eq(2)', nRow).html("<input type='button' id='button' onclick='test();' value='Click to Release'></input>");
); ///This is created after ajax
$('#load').on('click',function(){
var user = $(this).attr('id');
if(user != '')
{
$.ajax({
url: 'response.php?method=fetchdata',
type: 'POST',
data: {id1: $('#id1').val()},
dataType: 'json',
success: function(s){
console.log(s);
oTable.fnClearTable();
for(var i = 0; i < s.length; i++) {
oTable.fnAddData([
s[i][0],
s[i][1]
]);
} // End For
},
error: function(e){
console.log(e.responseText);
}
});
}
});
});
function test() {
$.ajax( { type : 'POST',
data : { },
url : 'process_form.php', // <=== CALL THE PHP FUNCTION HERE.
success: function ( data ) {
alert( data ); // <=== VALUE RETURNED FROM FUNCTION.
},
error: function ( xhr ) {
alert( "error" );
}
});
}
</script>
process_form.php
<?php
function bb()
{
echo "hellooooo"; //How to pass the name and the age field to php here from each row of the datatable?
}
bb();
?>
The code to do what you want. I use table.row and not table.cell, it's easier this way.
$(document).ready(function() {
var table = $('#table_id').DataTable();
$('#table_id').on( 'click', 'button', function () {
var index = table.row( this ).index();
var data_row = table.row( $(this).parents('tr') ).data();
alert('Name: ' + data_row[0] + "
" + 'Age: ' + data_row[1]);
} );
});/*
* Table
*/
table.dataTable {
margin: 0 auto;
clear: both;
width: 100%;
}
table.dataTable thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
*cursor: hand;
}
table.dataTable tfoot th {
padding: 3px 18px 3px 10px;
border-top: 1px solid black;
font-weight: bold;
}
table.dataTable td {
padding: 3px 10px;
}
table.dataTable td.center,
table.dataTable td.dataTables_empty {
text-align: center;
}
table.dataTable tr.odd { background-color: #E2E4FF; }
table.dataTable tr.even { background-color: white; }
table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<div>
<table id="table_id">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Bot</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td><button type="button" id="myBtn_1">Select</button></td>
</tr>
<tr>
<td>Ana</td>
<td>22</td>
<td><button type="button" id="myBtn_2">Select</button></td>
</tr>
<tr>
<td>Diana</td>
<td>23</td>
<td><button type="button" id="myBtn_3">Select</button></td>
</tr>
<tr>
<td>Lino</td>
<td>32</td>
<td><button type="button" id="myBtn_4">Select</button></td>
</tr>
</tbody>
</table>
</div>To send the data through ajax, replace the alert with your ajax code.
JS:
$(document).ready(function() {
//your code for construct the table
var table = $('#table_id').DataTable();//change this to be equal to the id of your table
$('#table_id').on( 'click', 'button', function () { //change this to be equal to the id of your table
var index = table.row( this ).index();
var data_row = table.row( $(this).parents('tr') ).data();
//alert('Name: ' + data_row[0] + "
" + 'Age: ' + data_row[1]);
$.ajax( {
type : 'POST',
data : {'data0': data_row[0], 'data1': data_row[1] },
url : 'process_form.php',
success: function ( data ) {
alert( data );
},
error: function ( xhr ) {
alert( "error" );
}
});
} );
});
PHP:
$name = $_POST['data0'];//to get the name value
$age = $_POST['data1'];//to get the age value
//your code
Any doubt, just ask for my help.
</div>
$(document).ready(function(){
fill_data();
$(document).on('click','button', function(){
alert("Hello, my name is "+$(this).closest("tr").find(".name").text()+" and i'm "+$(this).closest("tr").find(".age").text()+" years old.");
});
});
function fill_data(){
var content = "";
for(var i = 0; i < 10; i++){
content = content+"<tr><td class='name'>"+"Name_"+i+"</td><td class='age'>"+i+"</td><td><button>Call</button></td></tr>";
}
$('#data_table_body').html(content);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody id="data_table_body">
</tbody>
</table>This Code Snippet will surely help you.
</div>