Refreshing AngularJS: How to reload Ngtable with previous data

Currently, I am utilizing NGTable to exhibit data on my webpage. The data is stored in an array and passed through the dataset parameter. However, when I dynamically modify a value in the array, the changes are accurately reflected in the table BUT if I navigate to the second page and return to the first page, the table displays the old data.

For further clarification, here is a JSFiddle demonstrating this issue: http://jsfiddle.net/vqxscmsu/

    angular.module("uCloud", ["ngTable"])
  .controller("myController", myController);

myController.$inject = ["NgTableParams", "$scope"];

function myController(NgTableParams, $scope) {

        $scope.fsck = [{
      name: "teste1",
      description: "testando1"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }]


        this.tableParams = {
    TodoGeneral: null
  };
  this.tableParams['TodoGeneral'] = new NgTableParams({}, {
    dataset: $scope.fsck,
  });

 $scope.test = function() {
    $scope.fsck[0].name = "mais non";
 }
}

Answer №1

Replace the use of dataset with getData when instantiating your NgTableParams. This way, you can update your table using tableName.reload(), which will call the getData method.

The only difference lies in the pagination behavior, which you may want to review in the documentation.

Check out the functional demo here: http://jsfiddle.net/vqxscmsu/17/

var demo = this;
// ...
demo.tableParams['TodoGeneral'] = new NgTableParams({}, {
    getData: function(){
       return $scope.fsck;
     }
});

$scope.test = function() {
    $scope.fsck[0].name = "mais non";
    demo.tableParams.TodoGeneral.reload();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving Dropdown Value in Bootstrap 5: How to Obtain the Selected Item's Value from the Dropdown Button

I am having a slight issue with my dropdown button where I am trying to display the selected item as the value of the dropdown button. The Flag Icon and Text should be changing dynamically. I have tried some examples but it seems that it is not working as ...

Preventing Users from Uploading Anything Other than PDFs with Vue

I am currently working with Bootstrap-Vue and Vue2. Utilizing the Form File Input, I want to enable users to upload files, but specifically in PDF format. To achieve this, I have included accept="application/pdf": <b-form-file v-model=&quo ...

How to resolve preventDefault issue on else condition during form submission in CoffeeScript on Rails 4

After submitting a form, I have implemented a code to prevent the page from refreshing and perform different actions based on certain conditions. Everything works as expected except for one scenario where the page still refreshes after executing the ELSE c ...

Tips for fetching form data transmitted via HTTPS in Node.js?

As someone new to back-end security, I'm hoping for some guidance without judgement: When receiving values over HTTP in my node application, the form data is easily accessible in the request object using req.body.{name of input element} However, whe ...

Steps for installing an npm package from a downloaded folder

In the past, I had a method of installing an npm project from Github that involved using git clone followed by npm install. git clone http...my_project npm install my_project Instead of manually copying the contents of my_project to my local node_modules ...

Ways to manage a post request in Next.js

Attempting to establish a POST route within my api directory with next.js. After sending the data to the route, I am having difficulty parsing the data in order to properly store it in the database. What would be the most effective approach for managing ...

Encountering an issue with DateTimeField being undefined in a React.js application

I encountered an issue stating that DateTimeField is not defined while attempting to create a date picker in react + bootstrap. I referred to the following URLs for assistance: https://github.com/Eonasdan/bootstrap-datetimepicker Link to my code s ...

Is there a way to retrieve the value of an element by clicking on its corresponding button using MUI framework?

I am working on a dashboard feature where I need to update the status by clicking on it. However, I am facing an issue with changing the state value upon clicking. Here is my component: <MenuItem> <Button fullWidt ...

Strategies for integrating a username-only login using Firebase without requiring a password or email address

For my class assignment, I'm developing a webapp and want to implement a login system with only a username. However, when I try sending just the username to the database, it gets stored as a child under the connection ID in Firebase. Below is the Java ...

Implement a Loop that Generates Buttons with Popups Using jQuery Mobile

Within the context of XML parsing, I have utilized this code to generate buttons dynamically using a loop: $('#button' + counter + paramcounter).click(function(){ sendData(escape(parameterarray[cnt2] + $('#textinput' + cnt + cnt2).v ...

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

Currently, I am working on a web application. One of the screens, screen-1, consists of a series of buttons labeled 'Code'. When a user clicks on any of these buttons, it loads a different HTML page, screen-2, in the ng-view using $location.path( ...

Developing a bespoke React component library - encountering an issue with 'react module not found' during Jest testing, as well as using testing-library

I am in the process of creating a bespoke react component library to be shared across various applications. To build this library, I am utilizing rollup and referencing resources such as this blog post along with others: https://dev.to/alexeagleson/how-to- ...

All You Need to Know About Jquery's Selector for Nested Elements

Could someone clarify if the Jquery Statement $(selecterA:not(selectorB), elementA) means "return those elements that match selectorA but not selectorB within elementA"? I am confused by a simple case in Fiddle#1, where both output statements using .length ...

Ajax ensures that the site stays active and responsive

Struggling to understand how to make this code work. var request; if(window.XMLHttpRequest){ request= new XMLHttpRequest(); }else{ request = new ActiveXObject("Microsoft.XMLHTTP"); } var handleStateChange = function () { switch (request.re ...

What is the best way to combine two sections in html/css/bootstrap?

I've been trying to create a simple webpage with a navigation bar and a section below it, but I keep running into an issue where there's unwanted white space between the nav bar and the next section in blue. Is there a way to eliminate this gap a ...

Why does the getter consistently generate the previous value?

Check out this code snippet: function User(fullName) { this.fullName = fullName; Object.defineProperties(this, { firstName: { get: function () { return fullName.split(" ")[0]; ...

Mocha retries causing logging malfunction: a problem to address

My current situation involves testing something on our network, and occasionally the network experiences delays causing the test to end prematurely. To address this issue, I attempted to set the test to retry with the command this.retries(1). While this ...

The concept of functions in JavaScript: fact or fiction?

Is there a way to show the message "Yes" or "No" based on the return value of a function without directly using the words true and false, and without utilizing alert? Any suggestions would be greatly appreciated. Thank you. function myFunction { if (Ma ...

The updates made to a form selection using Ajax do not reflect in jQuery's .serialize or .val functions

When using the .load jQuery function to retrieve a form and place it in the document body, I encounter an issue. After loading the form, I manually change the select value and attempt to save the form using an ajax .post request. However, when trying to ...

Learn the process of retrieving JSON objects through AJAX using jQuery

When making a jQuery call to an API website, I receive the results in JSON format: { "results":[ { "user":{ "gender":"female", "name":{ "title":"mrs", "first":"linda", "last":"diaz" }, ...