Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

row click events? #14

Closed
mg1075 opened this issue May 23, 2014 · 4 comments
Closed

row click events? #14

mg1075 opened this issue May 23, 2014 · 4 comments

Comments

@mg1075
Copy link

mg1075 commented May 23, 2014

Definitely an interesting project.

Do you have any examples demonstrating row-click events as this prior attempt
at combining angular and datatables shows?

https://groups.google.com/forum/#!topic/angular/vM2DEMK_NMA

(click on "price" column, and item on angular scope is updated)
http://jsfiddle.net/zdam/7kLFU/

@l-lin
Copy link
Owner

l-lin commented May 23, 2014

You can add the option fnRowCallback (for DT v1.9) or rowCallback (for DT v1.10) with the DTOptionsBuilder.withOption:

$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
    .withOption('fnRowCallback', function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        // Do your things
        return nRow;
    });

You can find an example here (click on firstName column and item on angular scope is updated).

@mg1075
Copy link
Author

mg1075 commented May 24, 2014

Thanks for the helpful example.

It leads to another issue, though.

Does running ajax calls via fromSource seem to go against
the "angular way" of getting data from a factory / service?
Maybe I am being thrown off a bit by the separate json file
getting called, but that seems unlikely to be a real
world scenario of an ajax call, especially with an angular app.

DataTables 1.10 has an option for passing data called: 'data'.
http://datatables.net/manual/data

It seems like supplying data via that method would be more
common in angular apps, but I am not seeing that option
available in the code.

@l-lin
Copy link
Owner

l-lin commented May 24, 2014

No, it's indeed not the "Angular way" to fetch the data.
The problem comes from the fact that Datatables renders once and permanently. It does not re-render the table if we change the value of aaData (or data for v1.10).
I did not manage to find a solution that would satisfy the way we do in Angular.

However, your comment makes me realize that I can use promises instead of an ajax call, something that will look like this:

$scope.dtOptions = DTOptionsBuilder.fromPromise(myFactory.getFoo());

and myFactory will be factory that will use $resource to fetch the data:

angular.module('myModule').factory('myFactory', function($resource) {
    return {
        getFoo: function() {
            return $resource('foo.json').get().$promise;
        }
    };
});

l-lin added a commit that referenced this issue May 24, 2014
@l-lin l-lin closed this as completed in 30b3e47 May 24, 2014
@l-lin
Copy link
Owner

l-lin commented May 24, 2014

Here an example using fromPromise that uses a promise instead of an Ajax call.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants