Datatables columns and JSON Format

Question

I have setup a datatables based on the following html

  <script>
       $('#tableListing').dataTable({
        "bAutoWidth" : true,
        "bProcessing" : true,
        "bServerSide" : true,
        "sAjaxSource" : '${actionUrl}',
        "aoColumns":[ 
                       { "sTitle": "ID", "mData": "id" },
                       { "sTitle": "Username", "mData": "userName" },
                       { "sTitle": "Password", "mData": "password" }
                     ]

            }
    });
    </script>

<table id="tableListing" class="display datatable">
            <thead>
                <tr>
                    <th><spring:message code="columnLabel.id" /></th>
                    <th><spring:message code="columnLabel.username" /></th>
                    <th><spring:message code="columnLabel.enabled" /></th>
                </tr>
            </thead>
</table>

And the JSON response from server is [1,"abiieez",true] and it works nicely. However I have changed the response from server into something like:

*Edit (updated JSON response) *

{
    "iTotalDisplayRecords": 11,
    "iTotalRecords": 11,
    "aaData": "[{\"creationTime\":0,\"enabled\":true,\"id\":1,\"loginDuration\":0,\"online\":false,\"password\":\"asdasd\",\"userName\":\"abiieez\"},{\"creationTime\":0,\"enabled\":false,\"id\":105,\"loginDuration\":0,\"online\":false,\"password\":\"asdasd\",\"userName\":\"asd1212123\"},{\"creationTime\":0,\"enabled\":false,\"id\":106,\"loginDuration\":0,\"online\":false,\"password\":\"asdsdasd\",\"userName\":\"asdasd23123\"},{\"creationTime\":0,\"enabled\":false,\"id\":107,\"loginDuration\":0,\"online\":false,\"password\":\"asdsdasd\",\"userName\":\"asdasd23123\"},{\"creationTime\":0,\"enabled\":false,\"id\":108,\"loginDuration\":0,\"online\":false,\"password\":\"anak jalanan\",\"userName\":\"alibaba90\"},{\"creationTime\":1351338218227,\"enabled\":false,\"id\":109,\"loginDuration\":0,\"online\":false,\"password\":\"asdasdasda\",\"userName\":\"asdasdasda\"},{\"creationTime\":1351338263527,\"enabled\":false,\"id\":110,\"loginDuration\":0,\"online\":false,\"password\":\"asdasdasda\",\"userName\":\"asdasdasda\"},{\"creationTime\":1351338265078,\"enabled\":false,\"id\":111,\"loginDuration\":0,\"online\":false,\"password\":\"asdasdasda\",\"userName\":\"asdasdasda\"},{\"creationTime\":1351338266329,\"enabled\":false,\"id\":112,\"loginDuration\":0,\"online\":false,\"password\":\"asdasdasda\",\"userName\":\"asdasdasda\"},{\"creationTime\":1351338267247,\"enabled\":false,\"id\":113,\"loginDuration\":0,\"online\":false,\"password\":\"asdasdasda\",\"userName\":\"asdasdasda\"}]",
    "sEcho": "1"
}

The above json is not accepted by the datatables, I believe because the number of columns do not match.

Is there a way for me to retrieve this json object and pick which columns I would like to show on the tables on the client side ?

Smiter · Accepted Answer · 2012-10-29 13:58:19Z

3

You can use mData property in aoColumns like this:

 $(document).ready(function() {
            $('#tableListing').dataTable({
               "aoColumns":[ 
                             { "sTitle": "user", "mData": "userName" },
                             { "sTitle": "pass", "mData": "password" },
                             ...
                           ]
                "bAutoWidth" : true,
                "bProcessing" : true,
                "bServerSide" : true,
                "sAjaxSource" : '${actionUrl}'
            });
    });

answered Oct 29, 2012 at 13:58

Smiter

1,39110 silver badges11 bronze badges

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

7 Comments

abiieez Over a year ago

Do I have put sColumns on the JSON response from server ? Do i still need to specify the 3 column in html as well ? I still have the error "Requested uknown parameter 'id' from the data source for row 0".

Smiter Over a year ago

You should specify "aoColumns" in html during initialization of table.

abiieez Over a year ago

I still facing the same error. I have updated my datatable initialization.

Smiter Over a year ago

if you use server side, your return should be like this: { "aaData": [{'id': value, 'userName': value, 'password': value}] }

abiieez Over a year ago

Added my JSON response from server. I used JSONLint to validate my JSON response.

|

Collectives™ on Stack Overflow

Datatables columns and JSON Format

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related