Question

我正在尝试使用来自MySQL的数据填充我的数据表，但无法弄清楚如何执行此操作。我希望能够在指向页面后填充DataTable，然后用户可以单击一行并将该行的数据用于用户将被重定向到的下一页。这就是我到目前为止所做的：

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
    <tr>

        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
    </tr>

</thead>
<tfoot>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
    </tr> 
</tfoot>
<tbody>
    <tr>
        <td> Placeholder1</td>
        <td> Placeholder2</td>
        <td> Placeholder3</td>
    </tr>
    <tr>
        <td> Placeholder1</td>
        <td> Placeholder2</td>
        <td> Placeholder3</td>
    </tr>
    <tr>
        <td> Placeholder1</td>
        <td> Placeholder2</td>
        <td> Placeholder3</td>
    </tr>
</tbody>
</table>

<script>


$(document).ready(function() {
var table = $('#example').DataTable();

$('#example tbody').on('click', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );
</script>

PHP文件：

<?php

include('connection.php');



 $sql = "SELECT ID, Name, Age, Gender FROM DBTABLE";


$response = mysqli_query($db, $sql);


if($response)
{
    echo '<table>';

   while($row = mysqli_fetch_array($response))
    {

       echo '<tr><td align="left">' .
            $row['Name'] . '</td><td align="left">' .
            $row['Age']  '</td><td align="left">' .
            $row['Gender'] . '</td><td align="left">';


       echo '</tr>';
    }

   echo '</table>';

  }
else
{
    echo "Couldn’t issue database query<br />";
    echo mysqli_error($db);
}






// Close connection to the database
mysqli_close($db);
?>

Answer 1

使用dataTables API

var table = $('#example').DataTable({
  ajax: {
    url: 'phpfile.php'
  },
  columns: [
    { data: 'Name' },
    { data: 'Age' },
    { data: 'Gender' }
  ]
});

phpfile.php

...
$data = array();
if ($response) {
  while($row = mysqli_fetch_assoc($response)) {
    $data[] = $row;
  }
}
echo json_encode(array('data' => $data));

使用来自MySQL和PHP的数据填充DataTable

1 个答案: