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

【问题标题】：Send datatable content as parameters to php将数据表内容作为参数发送到 php
【发布时间】：2017-06-18 09:06:21
【问题描述】：

我有一个包含两列“姓名”和“年龄”的数据表，在用 Ajax 填充数据表后，我创建了一个按钮（每行一个）。这工作正常。但是在用户点击一个按钮后，该行的两个字段（姓名和年龄）应该被发送到一个 php，然后发出这样的警报“你好，我的名字是 [name]，我是 [age] 岁”。（我需要这里的 php）。我写了一个可以调用php的代码，但我不知道如何将每一行的参数发送到php。我该怎么做？

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

【问题讨论】：

您需要使用链接datatables.net/reference/api/cell().data()中的api数据表示例中的函数cell().data()
我如何将参数发送到 php？
通过 ajax！首先，您需要创建一个触发器以从表中获取值。然后使用 Json 通过 ajax 发送值。如果您对这是如何完成的有任何疑问，请给我一些时间，我将尝试创建一个示例来说明它是如何完成的。
我对此非常陌生（这是我的第一个 ajax 函数），所以我只需要更新函数 test() 对吗？
我怎么知道行是什么？

标签： javascript php ajax datatable

【解决方案1】：

做你想做的事的代码。我使用 table.row 而不是 table.cell，这样更容易。

$(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] + "\n" + '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>

要通过 ajax 发送数据，请将警报替换为您的 ajax 代码。

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] + "\n" + '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

如有疑问，请寻求我的帮助。

【讨论】：

有效！谢谢！

【解决方案2】：

$(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>

此代码片段一定会对您有所帮助。

【讨论】：