select data with datatables plugin

select data with datatables plugin

Hello,

I want to show data with the DataTable plugin. I use a mysql database for save the data.
But now I get the error: No data found. But I want select the data from the php file.

My question is: How can I select the data from the mysql with the DataTable plugin?

Can someone help me what is going wrong?

thanks in advance

index.php:
  1. <!DOCTYPE html>
  2. <html>
  3.     <title></title>
  4.     <head>
  5.         <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
  6.         <script  src="js/jquery.js"></script>
  7.         <script  src="js/jquery.dataTables.js"></script>
  8.         <script>
  9.             $(document).ready(function() {
  10.                 var dataTable = $('#bijdrager-grid').DataTable( {
  11.                     "processing": true,
  12.                     "serverSide": true,
  13.                     "ajax":{
  14.                         url :"data.php", // json datasource
  15.                         type: "post",  // method  , by default get
  16.                         error: function(){  // error handling
  17.                             $(".bijdrager-grid-error").html("");
  18.                             $("#bijdrager-grid").append('<tbody class="bijdrager-grid-error"><tr><th colspan="3">No data found</th></tr></tbody>');
  19.                             //$("#bijdrager-grid").html(html).show();
  20.                             $("#bijdrager-grid_processing").css("display","none");
  21.                            
  22.                         }
  23.                     }
  24.                 } );
  25.             } );
  26.         </script>
  27.         <style>
  28.             div.container {
  29.                 margin: 0 auto;
  30.                 max-width:760px;
  31.             }
  32.             div.header {
  33.                 margin: 100px auto;
  34.                 line-height:30px;
  35.                 max-width:760px;
  36.             }
  37.             body {
  38.                 background: #f7f7f7;
  39.                 color: #333;
  40.                 font: 90%/1.45em "Helvetica Neue",HelveticaNeue,Verdana,Arial,Helvetica,sans-serif;
  41.             }
  42.         </style>
  43.     </head>
  44.     <body>
  45.         <div class="header"></div>
  46.         <div class="container">
  47.             <table id="bijdrager-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
  48.                     <thead>
  49.                         <tr>
  50.                             <th>Voornaam</th>
  51.                             <th>Tussenv.</th>
  52.                             <th>Achternaam</th>
  53.                             <th>titel</th>
  54.                             <th>Jaar</th>
  55.                         </tr>
  56.                     </thead>
  57.             </table>
  58.         </div>
  59.     </body>
  60. </html>


data.php:

  1. <?php
  2. include "includes/mysqli_connect.php";
  3. $query = "SELECT v_naam, t_voeg, a_naam, titel, jaar FROM data b, tblfoto_info f WHERE b.bijdr_id = f.bijdr_id";
  4. $result = mysqli_query($dbcon, $query)    or    die(mysqli_error());
  5. echo "<table id="bijdrager-grid">";
  6. echo "<tr>";
  7.       echo "<th>Voornaam</th>";
  8.       echo "<th>Tussenvoegsel</th>";
  9.       echo "<th>achternaam</th>";
  10.       echo "<th>Titel</th>";
  11.       echo "<th>Jaar</th>";
  12.     echo "</tr>";
  13. while ($record = mysqli_fetch_assoc($result)) {
  14.        
  15.     $v_naam = $record['v_naam'];
  16.     $t_naam = $record['t_voeg'];
  17.     $achternaam = $record['a_naam'];
  18.     $titel = $record['titel'];
  19.     $jaar = $record['jaar'];
  20.    
  21.     echo "<tr>";
  22.     echo "<td> $v_naam </td> <td>$t_naam</td> <td>$achternaam</td> <td>$titel</td> <td>$jaar</td> ";
  23.     echo "</tr>";
  24. }
  25. echo "</table>";
  26. ?>