Ajax Reload for just one row? Alternatively speed up reload

Ajax Reload for just one row? Alternatively speed up reload

TronikTronik Posts: 120Questions: 27Answers: 1

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

Replies

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I would suggest following Kevin's suggestion :).

    Allan

  • TronikTronik Posts: 120Questions: 27Answers: 1

    Yes, works perfect, thanks for the input.

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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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();
        }
    });                 
    
  • TronikTronik Posts: 120Questions: 27Answers: 1

    What error does console output?

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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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" }
            ],
    
  • TronikTronik Posts: 120Questions: 27Answers: 1

    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.

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    That's great! Many thanks, Kevin!!

This discussion has been closed.