Populate table body with ajax

Wilmer30

Hi,
This is my html:

                      <table id="datatable" class="table table-striped table-bordered display">
                        <thead>
                          <tr>
                            <th>Nro</th>
                            <th>Identificador</th>
                            <th>Documento</th>
                            <th>Promotor</th>
                            <th>Estado</th>
                            <th></th>
                          </tr>
                        </thead>

                        <tbody id="wbodychange">
                        </tbody>
                      </table>

This is my Javascript:

        var table = $('#datatable').DataTable({
          "autoWidth": false,
          "order": [[ 0, "desc" ]],
          "processing": true,
          "serverSide": true,
          "ajax": {
            "url":"<?php echo base_url() ?>documentos/getDocExpAjax",
            "type": "POST",
            "data": {
              id_expediente: $("#expedientes").val()
            },
            "success": function(d){
              console.log(d);
            },
          },
          "columns": [
            { "data": "id_documento"},
            { "data": "documento_id"},
            { "data": "nombre_documento"},
            { "data": "id_promotor"},
            { "data": "estado"}
          ],
          "language":
            {
              "url": "<?php echo base_url('vendors/datatables.net/i18n/Spanish.json') ?>"
            },
        });

This is my response json:

{"data":{"0":{"id_documento":"3","id_expediente":"11","numero":"12","fecharegistro":null,"id_antiguedad":"1","documento_id":"1","nombre_documento":"asdfasdf","id_promotor":"3","tipo_fecha":"V","estado":"1","doc_activo":null,"orden":"1"},"1":{"id_documento":"4","id_expediente":"11","numero":"13","fecharegistro":null,"id_antiguedad":"1","documento_id":"2","nombre_documento":"aaaa","id_promotor":"4","tipo_fecha":"V","estado":"1","doc_activo":null,"orden":"2"}}}

is not populating the table.

kthorngren

The problem is the structure of your JSON response. Although its a valid JSON structure its not one that Datatables supports. Your JSON:

{
    "data": {
        "0": {
            "id_documento": "3",
            "id_expediente": "11",
            "numero": "12",
            "fecharegistro": null,
            "id_antiguedad": "1",
            "documento_id": "1",
            "nombre_documento": "asdfasdf",
            "id_promotor": "3",
            "tipo_fecha": "V",
            "estado": "1",
            "doc_activo": null,
            "orden": "1"
        },
        "1": {
            "id_documento": "4",
            "id_expediente": "11",
            "numero": "13",
            "fecharegistro": null,
            "id_antiguedad": "1",
            "documento_id": "2",
            "nombre_documento": "aaaa",
            "id_promotor": "4",
            "tipo_fecha": "V",
            "estado": "1",
            "doc_activo": null,
            "orden": "2"
        }
    }
}

You will want your row data in an array as described here:
https://datatables.net/manual/data/#Objects

Also you don't want the "0": and "1":. Your response should look like this:

{
    "data": [
         {
            "id_documento": "3",
            "id_expediente": "11",
            "numero": "12",
            "fecharegistro": null,
            "id_antiguedad": "1",
            "documento_id": "1",
            "nombre_documento": "asdfasdf",
            "id_promotor": "3",
            "tipo_fecha": "V",
            "estado": "1",
            "doc_activo": null,
            "orden": "1"
        },
            {
            "id_documento": "4",
            "id_expediente": "11",
            "numero": "13",
            "fecharegistro": null,
            "id_antiguedad": "1",
            "documento_id": "2",
            "nombre_documento": "aaaa",
            "id_promotor": "4",
            "tipo_fecha": "V",
            "estado": "1",
            "doc_activo": null,
            "orden": "2"
        }
    ]
}

You have server side processing enabled so you will need more information in the JSON response. This doc describes the client server interaction with server side processing and what is required to be returned.
https://datatables.net/manual/server-side

Do you need server side processing enabled? How many records do you have?

Kevin

Wilmer30

Thanks for replying, the response data is not great, I will disable that option.
In my php print json:

$array = $this->documentos_model->getDocumentos()->result_array();
echo '{"data":'.json_encode($array).'}';

the json is:

{
  "data": [
    {
      "id_documento": "3",
      "id_expediente": "11",
      "numero": "12",
      "fecharegistro": null,
      "id_antiguedad": "1",
      "documento_id": "1",
      "nombre_documento": "asdfasdf",
      "id_promotor": "3",
      "tipo_fecha": "V",
      "estado": "1",
      "doc_activo": null,
      "orden": "1"
    },
    {
      "id_documento": "4",
      "id_expediente": "11",
      "numero": "13",
      "fecharegistro": null,
      "id_antiguedad": "1",
      "documento_id": "2",
      "nombre_documento": "aaaa",
      "id_promotor": "4",
      "tipo_fecha": "V",
      "estado": "1",
      "doc_activo": null,
      "orden": "2"
    }
  ]
}

I still can not get the data

Wilmer30

In console print:

..
          "ajax": {
            "url":"<?php echo base_url() ?>documentos/getDocExpAjax",
            dataSrc : '',
            "type": "POST",
            "data": {
              id_expediente: $("#expedientes").val()
            },
            "success": function(d){
              console.log(d.data[0].id_documento);
            },
          },
          "columns": [
            { "data": "id_documento" },
            { "data": "documento_id" },
            { "data": "nombre_documento" },
            { "data": "id_promotor" },
            { "data": "estado"}
          ],

works correctly in console.log(d.data[0].id_documento);
but do not populate the table.

kthorngren

Since you are returning the rows in a 'data' object then you will want to remove dataSrc : '',. The data object is the default that Datatables will use with AJAX. The dataSrc : '', option is telling DT to not use the data object.

Kevin

Wilmer30

I removed the dataSrc: '', but I still can not populate the table.

kthorngren

Do you get an error?

Can you post a link to your page?

If not then please post a link to the debugger output:
https://datatables.net/manual/tech-notes/10

Kevin

kthorngren

Also it looks like you defined 6 columns in your table but in Datatables only defined 5 columns. This should generate an error in your browsers console. You will either need to remove the last (blank) column or add another in DT.

Kevin

Wilmer30

Ok, I think I added the problem I have in:
http://live.datatables.net/tuwehuso/1/

kthorngren

Thanks for the test case. If I remove the success function it works. In the ajax docs it states this:

success - Must not be overridden as it is used internally in DataTables.

There are options if you want to do something with success. Please review the docs for more info.

Kevin

Wilmer30

Thank you very much for your help.