Angular directive for DataTables jquery plugin

37,497 views
Skip to first unread message

zdam

unread,
Mar 16, 2012, 10:16:22 PM3/16/12
to ang...@googlegroups.com

DataTables is the best jquery table plugin in the universe! http://datatables.net/index

I have written an angular directive for the DataTables plugin.




The directive allows you to define columns explicitly in the dom, or via javascript (in your controller).

The attribute names are aligned with those used by DataTables, so if you are familiar with DataTables, this directive should be easy to use.

The fiddle shows 3 tables, each uses a different method of configuration.




Cheers, Adam.

Misko Hevery

unread,
Mar 18, 2012, 12:28:11 AM3/18/12
to ang...@googlegroups.com
Looks great!


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/INdsWTOt808J.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Jehu

unread,
Mar 18, 2012, 8:22:56 AM3/18/12
to AngularJS
Really cool!
Thank you for sharing.

On 17 Mrz., 03:16, zdam <adam.k.web...@gmail.com> wrote:
> DataTables is the best jquery table plugin in the universe!http://datatables.net/index

zdam

unread,
Mar 18, 2012, 7:05:51 PM3/18/12
to ang...@googlegroups.com
This example shows other options switched on - filtering and paging.  It also uses an array of objects as it's data source, and uses mDataProps to extract elements.


Cheers, Adam.

Vojta Jína

unread,
Mar 19, 2012, 3:13:04 AM3/19/12
to ang...@googlegroups.com
Nice work man !

V.

Łukasz Twarogowski

unread,
Mar 19, 2012, 8:26:06 AM3/19/12
to ang...@googlegroups.com
great! :)

jaso...@gmail.com

unread,
May 11, 2012, 8:36:13 AM5/11/12
to ang...@googlegroups.com
Cool. So actually, can we use any JQuery Plugin with AngularJS?
Is there any limitation?

Vojta Jína

unread,
May 21, 2012, 12:40:52 AM5/21/12
to ang...@googlegroups.com
Wrapping some jq plugins is easier than wrapping other ones...
Especially when the plugin starts changing the DOM and you want this
part of the DOM to be bindable by Angular it usually gets
complicated...

V.
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/angular/-/1LdwkRDSiCsJ.

Tad Christiansen

unread,
Aug 4, 2012, 7:46:50 PM8/4/12
to ang...@googlegroups.com
Awesome work. Thanks for sharing. 

Perhaps there is a simple solution for this, but I can't seem to get it to work when I switch out the array of objects with an ajax call that returns the same array of objects.

$scope.sampleProductCategories = $resource("rest/products").query();

When I look at the response it has the same array of objects. When I copied and pasted the exact array that was in the response it works fine. 

Is there something I need to do differently when using ajax?

Tad Christiansen

unread,
Aug 7, 2012, 12:43:16 AM8/7/12
to ang...@googlegroups.com
I got it to work using the callback function (as seen below) but I am not sure why I have to do this. I understand that query will at first return an empty array but as soon as the real data comes back, I thought it would update.

$scope.sampleProductCategories = $resource("rest/products").query(function (data) {
$scope.managedCourses = data;
}); 

Without using the call back I tried just printing this in the ui:
{{sampleProductCategories}}
 and it printed out the array. 

I got it working so its no big deal. I just want to understand what is going on and why: 

$scope.sampleProductCategories = $resource("rest/products").query();

doesn't work.

Dinesh P.R.

unread,
Aug 7, 2012, 1:55:33 AM8/7/12
to ang...@googlegroups.com
Can you edit the data in table. 
I am expecting something like HandsOnTable 

johntom

unread,
Aug 7, 2012, 9:57:05 AM8/7/12
to ang...@googlegroups.com
Universe is large, and while there is a cost I think wijmo (I've used in my asp.net days) is imho somewhat better. They have demos with Knockout and I wonder how it would work with Angular. I've placed idea in their suggestion box and this is beyond my scope at the moment. See  http://wijmo.com/demo/explore/#grid|group-area for one example that I think demonstrates its capabilities.  They also have an open source project at  http://wijmo.com/downloads/ 
Thanks for your great example!
John

Tad Christiansen

unread,
Aug 7, 2012, 11:05:59 AM8/7/12
to ang...@googlegroups.com
This is what I actually got working (the above comment was a typo): 

$resource("rest/products").query(function (data) {
$scope.sampleProductCategories = data;
}); 

neeta

unread,
Oct 31, 2012, 7:50:26 AM10/31/12
to ang...@googlegroups.com
I get an error
Object [[object HTMLTableCellElement], [object HTMLTableCellElement]] has no method 'each' 

at the line
explicitColumns.push($(elem).text()); after
element.find('th').each(function (index, elem) {

I have included DataTables-1.9.4, could that be a problem?

serrav...@gmail.com

unread,
Nov 1, 2012, 1:11:08 PM11/1/12
to ang...@googlegroups.com
zdam, It's very nice! But I am thinking a little strange to use this way, because if I will put for example icons(edit, delete), I will need put for example this way:

{ "mData": null, "sDefaultContent": "<img ng-click='open()' src='pdf.gif' />", "aTargets":[-1] }

I am mixing HTML. I think there is a better way for to do it. What the best way to do it?

Thanks!

Tim Sweet

unread,
Nov 3, 2012, 9:45:49 PM11/3/12
to ang...@googlegroups.com, serrav...@gmail.com
Here is a angular native datagrid we have been working on https://github.com/Crash8308/ng-grid you might want to take a look at it.

Tim Sweet

unread,
Nov 4, 2012, 12:55:51 AM11/4/12
to ang...@googlegroups.com, serrav...@gmail.com
renamed my account so it's now under https://github.com/timothyswt/ng-grid

johann...@googlemail.com

unread,
Dec 2, 2012, 12:27:18 PM12/2/12
to ang...@googlegroups.com
You Sir, are genius.
That just saved me a lot of hassle with runtime dataTables.


On Monday, March 19, 2012 12:05:51 AM UTC+1, zdam wrote:

Tim Sweet

unread,
Dec 3, 2012, 1:30:54 AM12/3/12
to ang...@googlegroups.com, johann...@googlemail.com
We are now merged with the angular-ui team. http://angular-ui.github.com/ng-grid/

Sandip Bhavsar

unread,
Dec 3, 2012, 5:24:28 AM12/3/12
to ang...@googlegroups.com
Hello Tim,

Currently I am exploring ng-grid implemented by you and your team but not able to find documents and other options related to grid.

Also,on github all documents are remove "https://github.com/timothyswt/ng-grid"

Please help !!!!


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Pawel Kozlowski

unread,
Dec 3, 2012, 5:26:01 AM12/3/12
to ang...@googlegroups.com
Hey!

The ng-grid was moved to the angular-ui organization:
https://github.com/angular-ui/ng-grid

Cheers,
Pawel

On Mon, Dec 3, 2012 at 11:24 AM, Sandip Bhavsar
<sandip....@enthalpysystems.co.in> wrote:
> ng-grid implemented by you and your team but not able to find documents and
> other options related to grid.
>
> Also,on github all documen



--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

Sandip Bhavsar

unread,
Dec 3, 2012, 5:29:33 AM12/3/12
to ang...@googlegroups.com
Thats great news..

But currently on link of "Doc" it is not redirecting to Wiki pages of Github


Pawel Kozlowski

unread,
Dec 3, 2012, 5:32:10 AM12/3/12
to ang...@googlegroups.com
Docs are here: https://github.com/angular-ui/ng-grid/wiki

On Mon, Dec 3, 2012 at 11:29 AM, Sandip Bhavsar

Sandip Bhavsar

unread,
Dec 3, 2012, 5:43:49 AM12/3/12
to ang...@googlegroups.com
Thanks Pawel for your prompt response.

But I am not able to open link in 

Advanced Features

Check these out:

Jimmy Collazos || acido || cuatroxl.com

unread,
Dec 3, 2012, 1:11:53 PM12/3/12
to ang...@googlegroups.com
Hi guys! First of all, I think the UI team do a great job.

I have a question(off topic) for the team ng-UI.

Really you think this is "declarative" UI ?

<div ng-grid="myOptions"></div>
Maybe i'm wrong, but i think not is approach AngularJS philosophy.

What is the difference with "jquery style"? (for the end user)
<div class="grid" data-options="myOptions"></div>

Personally, I wish it was more declarative, by example:
    <table ui-grid="data">
      <tr ui-grid-column-key="name">
        <th>Name</th>
        <td ui-grid-row-is="item">{{item}}</td>
      </tr>
      <tr ui-grid-column-key="id">
        <th>Id</th>
        <td ui-grid-row-is="item"><b>{{item}}</b></td>
      </tr>
    </table>
<!--
tr = column (I know, this is confused if you know what is TR :[ )
th = row title
td = row
-->


2012/12/3 Sandip Bhavsar <sandip....@enthalpysystems.co.in>



--
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::: J i m m y  C o l l a z o s :::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Timothy Sweet

unread,
Dec 3, 2012, 1:22:21 PM12/3/12
to ang...@googlegroups.com
And you are perfectly free to create your own table, your own styling, implement all your own features for the grid including selectable rows (and coming soon selectable cells), filtering, group aggregates, virtualization and whatever else you want using that method. ng-grid is basically a new user control. Not simply a directive.
-Tim Sweet

Timothy Sweet

unread,
Dec 3, 2012, 1:43:56 PM12/3/12
to ang...@googlegroups.com
What we could possibly do is an ng-grid-lite set of directives specifically for a table like that for users like yourself who want to declare their own table rows and columns etc manually.
--
-Tim Sweet

Timothy Sweet

unread,
Dec 3, 2012, 1:59:43 PM12/3/12
to ang...@googlegroups.com
also, you may want to take a look at the gridTemplate from source. you will see that it is declarative. we just organize it all for you.
--
-Tim Sweet

Jimmy Collazos || acido || cuatroxl.com

unread,
Dec 3, 2012, 2:12:59 PM12/3/12
to ang...@googlegroups.com
I'm  looking at that page now... :)


2012/12/3 Timothy Sweet <timot...@gmail.com>

Giuseppe Barbiero

unread,
Feb 10, 2013, 11:29:50 AM2/10/13
to ang...@googlegroups.com
Do you have any doc of how go include datas trough an ajax call ? 

Thanks

Giuseppe Barbiero

unread,
Feb 10, 2013, 11:31:19 AM2/10/13
to ang...@googlegroups.com
I have the same problem I can't make it work with an ajax call

Can you make me see where do you use this declaration and if it's the only thing you made?

THakns

Tim Sweet

unread,
Feb 11, 2013, 2:09:04 AM2/11/13
to ang...@googlegroups.com
We do on the examples page. Look at the server side paging example. It is getting the data from an asynchronous call.

swa...@gmail.com

unread,
May 29, 2013, 1:34:04 PM5/29/13
to ang...@googlegroups.com
Do you know of a way while using this directive to apply angular filters to the data being shown in the datatable?  such as formatting data for a certain date or currency format

lorenzofox3

unread,
May 29, 2013, 3:32:11 PM5/29/13
to ang...@googlegroups.com
Hi, 
It might interest you : 
I have just released an alternative table module which allows you to do so easily :
smart table

cheers,

Laurent

Jianbo Cui

unread,
Jul 2, 2013, 6:25:32 PM7/2/13
to ang...@googlegroups.com
Hi Thiago Ventura

    I am having the same issue, have you got any answers? Do you mind pasting some sample code?

Thanks
Jianbo

Peter Drinnan

unread,
Jul 18, 2013, 4:25:20 PM7/18/13
to ang...@googlegroups.com, johann...@googlemail.com
That looks really awesome! Can't wait to try it.

Sacha

unread,
Jul 19, 2013, 5:17:34 AM7/19/13
to ang...@googlegroups.com
Very nice! Your table module really convinced me, nice work!

William Szeliga

unread,
Aug 16, 2013, 8:37:54 AM8/16/13
to ang...@googlegroups.com, adam.k...@gmail.com
I know this is responding a little late, but I am playing around with AngularJS more and more and was able to expand on this.

Let me know what you think:


-Bill

Roman Kabiev

unread,
Aug 16, 2013, 2:29:25 PM8/16/13
to ang...@googlegroups.com, adam.k...@gmail.com
Greate job!

how can add this directive dinamically, for example when user click the menu item?

Thank you!

суббота, 17 марта 2012 г., 6:16:22 UTC+4 пользователь zdam написал:

Gijs Mollema

unread,
Aug 26, 2013, 2:04:35 AM8/26/13
to ang...@googlegroups.com
I have gotten this plugin also running using a backend providing the data (REST backend) and Restangular.
The datatable is rebuild nicely as well after the asynch load.
Any1 who wants to connect to a backend server providing data: this works a lot better than fiddling with http or resource object, as Restangular uses the 'promiss' tactic.

An example of Restangular: http://blog.jongallant.com/2013/05/angularjs-restangular-sample.html#.UhrnYn_9wVk

Just my 2 cents:)

Cheers,
Gijs

code solver

unread,
Sep 4, 2013, 1:27:58 PM9/4/13
to ang...@googlegroups.com
angularJS ng-grid with example: angularJS ng-grid

Rémy Esmery

unread,
Sep 25, 2013, 7:31:45 AM9/25/13
to ang...@googlegroups.com
Great work, however I would suggest using a deep watch (adding true as a third parameter to the call to scope.$watch), so pushing directly on aaData will trigger the binding refresh.
Sorry if this has already been stated before.
Best regards
Reply all
Reply to author
Forward
0 new messages