automatically create default row only if table is empty

ChrisKolli

Hey, I need some help.. I have a table that only gets one row as it is daily data. now I want this row to be automatically initialized if there is no data for the given day.
I got this part to work which creates a default row on button click with default values and the date given by a datepicker:

buttons: [
                {
                    extend: "create", 
                    text: "New date",
                    action: function ( e, dt, node, config ) {
                      editor.create().set('date', $('#displayDate').val()).submit();
                    }
                  }
            ],

Now i need to fire the create event automatically if the table is empty. I tried using drawCallback which works in part because the problem is that drawCallback is fired twice.
Once when the page is loaded and the table displays "loading...." and once after the data is drawn.

I tried it like this: (alerts because i dont want my database to be flooded, the create function works.)

 "drawCallback": function( settings ) {
                var api = this.api();
                if(api.rows().count()==0){
                    alert( 'DataTable is empty' );
                }else {
                    alert( 'DataTable has data' );
                }
            },

now everytime i reload the page always shows the first alert followed by either the first or second one depending on the condition, how do I change it so the function is only called on the "real" draw and not the "loading...." draw?

kthorngren

You can use the initComplete callback which runs once after Datatable initialization and after the data has been loaded.

Kevin

ChrisKolli

Yes tried that, doesn't work because that only works after reload but not after a new ajax call.

I use a datepicker to submit a date to my php 'where' condition so i only get the row for the day from my database.
And initComplete unfortunately only triggers if I do ye' olde F5 but not if I select another date (Ajax call).

Unless i made a mistake somewhere

kthorngren

Sorry, missed that. Maybe the xhr event will work better. You can look at the returned JSON to see if there is data.

Kevin

ChrisKolli

sounds great but how and where would i implement that?

Like this placed below or above the .dataTable part?

$('#calendar').on('xhr.dt', function ( e, settings, json, xhr ) {
      var api = this.api();
                if(api.rows().count()==0){
                    alert( 'DataTable is empty' );
                }else {
                    alert( 'DataTables has data' );
                }
    } )

Or can i just go about it like the drawCallback somehwo and just put it in the same place?

kthorngren

Use the json parameter to see the JSON response. You can use console.log(json) within the event to see the structure of your data.

Kevin

kthorngren

One thing to watch out for is if the response is continually empty you could end up in an infinite loop. My suggestion is to use a global variable flag that you set true in the datepicker event and set to false at the end of the xhr event. In the xhr event check if its true and if it is the event was caused by the datepicker. If false something else caused the event and you should skip the code the creates a new record. Hope this makes sense.

Kevin

ChrisKolli

yeah it makes sense.
two questions arise:
First: Why would the response be contiunally empty if you create data for it if it is?
Second: I get "this.api is not a function" if i try it like the example above. what do i need to put instead of "this"

kthorngren

Why would the response be contiunally empty if you create data for it if it is?

In case an issue arises. But, thinking about it, that might not be an issue because the Editor create is using the Editors ajax not Datatables.

I get "this.api is not a function" if i try it like the example above. what do i need to put instead of "this"

Don't use that code. The rows won't be added when the xhr fires. Just look at the json parameter for the JSON response.

Kevin

ChrisKolli

Oh my god, to think of the time I wasted on this...

It was so easy???

 $('#calendar').on('xhr.dt', function ( e, settings, json, xhr ) {
            console.log(json);
            if(json.data.length == 0){
                editor.create().set('date', $('#displayDate').val()).submit();
            }
        });