Invalid JSON response Jquery Datatables

Question

im trying to to make use of the datatables but when is supossed to draw the table the response is:

DataTables warning: table id=tablaSucursales - Requested unknown parameter '0' for row 0, column 0

And it appears two times

My object response is like this

{
    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
        },
    ]
}

My ajax request and datatables initialization is like this

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

        }
    });

I already validate the Data object with https://jsonlint.com/

Any help would be awesome

Answer 1

I did this example as a fiddle for you: 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>

Answer 2

From the data format you have provided, please see the changes I have made to your column definitions/initializations. It should be as follows:

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

        }
    });