如何使用DataTables在Ajax中解析嵌套的JSON对象

问题描述：

我正在尝试迁移到jQuery的DataTables Table插件

I'm trying to migrate to DataTables Table plug-in for jQuery

使下面的json结果与datatables的Object数据源一起使用的正确方法是什么?我尝试了嵌套的Object数据源示例和其他示例，但仍无法正常工作:

What is the right way to make below json Results to work with datatables's Object data source? I tried the nested Object data source example and others, but still not working:

{
 "query": {
 ...
  "diagnostics": {
   "publiclyCallable": "true",
   "url": {
    "execution-start-time": "1",
...
   },
   "user-time": "68",
  },
  "results": {
   "item": [
    {
     "title": "",
     "description": 
......

我尝试过:

$('#example').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "scripts/objects.php",
    "columns": [
        { "query.results.item": "title" },
        { "query.results.item": "description" },
        { "query.results.item": "position" },
        { "query.results.item": "office" },
        { "query.results.item": "start_date" },
        { "query.results.item": "salary" }
    ]

错误是:

SyntaxError: missing ; before statement

{"query":{"count":16,"created":"2016-03-30T02:41:49Z","lang":"en-US"

非常感谢！

答

使用数据表的一种简单方法就是通过这种方式-

A simple way of using Data-tables is by this way-

服务器端代码(在PHP中)-

Server side code (in PHP)-

$data = array();
while( $row=mysqli_fetch_array($query) )
{  // Preparing an array For Returning Reponce
    $nestedData=array(); 
    $nestedData = array (
                            "employee_name"         =>  $nestedData[] = $row["employee_name"],
                            "employee_salary"       =>  $nestedData[] = $row["employee_salary"],
                            "employee_age"          =>  $nestedData[] = $row["employee_age"]
                        );
    $data[] = $nestedData;
}
$json_data  =   array(
                        "draw"            => intval( $draw_request_code ),   // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw. 
                        "recordsTotal"    => intval( $totalData ),  // total number of records
                        "recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
                        "data"            => $data   // total data array
                    );
echo json_encode($json_data);  // send data as json format

该服务器端的JS就像这样-

And JS for that server side will be like this-

var dataTable = $('#employee-grid').DataTable(
{
    "processing": true,
    "serverSide": true,
    "ajax":
    {
        url :"employee-grid-data.php", // json datasource
        type: "post",  // method  , by default get
        error: function()
        {  // error handling
            $(".employee-grid-error").html("");
            $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
            $("#employee-grid_processing").css("display","none");
        }
    },
    "columns":  [               //Name should be same as PHP file JSON NAmes and ordering should be as in the HTML file
                    {   "data": "employee_name"         },
                    {   "data": "employee_salary"       },
                    {   "data": "employee_age"          }
                ]
});

此 GitHub代码 中给出了一个简单的示例.

A simple example for your purpose is given in this GitHub code.

在此处 .

More simple examples are given here.

该插件的高级用法在 GitHub存储库 .

And a advanced use of that plugin is given in this GitHub repo.

甚至可以在 本文档 中找到.

Even more can be found in this documentations.

如何使用DataTables在Ajax中解析嵌套的JSON对象

相关推荐