Angular directive for DataTables jquery plugin

[zdam]

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.

Fiddle:  http://jsfiddle.net/zdam/pb9ba/

Cheers, Adam.

[Misko Hevery]

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]

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]

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.

http://jsfiddle.net/zdam/7kLFU/ 

Cheers, Adam.

[Vojta Jína]

Nice work man !

V.

[Łukasz Twarogowski]

great! :)

[jaso...@gmail.com]

Cool. So actually, can we use any JQuery Plugin with AngularJS?

Is there any limitation?

[Vojta Jína]

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]

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]

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.]

Can you edit the data in table. 

I am expecting something like HandsOnTable 

[johntom]

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]

This is what I actually got working (the above comment was a typo): 

$resource("rest/products").query(function (data) {

$scope.sampleProductCategories = data;

}); 

[neeta]

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]

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]

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]

renamed my account so it's now under https://github.com/timothyswt/ng-grid

[johann...@googlemail.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]

We are now merged with the angular-ui team. http://angular-ui.github.com/ng-grid/

[Sandip Bhavsar]

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.

Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Pawel Kozlowski]

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]

Thats great news..

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

[Pawel Kozlowski]

Docs are here: https://github.com/angular-ui/ng-grid/wiki

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

[Sandip Bhavsar]

Thanks Pawel for your prompt response.

But I am not able to open link in 

Advanced Features

Check these out:

• Configuration Options : replace current link :https://github.com/timothyswt/ng-grid/wiki/Configuration-Options" with "https://github.com/angular-ui/ng-grid/wiki/Configuration-Options"
• Defining Columns
• Templating your Rows and Cells
• Column Sorting and Filtering
• Plugins

[Jimmy Collazos || acido || cuatroxl.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]

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]

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]

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.

https://github.com/angular-ui/ng-grid/blob/master/src/templates/gridTemplate.html

--
-Tim Sweet

[Jimmy Collazos || acido || cuatroxl.com]

I'm  looking at that page now... :)

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

[Giuseppe Barbiero]

Do you have any doc of how go include datas trough an ajax call ? 

Thanks

[Giuseppe Barbiero]

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]

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]

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]

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]

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]

That looks really awesome! Can't wait to try it.

[Sacha]

Very nice! Your table module really convinced me, nice work!

[William Szeliga]

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:

http://jsfiddle.net/TNy3w/2/

-Bill

[Roman Kabiev]

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]

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]

angularJS ng-grid with example: angularJS ng-grid

[Rémy Esmery]

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