Question

在我的页面初始化数据表之后它工作正常，但我需要在数据表中动态显示服务器响应数据。我可以在console.log（数据）中接收数据

$(document).ready(function () {
        $.ajax({
            url: 'xxxxxx/xxxxxxx',
            method: 'POST',
            success: function (data) {
                $('#datatable').dataTable({
                    data: data,
                    serverside:true,
                    columns: [
                        { 'data': 'UserId' },
                        { 'data': 'UserDepartment' },
                        { 'data': 'UserCourse' },
                        { 'data': 'UserName' },
                        { 'data': 'UserBirthDate' },
                        { 'data': 'UserEmail' },
                        { 'data': 'UserContact' }
                    ]
                });
            }
        });
    });

Answer 1

试试这个：

Found id:102, name=fourToSix
Dumping parent info => 
[
  {"catId":"2","catName":"clothing"},
  {"catId":"15","catName":"kids"},
  {"catId":"78","catName":"fourToTen"},
  {"catId":"102","catName":"fourToSix"}]
]

Answer 2

我认为你有事情可以尝试这个：

$(document).ready(function ()
{
    // Setup - add a text input to each footer cell
    $('#DataTable tfoot th').each(function ()
    {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    var table = $('#DataTable').DataTable({
        "select": true,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "./ServerSide.php",
            "type": "POST"
        }
    });
});

我很确定您甚至不必列出列名称，它们会在您传递给url的文件中被选中。

Answer 3

HTML CODE
====
 <table class="table table-bordered" id="datatables">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Mobile</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

    <script>
    jQuery(document).ready(function(){
            $('#datatables').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax":{
                    "url": "fetch.php",
                    "dataType": "json",
                    "type": "POST"
                    },
                "columns": [
                    { "data": "id"},
                    { "data": "name"},
                    { "data": "email"},
                    { "data": "mobile"},
                    { "data": "manage"}
                ],
                "columnDefs": [ {
                    "targets": [0,4],
                    "orderable": false
                } ],
                "order": [[ 1, "ASC"]],
            });
        $(document).ready(function() {
            $('#dataTables').DataTable();
        } );
    });
    </script>

 <b>PHP CODE</b>

    $link = mysqli_connect("localhost","root","","dbName")

        $req = mysqli_query($link,"SELECT * FROM register where delete_status = 0");

        $s = (isset($_POST['search']['value'])) ? $_POST['search']['value'] : '';

        if(!empty($s))
        {
            $req = mysqli_query($link,"SELECT * FROM register WHERE name LIKE '%$s%' ");
        }

        $totalData = mysqli_num_rows($req);
        $totalFiltered = mysqli_num_fields($req);

        $data = array();
        if(!empty($req))
        {
            foreach ($req as $key=>$value)
            {
                $edit = "";
                $delete = "";

                $nestedData['id'] = $key+1;
                $nestedData['name'] = $value['name'];
                $nestedData['email'] = $value['email'];
                $nestedData['mobile'] = $value['mobile'];

                $nestedData['manage'] = "<a href='$edit' class='btn  btn-warning  btn-xs'><i class='fa fa-pencil'></i> Edit</a> &nbsp;&nbsp; <a onclick='return delet()' href='$delete' class='btn btn-danger btn-xs confirm-delete' ><i class='fa fa-trash'></i> Delete</a>";

                $data[] = $nestedData;

            }
        }

        $json_data = array(
            "recordsTotal"    => intval($totalData),
            "recordsFiltered" => intval($totalFiltered),
            "data"            => $data
        );
        echo json_encode($json_data);

<b>Jquery File</b>
<pre>
   jquery.min.js
   bootstrap.min.js
   jquery.dataTables.min.js
   dataTables.buttons.min.js
   dataTables.bootstrap.min.js
</pre>

如何使用php将ajax服务器响应数据显示到datatable中

3 个答案: