DataTables and AngularJS

mg

I am a big fan of jQuery DataTables and in my book consider it the best
open source grid out there.

But there is a problem I am now facing: it is no longer feasible to make
rich javascript applications that rely on jQuery as the glue for the app.
The javascript landscape and its myriad of libraries changes everyday,
with new libraries and frameworks coming by the minute, yet the
framework with the most traction for building rich javascript apps
seems to be AngularJS.

Mixing AngularJS and jQuery Datatables is problematic.
https://groups.google.com/forum/#!msg/angular/vM2DEMK_NMA/TH0_AI8OF8EJ

There have been a number of attempts to integrate the two,
but I have not come across any implementation that has
gained wide acceptance.

At one point there were plans for KnockoutJS integration with DataTables,
but this issue with Angular seems more critical.

Are there any plans regarding Angular directives for datatables,
or best practices for using DataTables with Angular?
Is it a good idea to try in it the first place, given how DataTables
has so many features that involve DOM manipulation?
There are "pure" Angular grid options out there, but none of
them have all the features DataTables currently has.

Any feedback would be of interest.

hzi

+1

pmorch

Here, we've decided to use Datatables for all our non-trivial tables. But have begun to use AngularJS too. I'm afraid if they don't play nice together, we'll adopt a "pure" AngularJS grid option, rather than avoid AngularJS.
(And AngularJS is becoming popular, see Google Trends: angularjs, datatables)

And it isn't that we just need some way for Datatables and AngularJS to play nice in a specific situation, but that Datatables can be used "the angular way", were the datatable automagically synchronizes with data from Angular's $scope data.

But probably this is possible. However, searching shows mostly how this is difficult and no consensus seems to be reached. As @mg asks, "best practices for using DataTables with Angular" is what I'd like to see too. Even better, a couple of examples using AngularJS demonstrating the canonical approach would be ideal!

allan

With the changes in 1.10 it should be require possible to have DataTables play nicely with Angular - as long as Angular isn't being used to update the table's DOM (having two independent libraries updating the DOM individually just isn't going to work). So for adding new rows, deleting old ones etc, the directives would need to use the API, and DataTables would need to be instructed to use the data from Angular.

It should be quite possible, and I will try to look at building an example in future - however, the list of features to be implemented is already rather long, and I'm working why way through them.

Any code contributions, or priority support contributions so this can be prioritised are very welcome.

Allan

mg

In the google forum link from my original post, there are three useful examples of using angular and datatables together.

http://jsfiddle.net/zdam/7kLFU/
http://jsfiddle.net/TNy3w/2/
http://jsfiddle.net/zdam/pb9ba/

Using the patterns in these fiddles as a starting point, and using the latest stable version of Angular along with DataTables 1.10, I am finding that at least for relatively straightforward tables, the approach taken there could be workable. At least, I am finding it more enjoyable to
take this route, and have had more success - again, limited testing - than trying to play with a pure angular solution like ng-grid (not a knock against ng-grid, just an "is" for me).

There are a few github projects that try to integrate datatables and angular which introduce their own way of working with the frameworks, but the few I have tried do not leave me with much hope. The fiddles from the google groups discussion, though, seem to have offered a way to keep the flexibility of DataTables while not completely abandoning the "angular way".

One note of importance: I have not tried an server-side paging, etc., as would be done in "normal" DataTables yet, but at least for small enough data-sets, I think it is best to not use DataTables for ajax calls, but to rely on Angular services/factories to obtain the data, and then feed DataTables that data as a plain JS array/object attached to angular's $scope. So with the fiddles as a starting point, you could do something like:

scope.$watch(attrs.jsData, function (value) {
var val = value || null;
if (val) {
dataTable.fnClearTable();
dataTable.fnAddData(scope.$eval(attrs.jsData));
}
});

...and then have your table be decorated with

<table my-table js-data="u.Users"...></table>

...where "u.Users" is an Array of data for the table built in an angular controller
and created from an angular service/factory.

I am not holding this approach up as "best practice"; I am merely stating this is what has worked best for me up to this point (not entirely without issues), and I would be interested in knowing better methodologies here.

I sympathize with @pmorch about moving to a pure Angular solution.
At the same time, I do not think any of the pure Angular solutions
or Angular + ReactJS solutions have the feature set or could ever hope to
have the full feature set DataTables does. It sure seems like an exercise
in re-inventing the wheel. I suspect that's why we are both still interested
in using DataTables, however best it can be used.

pmorch

@allan and @mg: Having spent the best part of a day experimenting with ngTable, I also strongly prefer DataTables. :-)

And hope and think we'll get there. There are very many great features of DataTables: Has stood the test of time, handles large tables fantastically, superb documentation, high quality. I need them also for my AngularJS projects! ;-)

allan

Thanks for the feedback. I will try to experiment with this when I can. Bit bogged down in other things just now!

Allan

allan

I just saw this in the Javascript Weekly e-mail: http://josebalius.github.io/ngReactGrid . I haven't had a chance to check it out myself yet, but perhaps it might be useful?

Allan

mg

More than a week ago, there was a blurb about this in echojs that pointed to a post on by the author of the reactjs/angularjs grid.

http://www.josebalius.com/why-i-stopped-using-ng-grid-and-rolled-my-own-with-reactjs/

It may be based conceptually on ng-grid and jQuery DataTables, but it does not have jQuery DataTables as a dependency.

https://github.com/josebalius/ngReactGrid/tree/master/src

Irrespective of the merits of the project, projects like these seem to indicate:

(1) There is a shift away from jQuery as the glue for UI widgets

(2) The newer JS frameworks often have to tackle the task of re-inventing or re-implementing existing jQuery widgets so that these widgets can fit within the architecture of the new JS framework(s).

And with respect to (2), the re-invention is not always as feature rich as the original, especially when the original is complex.

pmorch

Now I've just spent 2 days using DataTables in my AngularJS project.

For me, the important part of the DataTables / AngularJS integration is being able to do it "the angular way". Which means, that the $scope has all the data, but just the data, and the presentation lies in the templates that create the DOM.

To give an idea, here is what the final result looks like:

So in each table cell, there are all kinds of markup. For now, lets pretend it is a <ul> with <li>s containing links just for the sake of argument.

Because I'm using the

dataTable.fnClearTable();
dataTable.fnAddData($data);

approach, the $data javascript variable needs to hold the markup. It is not in the DOM.

(There seems to be a problem with markdown rendering of multi-line code in this forum - see the exact same source rendered more clearly in this github gist)

And hence, I'm forced to use my legacy, pre-AngularJS templating library, unless I want to do the even older:

var linksMarkup = "<ul>";
links.forEach(function (link) {
    linksMarkup += "<li><a href='" + link.href + "'>" + link.name + "</a>";
});
linksMarkup += "</ul>";

But this is not AngularJS. What I'm really looking for is being able to use AngularJS templates, and do:

<td>
    <ul>
        <li ng-repeat="link in links">
            <a href="{{link.href}}">{{link.name}}</a>
    </ul>
</td>
<td>
    bla bla bla
</td>

Using the AngularJS built-in and my own directives, services, scope functions, etc. Also allowing me to do <input ng-model="myVar"> that has a two-way binding with $scope.myVar - inside the table.

Yes, that gets created in the DOM.

I don't know what is the best interface between AngularJS and DataTables, but as long as I have to put all the table contents in a javascript variable, there is no chance I can do it "the angular way" and use AngularJS properly.

Sure I can get by with this for now. But for me, this is the crucial point: I want the to be able to use AngularJS inside the contents of the table too. Otherwise I'll have a non-AngularJS island inside of AngularJS and that won't work for me in the long run. It prevents me from using AngularJS everywhere.

So I hope there will be some way for me to do this. @allan, if it is helpful for you, I could create a simple jsbin or plunkr demonstrating what I'm talking about.

allan

Interesting - thanks for the feedback. The ngReactGrid docs say "It is based on ng-grid and jQuery DataTables" - but right enough, I think that just trying to say that it takes some cues for DataTables, rather than actually using DataTables.

There is a shift away from jQuery as the glue for UI widgets

Yes - there are a lot of different frameworks out there. Selecting a single one of DataTables to operate with out exclude developers using the others. I'm hoping I can provide enough hooks in the core library that an integration layer can be provided for whatever libraries / frameworks an author wants to use, a bit like I've done with the styling (Bootstrap, Foundation and jQuery UI).

Allan

pmorch

Hi,

I've created a JS Bin where I have an AnguarJS project with a DataTable. It shows both a DataTable, and a standard table illustrating the different approaches to both.

Especially if there are any ways to be able to use AngularJS inside the DataTable, I'd love to hear about it, so I don't have to implement AngularJS directives and non-AngularJS templates for similar functionality.

Likewise, if anybody has any suggestions on better ways to use DataTables and AngularJS, I'd also like to know. Hopefully, this or something like it could evolve into a best-practice recommendation for using DataTables and AngularJS together, which is why I've followed the JS Bin recommendation.

Peter

Darkenspirit

I think this is completely outside my scope but maybe this could help. I am starting to learn Angular myself and the biggest concern was shifting over from jQuery.

http://l-lin.github.io/angular-datatables/

I found this for angular and it totes that it can do datatables the "angular" way with a directive. Not sure if this is what you are looking for but it seems to work with 1.9 datatables and a bunch of the plugins like ColVis and TableTools.

geminiyellow

angular-datatables is good, if there is a exception when get data from server, it cannot catch it.