无效的 JSON 响应 Jquery 数据表

Posted 2023-05-08

【中文标题】无效的 JSON 响应 Jquery 数据表

【英文标题】：Invalid JSON response Jquery Datatables

【发布时间】：2021-11-09 21:08:18

【问题描述】：

我正在尝试使用数据表，但是当应该绘制表格时，响应是：

DataTables 警告：表 id=tablaSucursales - 请求第 0 行第 0 列的未知参数“0”

它出现了两次

我的对象响应是这样的

    Mensaje: "OK"
    "Data": [
        
            "Id_Sucursal": 510001,
            "Nombre_Sucursal": "Pedestal Prueba",
            "Estado": "CDMX",
            "Activa": 0
        ,
        
            "Id_Sucursal": 510010,
            "Nombre_Sucursal": "Tableta de Pruebas",
            "Estado": "CDMX",
            "Activa": 0
        ,
    ]

我的ajax请求和datatables初始化是这样的

$.ajax(
        url: './Archivos_Ajax.asp',
        method: "POST",
        dataType: 'json',
        data:  accion: "ObtenerSucursales",
                PageNumber: 1,
                RowsOfPage: 20 ,
        success: function (response) 
      
            $('#tablaSucursales').DataTable( 
                // "processing": true,
                // "serverSide": true,
                data: response.Data,
                // search: 
                //  return: true
                // ,
                columns: [
                    title: "Id_Sucursal" ,
                    title: "Nombre_Sucursal",
                    title: "Estado",
                    title: "Activa"
                ]
             );

        
    );

我已经使用 https://jsonlint.com/ 验证了 Data 对象

任何帮助都会很棒

【问题讨论】：

检查文档：您使用的是columns.title。您需要使用columns.data。如果您自己找不到这些引用，那么首先查看examples - 特别是Ajax examples - 以及使用JSON 数据对象的那个，与您的数据源相同。

还可以在数组中使用 data 和小写“d”而不是大写。

【参考方案1】：

根据您提供的数据格式，请查看我对您的列定义/初始化所做的更改。应该是这样的：

$.ajax(
        url: './Archivos_Ajax.asp',
        method: "POST",
        dataType: 'json',
        data:  accion: "ObtenerSucursales",
                PageNumber: 1,
                RowsOfPage: 20 ,
        success: function (response) 
      
            $('#tablaSucursales').DataTable( 
                // "processing": true,
                // "serverSide": true,
                data: response.Data,
                // search: 
                //  return: true
                // ,
                columns: [
                    "data" : "Data.Id_Sucursal" ,
                    "data" : "Data.Nombre_Sucursal",
                    "data" : "Data.Estado",
                    "data" : "Data.Activa"
                ]
             );

        
    );

【参考方案2】：

我为你做了这个例子： https://jsfiddle.net/bogatyr77/g7ntd8rk/12/ jQuery：

$(document).ready(function() 
  var data = [
      "Id_Sucursal": 510001,
      "Nombre_Sucursal": "Pedestal Prueba",
      "Estado": "CDMX",
      "Activa": 0
    ,
    
      "Id_Sucursal": 510010,
      "Nombre_Sucursal": "Tableta de Pruebas",
      "Estado": "CDMX",
      "Activa": 0
    ,
  ];

  var json = data;
  $.ajax(
    url: '/echo/json/',
    dataType: 'json',
    type: 'POST',
    data: 
      data: json
    ,
    success: function(data) 
      $('#lista_proiecte').DataTable(
        "data": json,
        "columns": [
            "data": "Id_Sucursal"
          ,
          
            "data": "Nombre_Sucursal"
          ,
          
            "data": "Estado"
          ,
          
            "data": "Activa"
          
        ]
      );
    
  );
)

html：

<!--css plugins for table-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">


<!--js plugins for table-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<section class="container shadow">
  <div class="table-responsive">
    <table id="lista_proiecte" class="table table-striped table-hover">
      <thead>
        <tr>
          <th>Id_Sucursal</th>
          <th>Nombre_Sucursal</th>
          <th>Estado</th>
          <th>Activa</th>
        </tr>
      </thead>
    </table>
  </div>
</section>

【讨论】：

虽然这在您的示例中有效，但您创建的数据变量并未模仿 OP 从 AJAX 请求接收的一个，因此在 OP 情况下，它将不起作用。有响应，然后是“Data”中的嵌套对象数组，因此需要调用 Data.objKey 来实际初始化列数据；）