Data only loads when I click on the headers

walter07

I am building a small flask application with an sqlite database. i recieve my data trough a query who i parse to JSON.
The problem is when I load my page only the headers are shown and not the data. It's only until i click on the headers the data is shown. also my add and edit button doesnt work.
Any idea why this happens ?

thx in advance!

Here is my code:

 ``` var readIdeas = {{ dataIdea|tojson }};
    var readHeaders = {{ headerData|tojson }}
    console.log(readIdeas);
    console.log(readHeaders);

    var dataSet = readIdeas;

    var columnDefs =
        [
            {title: "{{ headerData[0][1] }}"},
                {title: "{{ headerData[1][1] }}"},
                {title: "{{ headerData[2][1] }}"},
                {title: "{{ headerData[3][1] }}"},
                {title: "{{ headerData[4][1] }}"},
                {title: "{{ headerData[5][1] }}"},
                {title: "{{ headerData[6][1] }}"},
                {title: "{{ headerData[7][1] }}"},
                {title: "{{ headerData[8][1] }}"},
                {title: "{{ headerData[9][1] }}"},
                {title: "{{ headerData[10][1] }}"},
                {title: "{{ headerData[11][1] }}"},
                {title: "{{ headerData[12][1] }}"},
                {title: "{{ headerData[13][1] }}"},
                {title: "{{ headerData[14][1] }}"},
                {title: "{{ headerData[15][1] }}"},
                {title: "{{ headerData[16][1] }}"},
                {title: "{{ headerData[17][1] }}"},
                {title: "{{ headerData[18][1] }}"},
                {title: "{{ headerData[19][1] }}"}
        ];

    var myTable;
    $(document).ready( function () {

        myTable = $('#example').DataTable({
            "sPaginationType": "full_numbers",
            data: dataSet,        
            columns: columnDefs, 
            dom: 'Bfrtip',        
            select: true ,     
            responsive: true,     
            altEditor: true,      
            scrollX:true,
            scrollY: '50vh',
            scrollCollapse: true,
            paging:false,
            stateSave: true,
            buttons: [{
                text: 'Add',
                name: 'add'       
            },
                {
                    extend: 'selected', 
                    text: 'Edit',
                    name: 'edit'       
                },
                {
                    extend: 'selected', 
                    text: 'Delete',
                    name: 'delete'      
                }]
        });
    }); ```

kthorngren

Assuming you are using ajax to get the data for the table the Datatable might initialize before the ajax response. But without seeing that part of your code its hard to say.

also my add and edit button doesnt work.

Are you using Editor or your own code to add and edit?

Kevin

walter07

I don't use ajax the data comes in with a query in python wich i parse to JSON.

I use the editor code. if i use it with the example data given from the site it works just fine. But when i use my data from sqlite is doesn't.

kthorngren

Can you post a link to your page so we can take a look?

Unfortunately without seeing the problem its hard to diagnose.

The place I would start is to validate the data being returned from the query. Look for error messages in the browser's console. Do you get an alert messages?

In Python are you returning an array of arrays or dictionaries?

You could try posting the results form running the debugger on initial data load:
https://datatables.net/manual/tech-notes/10#DataTables-debugger

Kevin