将数据表内容作为参数发送到php

Question

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();
?>

Answer 1

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>