aaSorting error when referencing JSON object property
aaSorting error when referencing JSON object property
stuartsjb-icr
Posts: 59Questions: 12Answers: 0
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?
This question has an accepted answers - jump to answer
Answers
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 includeIDin a hidden column to be able to sort by it.Allan
Thanks Allan,
When I've included a hidden column using...
.. 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?
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!
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
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!
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.
Add
style="width:100%"orwidth="100%"to the HTML table elements: http://live.datatables.net/japotipu/2/editAllan
Thanks Allan. Can't believe I missed out something as simple as that...
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