aaSorting error when referencing JSON object property

stuartsjb-icr

In the past I've used PHP to return basic indexed arrays to the JavaScript to populate my datatables, and this has worked well when using aaSorting to sort on a particular piece of data (regardless of whether or not it ends up shown in the table), e.g:

[[20,"DES","123","2015-04-01","2015-04-30"], [21,"Indefinite Leave","56984","2015-04-04","2015-04-30"]]

would work nicely with...

var VisaTable = $('#dataTables-Visa').dataTable({
                    "pagingType": "simple",
                    "bFilter": false,
                    "bLengthChange": false,
                    "iDisplayLength": 5,
                    "aaSorting": [[3, 'desc']],
                    "aaData": visaTableData,
                    "aoColumns": [
                        {"mData": [1]},
                        {"mData": [2]},
                        {"mData": [3]},
                        {"mData": [4]}
                    ]
                });

However I'm now returning associative JSON arrays from the PHP and finding that either aaSorting doesn't support associative arrays or I haven't got the syntax correct (despite much fiddling!)

[{"ID":21,"StatusName":"ACTIVE","StatusStartDate":"2015-06-13","ExpectedReturnDate":"-","StatusEndDate":"-","ApplicationReference":"8765432"},{"ID":20,"StatusName":"DEFERRED\/INTERRUPTED","StatusStartDate":"2015-06-15","ExpectedReturnDate":"2015-07-01","StatusEndDate":"2015-07-08","ApplicationReference":"DEF548923"}]

with...

var historyTable = $('#dataTables-History').dataTable({
                    "pagingType": "simple",
                    "bFilter": false,
                    "bLengthChange": false,
                    "iDisplayLength": 5,
                    "aaData": historytabledata,
                    "aaSorting": ['ID', 'desc'],
                    "aoColumns": [
                        {"mData": ['StatusName']},
                        {"mData": ['StatusStartDate']},
                        {"mData": ['ExpectedReturnDate']},
                        {"mData": ['StatusEndDate']},
                        {"mData": ['ApplicationReference']}
                    ]
                });

..results in :

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

Have I got the syntax wrong on aaSorting now or is something else wrong here?

allan

The order (the new name for aaSorting ) must always use an index for the column to sort on, per the documentation. Currently DataTables does not support sorting on none column data, so you would need to include ID in a hidden column to be able to sort by it.

Allan

stuartsjb-icr

Thanks Allan,

When I've included a hidden column using...

                    "columnDefs": [
                        {
                            "targets": [0],
                            "visible": false
                        }
                    ],

.. it seems to prevent the tables from resizing when adjusting the horizontal width of the browser window (I'm using the tables within Bootstrap panels, if that makes any difference). Is there another way of hiding a column that doesn't prevent the tables resizing?

stuartsjb-icr

Thanks for posting the link to the conversion guide by the way, I will work my way through that on all my tables when I get the chance!

allan

As far as I am aware, a hidden column should make no different to column resizing. Can you link to the page so I can debug it please.

Allan

stuartsjb-icr

Unfortunately all my work is hosted on an internal intranet site, but I managed to replicate the issue on live.datatables.net :

http://live.datatables.net/diditela/1/edit?output

If you load up that link and then resize the browser window you'll see the contents of the panel on the left do not resize. If you remove the columnDefs from the JavaScript for the table though though, it does.

Hopefully I've not missed anything too obvious!

stuartsjb-icr

I noticed I had left out dataTables.bootstrap.js and dataTables.bootstrap.css on that example, I have added them here ( http://live.datatables.net/japotipu/1/edit?output ) but it does not seem to have rectified the issue.

allan

Add style="width:100%" or width="100%" to the HTML table elements: http://live.datatables.net/japotipu/2/edit

Allan

stuartsjb-icr

Thanks Allan. Can't believe I missed out something as simple as that...

allan

Ideally we'd be able to get that information from CSS, but reading a percentage value rather than a pixel value is exceptionally difficult. Hence the need for it to be directly in the attributes for DataTables to do its magic :-)

Allan