Ajax Reload for just one row? Alternatively speed up reload

Tronik

Hi,

I have a table where a user from an input field can increase current stock qty.
When a user adds that number I would like to refresh the row instantly so the column for current stock updates.

Using table.ajax.reload(null, false) certainly works but the whole table is refreshed which leads to some delay and not optimal user experience.

Also using some css element manipulation wont work, because there maybe multiple users inputting at the same time so I really need the Database value fetched

kthorngren

My suggestion would be to use a jQuery Ajax call and use the data parameter to fetch the desired data. Then in the success function update that one row with the response data.

If this doesn't help then please provide more specifics of how you are inputting the data, like are you using Editor and how you are saving the data.

Kevin

allan

I would suggest following Kevin's suggestion .

Allan

Tronik

Yes, works perfect, thanks for the input.

I messed around with trying to update the row/cell with API...

rf1234

Don't know how you got it done. I did the Ajax call as recommended by Kevin but I did "mess around with trying to update the row/cell with API...". I guess I got it done. This is my code.
@Tronik: Did you find a better solution for this? Can you share?

var selected = contractTable.row({selected: true});
//avoid ajax reload of contract table for performance reasons
//maxExpDate may have been affected by the latest element update
$.ajax({
    type: "POST",
    url: 'actions.php?action=getFormatterMaxExpDate',
    data: {
        contractId:    selected.data().contract.id 
    },
    dataType: "json",
    success: function (d) {
        contractTable.cell(selected, ".mED").data(d.maxExpDate).draw();
    }
});                 

Tronik

What error does console output?

Do you receive JSON on success? If that's the case you need to JSON.parse(d) first

rf1234

Yes, everything works fine. The code does the job: It receives the data for just one single cell in one single row and overwrites the existing cell value in the cell of the row "selected" having class "mED". That's all fine. My question was:
Is there an easier way to do this? I find it cumbersome to be honest: If you want to dynamically get the right column you need to assign a class to the column in your HTML first and then assign this class to each and every cell in the table column using columnDefs. That is not really easy and requires code changes in multiple locations which I would like to avoid. Yes you can use the column index instead but then you have a problem adding columns to your data table later on. Bugs are almost inevitable.

This is the HTML change for this:

<thead>
    <tr>
        <th class="maxExpDate"><?php echo $en?('Expires on'):('Ablaufdatum');?></th>
        .... more columns ...
    </tr>
</thead>

and this is the extra colunm def required:

columnDefs: [
    // targets may be classes    
    {   targets: "maxExpDate", className: "mED" }
        ],

Tronik

You don't need to set the class in the HTML, just use columns or columnDefs
https://datatables.net/reference/option/columns.className

You can also use column names for the same purpose
https://datatables.net/reference/option/columns.name

I can't see how else you would target a cell.

rf1234

right, but if you don't use them in the HTML you must make sure that the column sequence remains unchanged otherwise the hard coded numbering will break.

But thanks for your effort, @Tronik.

kthorngren

Looks like you are using objects. One suggestion would be to use row().data() to update the data. It looks like you are using objects (columns.data) so you can easily refer to the maxExpDate column using Javascript object notation instead of using classes with cell(). Here is an example:
http://live.datatables.net/lamezura/1/edit

Select the row then click the button to update the Position column.

Kevin

rf1234

That's great! Many thanks, Kevin!!