javascriptjqueryajaxdynatable

DynaTable - Update the dataset records to new data set


I have this: MyModel:

function MyModel(title, status, user, lastUpdated, local_id) {
    this.title = title;
    this.status = status;
    this.reported_by = { username: user };
    this.utc_last_updated = lastUpdated;
    this.local_id = local_id;
    return this;
}

And, I have this render_and_update() function:

function render_and_update(owner, newList, callBack){

    function tbodyWriter(id, MyModel) {

      var tRow = '<tr class="example-row"><th class="local-id">' + MyModel.local_id 
        + '</th><th class="title">' + MyModel.title +'</th><th class="status">'
        +MyModel.status +'</th><th class="reported-by">' + MyModel.reported_by.username 
        + '</th><th class="last-updated">' + MyModel.utc_lastUpdated + '</th><th class="display-none">' 
        + MyModel.utc_lastUpdated.getTime() + '</th></tr>';
      return tRow;

    }

    $('table-collection').dynatable({
        dataset: {
            records: newList,
            perPageDefault: 10,
            perPageOptions: [5, 10, 20]
        },
        writers: {
            _rowWriter: tbodyWriter
        }
    });
    callBack();
}


function MainController() {
    getUpdatedData(function(owner, updatedData) { /* make ajax call & returns updated records list on success*/
        render_and_update(owner, updatedData, function() { /* function having problem */
            console.log('end..');
        });
    });
}

$('my-button').click(MainController);

The question is: when i click button it calls the render_and_update() function and first time it insert the record set but on second click it doesn't update the dataset to new data set...

Why is the DOM not being updating?

Thanks.


Solution

  • I solved the issue my own..

    that solved my issue:

    if(clicked) {
         dynatable.settings.dataset.originalRecords = issuesList;
         dynatable.process();
    }
    

    updated update_and_render() function and MainController() function:

    function render_and_update(clicked, owner, newList, callBack){
    
        function tbodyWriter(id, MyModel) {
    
          /* Nothing changed in this function. i.e., same as above in question. */
    
        }
    
        var dynatable = $('table-collection').dynatable({
            dataset: {
                records: newList,
                perPageDefault: 10,
                perPageOptions: [5, 10, 20]
            },
            writers: {
                _rowWriter: tbodyWriter
            }
        }).data('dynatable');
    
        if(clicked) {
            dynatable.settings.dataset.originalRecords = issuesList;
            dynatable.process();
        }
    
        callBack();
    }
    
    function MainController() {
        getUpdatedData(function(owner, updatedData) { /* make ajax call & returns updated records list on success*/
            render_and_update(true, owner, updatedData, function() { /* function having problem */
                console.log('end..');
            });
        });
    }
    

    Hope this helps others in future!