Datatable header click is not sorting the table, instead shows "No data available in the table"

shekhard

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

kthorngren

Since you didn't post information about what you have I'll guess you are using Server Side Processing and that your server script is not returning the proper data when clicking sort.

At a minimum please post to Datatables initialization code you have. Best option is to post a link to your page so we can take a look. Maybe you can use the debugger (debug.datatables.net) to collect information for the developers.

Kevin

shekhard

So I hardcoded the table entries then it is working. But when I am pulling the data from API then the sorting is not working.

kthorngren

Ok. You still have not provided any of the information asked for. If you have Server Side Processing enabled then your server script is required to follow the protocol in the Server Side Processing docs. See this FAQ to determine if you need server side processing enabled.

In order to help we need to understand what you have. Please provide the following:

• Datatables initialization code
• Provide the debugger code from http://debug.datatables.net/
• Provide a link to your page are a test case replicating the issue:
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

shekhard

DataTable initialization:
var oTable = $('#myTable').DataTable({
"oLanguage": {
"sSearch": "Search: "
},
"iDisplayLength": -1,
"sPaginationType": "full_numbers",
});

I cannot provide the test case as the data is coming from the database. When I hard code the table contents then it works fine.

https://jsfiddle.net/shekhard/xy8v1sfr/

shekhard

Debug showing this issue:

Check for common issues
Run automated tests to check for common and previously reported issues.
15 tests complete. 1 problem was found:
Table ID Problem description
- Using FixedHeader without setting a meta tag to "user-scalable=no" will mean that FixedHeader does not work on Android devices as position:fixed is disabled in the browser under those conditions. Either add a suitable meta tag, or be aware that FixedHeader will not operate for Android users.

kthorngren

Looks like you are fetching the data via an xhr request then populating the table. My guess is you are not using Datatables API's to populate the table. If correct then Datatables won't know about the table updates and won't have built its data cache to search and sort the table. Some options:

• Use rows.add() to have Datatables populate the table.
• Use data to initialize the Datatable and add the fetched data.
• Use rows().invalidate() to have Datatables update its data cache after you populate the table.

Kevin

shekhard

How to add rows that I am getting from the post request. Examples shown here are hard coded.

kthorngren

What is the format of the response data?

Is the line $scope.topApps = response.data; adding the data to the table?

If so replace it with $('myTable').DataTable().rows.add( response.data ).draw();. Or place the rows().invalidate() API in the function you are adding the rows after they are added.

If this doesn't help then please post more information about your data structure and the code that is actually adding the rows to the table. Better yet please post a link to your page so we can see exactly what you have. This will hepl us provide a more specific answer.

Kevin

shekhard

Thanks but I did the same thing before I saw your comment.