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

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

shekhardshekhard Posts: 19Questions: 5Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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

  • shekhardshekhard Posts: 19Questions: 5Answers: 0
    edited May 2020

    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.

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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:

    Kevin

  • shekhardshekhard Posts: 19Questions: 5Answers: 0
    edited May 2020

    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/

  • shekhardshekhard Posts: 19Questions: 5Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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

  • shekhardshekhard Posts: 19Questions: 5Answers: 0

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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    Answer ✓

    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

  • shekhardshekhard Posts: 19Questions: 5Answers: 0

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

This discussion has been closed.