Using other included properties when using Custom data source property via AJAX

jLinux

I do wish I could just use Editor :( But this is going to be an Open Source project

2 - All of that is in the Editor documentation (link above).

It should work with the Open Source version of DT though right? Those params?..

jLinux

What does the ajax expect in return? (For the Open Source version), you said t requires that either the dtSuccessCallback or dtFailureCallback functions be called, but I mean what format or what objects do I need to return?...

$assets_table.DataTable( {
    ajax: function( method, url, submitData, dtSuccessCallback, dtFailureCallback){
        // .. bla bla bla..
        
        return $what_should_this_be;
    },
    deferRender: true
} );

Also, if I used were to specify the dataSrc, then would the anon function be the URL parameter? Just making sure..

$assets_table.DataTable( {
    ajax: {
        url: function( method, url, submitData, dtSuccessCallback, dtFailureCallback){
            // .. bla bla bla..

            return $what_should_this_be;
        },
        dataSrc: "assets"
    },
    deferRender: true
} );

Thanks for your time, by the way!... Miracle man! haha

ThomD

the idea should work, but that syntax is Editor specific. This gets back to my issue with the use of "ajax" as a config name. It sort of matches with $.ajax in Datatables, but by the time you get to Editor it is very different. Just a little confusing to me.

jLinux

Do you know of a way to query for the JSON thats at the source of the ajax url, without updating the table? That would be awesome.. At the very least, I could see if any updates changes were made to the JSON structure, if so, ajax.reload (Though im going to try to update only the relevant rows)

ajax.reload will reload the table, regardless if any changes were made im assuming. I wish DataTables would use the Last-Modified header, then not update anything if it doesnt need to be

jLinux

On other thing, @ThomD, so I know im using deferRender, but that just means they are rendered when they are pulled from the JSON source to be displayed.

If I find that the JSON source was updated, how do I update the DataTables source? I dont think I can can I? I mean if something was updated that isnt being displayed on the current DT page, then I dont need to insert/update/remove any rows, but if I dont update just that instance somehow, then it will still pull the wrong data when it eventually gets loaded onto the page...

Not sure if I stated that correctly? Lmk if I was clear

Edit: as much as I want to update just the rows that need updating, it might not be possible. it might just make sense to check if one of the rows is being interacted with (meaning check if a jQuery x-editable prompt is open), if it is, then don't reload the table, if it isnt, then do reload the table...

Is it possible to dynamically enable/disable the processing setting? Id like to have that show on the initial load, but when the table is getting reloaded via ajax.reload, id like to hide it

ThomD

For a refresh with out replacing everything, I think you are going to need a custom $.ajax. I don't see anything in the docs here that shows how to make that ajax call and reconcile the returned data with the existing data set. One wrinkle is if you do a refresh and base the query on mod time, how will you know if a record was deleted? You'd almost need to keep a log of delete entries that you could query.

If you can work out the method to get a set of updated records, row().delete() and row().add() would be the likely solution.

jLinux

One wrinkle is if you do a refresh and base the query on mod time, how will you know if a record was deleted?

Well one of two ways...

1) If they have the "Trash Bin" enabled, no database rows are actually "deleted", rather just updates the deleted_on timestamp, so that would be easy to query for.. However, I would kinda need to assume that they don't have the Trash Bin enabled, so ...

2) If I cached the JSON that DataTables sees (as var jsonA), then use $.ajax every N seconds to re-query the same data source (as var jsonB), I would think that I could use _.difference to do something like...

var updated = _.difference(jsonA, jsonB);
var deleted = _.difference(jsonB, jsonA);

Since any rows that are missing will be cached in the DataTables JSON.. Does that sound logical to you?

jLinux

I cant think of a way to update the JSON that datatables has cached, without having to reload the table... do you know if thats even possible? Like I stated above, I cant add/remove/update rows that need to be added/removed/updated, if they arent on the current page, but when the viewer gets to that page, they will be oudated if they weret updated in the JSON

jLinux

@ThomD - Heres my attempt so far: http://code.linuxdigest.org/view/103d0559

So, unfortunately, it does update the whole table, but it only does it if a few requirements are satisfied (nothing is actively being edited (to prevent canceling updates), something was updated since the table was last called, etc), to try and keep it convenient.

jLinux

@thomD - I ended up coming back to this thread when I was trying to decide if i should use the columnDefs to handle how the content would be displayed, or just parse it myself inside of rowCreated.

I ended up doing both :-O

Each "Partition" will come with 5 standard columns, "Created", "Creator', 'Modified', 'Modifier' and 'Status'. Since the data type for those wont ever change, I used columnDefs, then anything other than that, is totally dynamic, so I just handle it manually.

Simple enough :-D

$assets_table.DataTable( {
    columnDefs: [
        // Created & Modified timestamps
        {
            targets: [1,3],
            data: null, // Use the full data source object for the renderer's source
            render: function ( data, type, row, meta ) {
                if( ! data || typeof data === 'undefined' || data === null)
                    return '';

                // If display or filter data is requested, format the date
                if ( type === 'display' || type === 'filter' ) {
                    return tools.date(null, data * 1000);
                }
                else if(type === 'sort'){
                    // If sorting, sort by the actual timestamp
                    return data;
                }

                // All other types
                return data;
            }
        },
        // Creator & Modifier usernames
        {
            targets: [0,2],
            data: null, // Use the full data source object for the renderer's source
            render: function ( data, type, row, meta ) {
                // if the data is empty, then just return nothing (should only
                // happen for empty modified dates)
                if( ! data || typeof data === 'undefined' || data === null)
                    return '';

                // Create a link for the display
                if(type === 'display'){
                    var link = {
                        href: '#',
                        text: '[error]'
                    };

                    // Creator
                    if(meta.col === 0){
                        link.href = '/account/details/'+row.creator_username;
                        link.text = row.creator_username;
                    }
                    // Modifier
                    else if(meta.col === 2){
                        link.href = '/account/details/'+row.modifier_username;
                        link.text = row.modifier_username;
                    }

                    return '<a href="'+link.href+'" target="_blank">'+link.text+'</a>';
                }
                // Filter/sort shouldnt see links
                else if(type === 'filter' || type === 'sort'){
                    return data;
                }

                return data;
            }
        },
        // Asset Status
        {
            targets: 4,
            data: null, // Use the full data source object for the renderer's source
            render: function ( data, type, row, meta ) {
                // Catch anything that would be unset/empty/null/etc
                if( ! data || typeof data === 'undefined' || data === null || data === '')
                    return 'Unlocked';
                else if(data === 'locked')
                    return 'Locked';
                else
                    return 'Secured';
            }
        }
    ],
    createdRow: function( row, data, dataIndex ) {
        // Iterate only through the visible DT columns, rendering the values accordingly
        $.each(visible_columns, function( k, c ){
            // Add the column_name to the data-field attribute
            $cells.eq( k ).attr('data-field', c.name);

            // Set the default HTML to what it currently is (Incase not processed)
            cell_html = $cells.eq( k ).html();

            // Process each column according to if its a partition field or not
            if(typeof fields[ c.name ] !== 'undefined') {
                // Column is a partition field - Process it as x-editable
                draw_editable( $cells.eq( k ), fields[ c.name ] );
            }
            // The ONLY other values should be the created/creator/modified/modifier/status
            // columns, which are managed by the DT columnDefs setting to show the correct
            // data for sort/filter/display/export values
        });

    }
} );