how to reload page or reload row after update page using ajax.

[clavearnel]

how to reload page or reload row after update or delete action.

     reloadPage: function(page){
        if(page == 1){
            this.$broadcast('vuetable:reload')
            console.log('vuetable:reload',page)
        }else{
            this.$broadcast('vuetable-pagination:change-page', page)
            console.log('vuetable-pagination:change-page',page)
        }
    },
    updateItem: function(id){
        //this.fillItem.push({"_token" : $('#token').val()});
        var input = this.fillItem;
        this.$http.put('/categories/'+id,input).then((response) => {
                var page  = this.$children[0].currentPage
                this.reloadPage(page)
                this.fillItem = {'name':'','id':''}; //data fields
                $("#EditModal").modal('hide');
                toastr.success('Category updated successfully.', 'Success Alert', {timeOut: 5000});
            }, (response) => {
                this.formErrorsUpdate = response.data;
            }
        );
    },

[ratiw]

@clavearnel You cannot reload a row. You can either use vuetable:reload or vuetable:refresh to force reloading the data from the server.

The difference is that vuetable:reload will use the currently available parameters (including page number) to request the data from the server, while vuetable:refresh will set the page number to 1 before requesting the data.

Basically, you should not need to check the page number. After sending updating or deleting to your API endpoint, you just broadcast vuetable:reload event to get the updated data from the server.

In case of updating, once the data was successfully sent to the API endpoint and you broadcast vuetable:reload event, you should get the data of the current page with the updated data from the server.

In case of deleting, once the data was successfully sent to the API endpoint and you broadcast vuetable:reload event, you should get the data of the current page without the deleted record (because it was deleted).

[clavearnel]

thank you for reply

[guntisluta]

But what to do if I have paggination for 25 items per page, and first page have 25 records and second page have 1 record. When I delete record in second page I have issue after vuetable reload 0 of 25 records, vuetable didn't switch to first page. What to do ? I'm use vuetable-2

[ratiw]

@guntisluta Please re-post in the correct repo with an example in jsfiddle, codepen, or codesandbox to demonstrate your problem.

[crtjr64]

This is unfortunate because I have 1 field to update after which I need to update another cell in same row and I have 500 rows of data so for those two fields in 1 row I need to reload the whole page? This is not the simple programming VueJs promised