Question

我使用DataTable这是我的代码：

var table = $('#open').DataTable( { });

这是我的html表格代码：

          <table id="open">
                <thead>
            <tr>
                <th rowspan="2"> S.No </th>
                <th rowspan="2"> Patient Name </th>
                <th colspan="2"> Booking </th>
                <th rowspan="2"> Insurance Company</th>
                <th rowspan="2">Appointment Status</th>
                <th rowspan="2">Edit</th>
            </tr>

            <tr>

            <th> Date </th>
            <th> Time </th>
            </tr>
                </thead>
                <tbody id="booking">
                </tbody>
            </table>

这是我的ajax代码：

var date = $("#date").val();
$.ajax({
            type: 'POST',
            url: 'booked1.php',
            data: {
                date: date
            },
            cache: false,
            dataType: "html",
            success: function (response) {
                alert(response);

                $("#booking").html(response);
                $("#loadarModal").modal('hide');

            }


        });

这是我的reservations1.php代码：

  if (isset($_POST['date'])) {
$date = $_POST['date'];
$query = mysqli_query($conn, "select id as id, concat(fname,' ',lname) as name, date as date, bookingtoken as bookingtoken, inusrance as insurance,
 appointment_status as appointment_status from at_booking where date='$date' 
 ");


    while ($rows = mysqli_fetch_assoc($query)) {
        $name = $rows['name'];
        $id = $rows['id'];
        $date = $rows['date'];
        $bookingtoken = $rows['bookingtoken'];
        $insurance = $rows['insurance'];
        $appointment = $rows['appointment_status'];

        echo '<tr>';
        echo "<td>$id</td>";
        echo "<td>$name</td>";
        echo "<td>$date</td>";
        echo "<td>$bookingtoken</td>";
        echo "<td>$insurance</td>";
        echo "<td>$appointment</td>";
        echo '</tr>';
    }
}

Iam成功通过php获取行并将响应附加到tbody但是数据表工作不正常，因为搜索不起作用且没有工作分区的条目没有显示我不知道怎么解决这个可以任何人帮助我

Answer 1

如果您要参考dataTables doc。然后您会发现来自远程服务器的数据必须是json格式。虽然你没有在json中发送数据。这就是问题所在。您需要更改以下代码

$result = array();
 while ($rows = mysqli_fetch_assoc($query)) {
        $name = $rows['name'];
        $id = $rows['id'];
        $date = $rows['date'];
        $bookingtoken = $rows['bookingtoken'];
        $insurance = $rows['insurance'];
        $appointment = $rows['appointment_status'];

        $result[] = array($name,$id,$date,$bookingtoken,$insurance,appointment);
    }
}
echo json_encode(array("data"=>$result));

修改

Datatable本身为您提供了ajax的便利。无需为其明确添加ajax。删除ajax代码并将数据表初始化更改为

$('#open').DataTable( { "ajax": 'booked1.php' });

此外，您必须拥有相同数量的th和td（列数必须相同）

Answer 2

	$(document).ready(function () {
    	$('#booked').DataTable();
	});

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="booked">
<thead>
  <tr>
    <th>Name</th>
    <th>SurName</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <th>Name</th>
    <th>SurName</th>
  </tr>
</tfoot>
<tbody>

 <!--  Your Foreach loop starts here -->

  <tr>
    <td>Hello</td>
    <td>How</td>
  </tr>
  <tr>
    <td>Abc</td>
    <td>XYZ</td>
  </tr>
 <!--  Your Foreach loop endshere -->
</tbody>
</table>

Answer 3

你可以尝试这个---使用json响应追加表：

<?php
if (isset($_POST['date'])) {
$date = $_POST['date'];
$query = mysqli_query($conn, "select id as id, concat(fname,' ',lname) as name, date as date, bookingtoken as bookingtoken, inusrance as insurance,
appointment_status as appointment_status from at_booking where date='$date' 
");

$data = [];
$i=0;
while ($rows = mysqli_fetch_array($query)) { 
$data[$i]['name'] = $rows['name'];
$data[$i]['id'] = $rows['id'];
$i++;
}
echo json_encode($data);
}
?>

<script>
var date = $("#date").val();
$("#open tbody > tr").remove();
$.ajax({
type: 'POST',
url: 'booked1.php',
dataType : "json",
data: {
date: date
},
cache: false,
dataType: "html",
success: function (response) {
$("#loadarModal").modal('hide');
table = '';
$.each(response,function(indx,obj){
table += '<tr>';
table += '<td>'+ obj.id +'</td>';
table += '<td>'+ obj.name +'</td>';
table += '</tr>';
});
$("tbody#booking").append(table);
}
});
</script>

Answer 4

var table = null;
$(document).ready(function() {
  table = $('#example').DataTable();
  AddRowsAfterFewSeconds();
});

function AddRowsAfterFewSeconds() {
  setTimeout(function() {
    var strTR = '<tr>' +
      '<td>YYYYY Kelly</td>' +
      '<td>Senior Javascript Developer</td>' +
      '<td>TTTTTT</td>' +
      '<td>22</td>' +
      '<td>2012/03/29</td>' +
      '<td>$433,060</td>' +
      '</tr>' +
      '<tr>' +
      '<td>SSSSS Kelly</td>' +
      '<td>Senior Javascript Developer</td>' +
      '<td>BBBBB</td>' +
      '<td>15</td>' +
      '<td>2012/03/29</td>' +
      '<td>$433,060</td>' +
      '</tr>';
    table.rows().remove();
    $(strTR).each(function() {
      table.row.add($(this));
    });
    table.draw();
  }, 3000);
}

<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 href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Roomus</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
  </tbody>
</table>

此方法动态地向DataTable添加行。（这里我只使用了setTimeOut函数而不是AJAX响应）。它会在“ 3秒”

之后动态添加行

$(strTR).each(function() {
    table.row.add($(this)).draw();
});

在将普通html文本转换为'tr'元素后简单地遍历所有行，然后添加到表中，最后在添加所有行后重绘表。

我已经看到了将数组直接添加到DataTable的选项。但它不适用于我的代码。所以我把它们放在一个循环中。

在php中获取一行并应用数据表

4 个答案: