Can I do an immediate reload after a Create?

tangerine · August 2023

Link to test case: See Editor's most basic example#.
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
If I am proposing to add "Gloria Little" to the database, I might first search for that name in case I might be adding a duplicate.
If that name is present, but my new one is a different "Gloria Little", I will go ahead with the Create.
However my table is still showing only the original record, not my new one. (Let's assume I have only created the name, and the table only shows the name after a search.)
It is now very easy to assume that I am looking at my new "Gloria Little" and begin editing it.
How can I get around this? My maintenance section has its tables sorted by auto-increment id, so a reload will always have the newest at the top.

colin · August 2023

Hey, you should just be able to perform a draw() in the postCreate. Did that not work, or something not tried?

Colin

tangerine · August 2023

Hi Colin; thanks for the speedy reply.
I think I may have gone over some of this ground before, but my memory is so bad these days that I'm likely to be missing something.

I found this in an external script which is included in all my major table scripts:

oEditor.on('postCreate', function (e, json, data) {
    oTable
        .column( '1:visible' )
        .order( 'desc' )
        .draw();
});

which doesn't seem to do anything. oEditor and oTable are globals, and other small funcs in the same file are working.
My first thought was to expand my postCreate PHP function, but I don't see how to apply a draw() call in PHP.
I'll keep looking. It's not number one priority right now.

colin · August 2023

Thinking about it more, you shouldn't even the need to draw, since the table is updated automatically. For example, if you search for "Ashton" in one of the Editor examples, and add a new record with the name "Ashton Cox", then you would see that appear in the table in the search results. The new record would also flash so the user would be aware that's the new one.

If I'm missing something, let me know, but I'm not clear what the steps are to get into the situation you're seeing.

Colin

kthorngren · August 2023

Not sure what you are trying to accomplish with the code snippet but you probably want this if you are expecting column 1 to be sorted descending:

    oTable
        .order( [1, 'desc'] )
        .draw();

See the order() docs.

I might not understand the question but if you are creating a new record it should automatically show in the table. Using the Basic example I can insert a new record for Gloria without doing anything special.

The server is expected to respond with the new record as shown in the Client/server data docs. Use the browser's network inspector to see what the response is.

Ignore this if I'm not understanding the question :-)

Kevin

tangerine · August 2023

Hi Kevin, thanks for joining in!
I need to simplify this, as my own code is looking like an old can of worms scenario the further I go into it.

Thinking about it more, you shouldn't even the need to draw, since the table is updated automatically.

Colin, looking at the Editor's basic example, it doesn't do a draw after a create - unless I misunderstand the "draw" function. What I want is for all the data to be re-shown, not just the new record (along with any prior search result). Is that what you mean by "draw"?

Kevin, I think you understand the question ok, but see my answer to Colin.

kthorngren · August 2023

Are you wanting to clear the global search? In your event handler call search() with an empty string, for example:

oTable
    .search( "" )
    .draw();

Kevin

rf1234 · August 2023

Hey tangerine!
I think what Kevin suggests looks ok. I had similar issues a while ago because I had overlooked the consequences of state saving in that context.

I don't know whether you use state saving at all. If you do you will have to deal with state saving also saving stuff like your last search, row selection and even custom ordering. In order to avoid any issues I make sure that these things aren't loaded from the saved state for all of my data tables.

//Data tables default settings
$.extend( true, $.fn.dataTable.defaults, {
    stateLoadParams: function (settings, data) {
        if ( typeof data !== 'undefined' ) {
            if ( typeof data.search !== 'undefined') {
                data.search.search = "";
            }
            if ( typeof data.select !== 'undefined') {
                data.select.rows = [];
            }
            if ( typeof data.order !== 'undefined') {
        //passing an empty array will lead to no ordering at all
        //deleting will allow for the default table ordering
                delete data.order;
            }
        }
    },

tangerine · August 2023

Are you wanting to clear the global search?

No, Kevin, that's not the issue.

Hi Roland. Welcome to the party!
No, statesaving isn't involved.

Right now I just want to establish that my expectations are valid regarding "draw()".
See my last comment to Colin.

rf1234 · August 2023

ok, tangerine, I sometimes need to manually reload parent data tables if I change something in a child data table because that doesn't work automatically. You can use that logic too if you have an ajax sourced data table that doesn't reload newly created or changed records.

table
    .on( 'submitSuccess', function ( e, json, data ) {
        table.ajax.reload(null, false) //stay on the same page!
             .columns.adjust()
             .responsive.recalc();                
    });

rf1234 · August 2023

The event is for "editor" not "table" ... sorry.

kthorngren · August 2023

draw() does not default the search and sorting state of the table. It does jump to the first page unless you pass in false or "page" as the parameter. The code snippet I provided above will clear the default search value then the draw() is used to update the table display with the search term.

Kevin

tangerine · August 2023

I'm trying to simplify this, as we may be getting some crossed wires here.

I need my question to Colin resolved:

Colin, looking at the Editor's basic example, it doesn't do a draw after a create - unless I misunderstand the "draw" function. What I want is for all the data to be re-shown, not just the new record (along with any prior search result). Is that what you mean by "draw"?

Kevin, I take your point about draw(), but I'm still not clear as to the expected result.
Should all the table's data be shown, or only what was displayed when the create was made plus the new record?

kthorngren · August 2023

Datatables doesn't affect the search filters (global or column) when draw() is called. I built an example to demonstrate:
https://live.datatables.net/honibabu/1/edit

Perform a search and click the Call draw() Only button. The table display doesn't change and the search is not reset. Clicking the Show All Data executes table.search('').draw(); which clears the search string and all the data is displayed.

Creating a new row does call draw() automatically. Go to the Basic Example and paste the following code into the console:

$('#example').DataTable().on('draw', function () {console.log('draw');});

Perform a search and create a new record and you will see the draw event is called. It is not expected that Datatables will reset the search and display all the rows in the table contrary to the applied search filters.

Does this help?

Kevin

tangerine · August 2023

Yes, it does help, Kevin - I appreciate you taking the time to set that up.
So my expectations were wrong about create/draw. Only the currently applied search (if any) and the new record will be displayed.

Now I need to get back to my own particular problem. I have this postCreate function

oEditor.on('postCreate', function (e, json, data) {        alert("run postCreate");    
                                                                                       
    var idx = 0;                                                                       
                                                                                       
       // If the table has column (0) using Responsive...                              
       if ($( oTable.column( 0 ).header() ).hasClass( 'dtr-control' )) {               
                                                                                       
           // ... sort  by column(1), which should be Id.                              
           idx = 1;                                                                    
       }                                                                               
                                                                                       
    oTable                                                                             
        .column( idx )                                                                 
        .order( 'desc' )                                                               
        .search( "" )                                                                  
        .draw();                                                                       
});

which is correctly taking care of ordering. However, when I'm displaying a record selected by a search, a "create" does not show the new record and the display continues to show the result of the search, as if "draw" did nothing. (The new record does get created.)

When there is no prior selection, everything is fine. I have numerous "creates" across multiple tables, and everywhere the result is the same. I have made no changes to DT Editor's code.
I can grant you admin access if it would help.
Thanks again.

kthorngren · August 2023

It seems the problem is the way you are trying to use the order API. The docs state that it expects an array with each element being an array containing the column index and sort direction. The docs don't indicate it works the way you have implemented it. I did try it and it does work. Maybe its a legacy form of the API. But it doesn't seem to return a usable API for the chained search().

I created an example using your code (commented out) and the documented way to use the API:
https://live.datatables.net/guwafemu/400/edit

Using this code works and shows the full table:

    table                                                                            
        .order( [[idx, 'desc']] )   
        .search( "" )                                                                 
        .draw();

Comment out the above and uncomment the other code and the search() doesn't work:

     table                                                                            
         .column( idx )                                                                
         .order( 'desc' )                                                              
         .search( "" )                                                                 
         .draw();

Kevin

tangerine · August 2023

Great - I can see that works in your example! BUT it doesn't work on my own site!
In fact, I just discovered that if a search found nothing, then "No data available" still remains displayed on its own after the "Create".
I would start digging deeper, but I don't know where to start. I suppose I'll be back...

kthorngren · August 2023

Are you saying that .search( "" ), with an empty string, results in no records and "No data available" is displayed? Or are you saying that you performed a search which results in no records before creating a new record?

Try sorting anything other than column 0 or 1 to see if the .order( [[idx, 'desc']] ) works. Possibly the postCreate event isn't. firing or there is a Javascript error occuring.

Kevin

Can I do an immediate reload after a Create?

Can I do an immediate reload after a Create?

Answers

Howdy, Stranger!

Categories

DataTables

Can I do an immediate reload after a Create?

Can I do an immediate reload after a Create?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables