无效的 JSON 响应 Jquery 数据表

Question

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

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 对象

任何帮助都会很棒

Answer 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"}
                ]
            } );

        }
    });

Answer 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>