Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose method to rerender entire directive #157

Closed
buob opened this issue Dec 19, 2014 · 9 comments
Closed

Expose method to rerender entire directive #157

buob opened this issue Dec 19, 2014 · 9 comments
Milestone

Comments

@buob
Copy link

buob commented Dec 19, 2014

It seems that there are services exposed by factories to render the individual components of the directive, but none that seem to take the same approach as the watcher in the compile function of the directive. It also seems like there is not an easy way to get the buildOptions and other vars to pass into the factory.

I've seen some other libraries allowing you to pass in a control object to the directive and expose methods that way, any objections to me doing that?

@l-lin
Copy link
Owner

l-lin commented Dec 19, 2014

If you feel you can improve this module, by all means, I'll glady accept any proposition 😄

It seems your issue comes from the fact that you need to rerender your table.
In fact, it's best to use the DataTable's API if you need to do some operations in existing tables.
For instance, if you need to rerender:

$scope.$on('event:dataTableLoaded', function(loadedDT) {
    loadedDT.DataTable.draw(); // This will redraw your table
});

Not sure If I answer your question.

@buob
Copy link
Author

buob commented Dec 29, 2014

Not exactly. What I could do with that is bind the loadedDT to the directive instance when that event is fired, and then later call

$scope.$on('someevent', function() {
    this.loadedDT.draw();
});

Or something of the sort. After trying that, however, it only seems to rerender part of the actual table (and that's after a significant timeout). There seems to be some disparity between the draw method and the approach used here: https://github.com/l-lin/angular-datatables/blob/master/dist/angular-datatables.js#L384. What would be ideal is an exposure of that approach of rerendering, does that seem incorrect?

@l-lin
Copy link
Owner

l-lin commented Jan 15, 2015

This feature will be available for the upcoming version (v0.4.0).
This new version will offer a way to fetch a DTIntance, an object that "represents" the directive and some APIs will be exposed, such as reloadData(), changeData(data) and rerender() instead of using watchers.
In this version, to rerender a table, the code will look like this:

<div ng-controller="MyCtrl as showCase">
    <button ng-click="showCase.dtInstance.rerender">Re-render</button>
    <table datatables dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns"></table>
</div>
angular.module('yourModule', ['datatables'])
.controller('MyCtrl', MyCtrl);

function MyCtrl(DTOptionsBuilder, DTColumnsBuilder, DTInstances) {
    var vm = this;
    vm.dtOptions = ...;
    vm.dtColumns = [...];

    DTInstances.getLast().then(function(dtInstance) {
        vm.dtInstance = dtInstance;
    });
}

@l-lin l-lin closed this as completed Jan 15, 2015
@mfrancis107
Copy link

DTInstances.getLast()

Does not appear to be working. The promise is never resolved.

In the source it looks like the variable _lastDTInstance which is a promise is never resolved.

@l-lin
Copy link
Owner

l-lin commented Jan 26, 2015

Can you provide a plnkr or something alike that reproduces the issue?

I don't reproduce the error in my demo.

@mfrancis107
Copy link

I was trying to use the function ```DTOptionsBuilder.newOption().withFnServerData. I'm wanting to use this so I can pass additional data to the POST request. Is there another technique for doing that?

Here's a plnkr
http://plnkr.co/edit/iCHGfDtUTo9U118ZOD3q?p=preview

@l-lin
Copy link
Owner

l-lin commented Jan 26, 2015

You must have forgotten to save your changes on the plnkr.
If you need to provide additional data to your POST request, use the ajax attribute.

@mfrancis107
Copy link

Here's the plunk.

http://plnkr.co/edit/iCHGfDtUTo9U118ZOD3q?p=preview

@l-lin
Copy link
Owner

l-lin commented Jan 26, 2015

Well, DTInstances.getLast() is working fine on your plnkr 😕

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

No branches or pull requests

3 participants