Populating Datatables with php sending json

Question

I'm having troubles identify the problem in my code.

I'm doing a searching script, and I'd like to show the results in Datatable. I have a searching form that sends data to my php file and returns a json_encode of my query results, then on ajax success, I build my table passing the results in "data": response.

The query worked just fine when I was doing it without Datatables, but since I need pagination and stuff, I need it to work on Datatables.

HTML for Table:

<div id="results">

        <table id="example" class="display compact hover stripe" cellspacing="0" width="100%">
            <thead>

                <th>Cognome</th>
                <th>Nome</th>
                <th>Telefono</th>
                <th>Provincia</th>
                <th>Tipo Cliente</th>
                <th>Amministrazione</th>
                <th>Stato</th>
                <th>Fonte</th>
                <th>Data Ricezione</th>
                <th></th>

            </thead>          
        </table>

    </div>

Javascript for Datatable:

$('#submit_src').on("click", function() { 

    $.ajax({
        data: $("#ricerca").serialize(), 
        type: $("#ricerca").attr('method'), 
        url: $("#ricerca").attr('action'),
        success: function(response) {

            $('#example').dataTable( {
                "data": response,
                "sPaginationType": "listbox",
                "bFilter": false,
                "jQueryUI": true,
                "processing": true,
                'iDisplayLength': 25,
            } );
        }

    });
    return false;
});

"submit_src" is my button for submit ofcourse, and "ricerca" is the name of my form.

The json code I get is:

{"sEcho":0,"iTotalRecords":"35036","iTotalDisplayRecords":"1","aaData":[["stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff"]]}

Error:

DataTables warning: table id=example - Requested unknown parameter '1' for row 0.

B Kirby · Accepted Answer · 2014-12-23 15:33:57Z

1

This link may help with what you are trying to accomplish: http://datatables.net/release-datatables/examples/ajax/objects.html. It explains that DataTables expects arrays for the data; however, in order to use the objects it can be done by using the columns.data option.

I have also used DataTables without <tbody> so that should not be an issue.

Edit: Try the following, I was able to get the 'stuff' to show in the table:

$('#example').dataTable( {
    "data": response.aaData
} );

Edit 2:

jQuery(document).ready(function() {

    var response = {
       "sEcho":0,"iTotalRecords":"35036","iTotalDisplayRecords":"1",
       "aaData": [
       ["stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff"]]
    };

    $('#example').dataTable( {
        "data": response.aaData,
        //"sPaginationType": "listbox",
        "bFilter": false,
        "jQueryUI": true,
        "processing": true,
        'iDisplayLength': 25
    } );

});

edited Dec 23, 2014 at 15:33

answered Dec 23, 2014 at 13:38

B Kirby

2932 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dankorw Over a year ago

I've tried to use 'response.aaData', but I still don't get any errors and the table is not populated. Since the query works, and the json is correctly sent to my script, I guess it is either a format of my json wich it's not correct, or maybe I'm handling it the wrong way.

B Kirby Over a year ago

@Dankorw try out my second edit. Your json should be okay, I made the response match yours exactly. I'm wondering if the problem is with that sPaginationType because I could not get it to work until I commented that out.

B Kirby Over a year ago

It looks like sPaginationType takes two options, 'two_button' and 'full_numbers.' When I put: 'sPaginationType': 'full_numbers' it worked.

Dankorw Over a year ago

Removing 'sPaginationType' and useing your script gives me a void table. I'm getting the same json {"sEcho":0,"iTotalRecords":"35036","iTotalDisplayRecords":"1","aaData":[["stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff","stuff"]]}

B Kirby Over a year ago

When you say used the script, you didn't use the entire thing right? I put that much to show I was matching your environment as much as I could. Since the json coming back is okay, you should just need the snippet where it's assigning the 'example' table to dataTable. Is it possible to post your updated jQuery code that you are trying?

|

Dankorw · Accepted Answer · 2014-12-29 10:14:59Z

1

You are probably missing the option

        dataType : "json",

on you code. That might confuse the type of data recieved from the ajax script if not specified.

answered Dec 29, 2014 at 10:14

Dankorw

4710 bronze badges

Comments

Tomanow · Accepted Answer · 2014-12-23 13:06:31Z

0

I believe <tbody></tbody> is required with DataTables so it knows where to put the data returned. Try adding that to your table#example.

    <table id="example" class="display compact hover stripe" cellspacing="0" width="100%">
        <thead>

            <th>Cognome</th>
            <th>Nome</th>
            <th>Telefono</th>
            <th>Provincia</th>
            <th>Tipo Cliente</th>
            <th>Amministrazione</th>
            <th>Stato</th>
            <th>Fonte</th>
            <th>Data Ricezione</th>
            <th></th>

        </thead> 
        <tbody></tbody>         
    </table>

answered Dec 23, 2014 at 13:06

Tomanow

7,3953 gold badges30 silver badges52 bronze badges

3 Comments

Dankorw Over a year ago

Sorry, it didn't work. I've added the error I get from the alert once I submit my form so it's easier to debug it.

Tomanow Over a year ago

What happens when you make response into response['aaData'] ?

Dankorw Over a year ago

The error doesn't show up, but the table is not populated. Alerting response['aaData'] is showing 'undefined'.

Collectives™ on Stack Overflow

Populating Datatables with php sending json

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related