Angular directive for DataTables jquery plugin

Showing 1-42 of 42 messages
Angular directive for DataTables jquery plugin Adam Webber 3/16/12 7:16 PM

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.

Re: [angular.js] Angular directive for DataTables jquery plugin Misko Hevery 3/17/12 9:28 PM
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.

Re: Angular directive for DataTables jquery plugin Jehu 3/18/12 5:22 AM
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
Re: Angular directive for DataTables jquery plugin Adam Webber 3/18/12 4:05 PM
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.
Re: Angular directive for DataTables jquery plugin Vojta Jína 3/19/12 12:13 AM
Nice work man !

V.
Re: Angular directive for DataTables jquery plugin Łukasz Twarogowski 3/19/12 5:26 AM
great! :)
Re: Angular directive for DataTables jquery plugin jaso...@gmail.com 5/11/12 5:36 AM
Cool. So actually, can we use any JQuery Plugin with AngularJS?
Is there any limitation?
Re: [angular.js] Re: Angular directive for DataTables jquery plugin Vojta Jína 5/20/12 9:40 PM
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.
Re: Angular directive for DataTables jquery plugin Tad Christiansen 8/4/12 4:46 PM
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?
Re: Angular directive for DataTables jquery plugin Tad Christiansen 8/6/12 9:43 PM
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.
Re: Angular directive for DataTables jquery plugin P.R. Dinesh 8/6/12 10:55 PM
Can you edit the data in table. 
I am expecting something like HandsOnTable 
Re: Angular directive for DataTables jquery plugin johntom 8/7/12 6:57 AM
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

Re: Angular directive for DataTables jquery plugin Tad Christiansen 8/7/12 8:05 AM
This is what I actually got working (the above comment was a typo): 

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

Re: Angular directive for DataTables jquery plugin neeta 10/31/12 4:50 AM
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?
Re: Angular directive for DataTables jquery plugin Thiago Ventura 11/1/12 10:11 AM
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!
Re: Angular directive for DataTables jquery plugin Tim Sweet 11/3/12 6:45 PM
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.
Re: Angular directive for DataTables jquery plugin Tim Sweet 11/3/12 9:55 PM
renamed my account so it's now under https://github.com/timothyswt/ng-grid
Re: Angular directive for DataTables jquery plugin johann...@googlemail.com 12/2/12 9:27 AM
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:
Re: Angular directive for DataTables jquery plugin Tim Sweet 12/2/12 10:30 PM
We are now merged with the angular-ui team. http://angular-ui.github.com/ng-grid/
Re: [AngularJS] Re: Angular directive for DataTables jquery plugin Sandip Bhavsar 12/3/12 2:24 AM
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.
 
 

Re: [AngularJS] Re: Angular directive for DataTables jquery plugin Pawel Kozlowski 12/3/12 2:26 AM
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/
Re: [AngularJS] Re: Angular directive for DataTables jquery plugin Sandip Bhavsar 12/3/12 2:29 AM
Thats great news..

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



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



Re: [AngularJS] Re: Angular directive for DataTables jquery plugin Pawel Kozlowski 12/3/12 2:32 AM
Docs are here: https://github.com/angular-ui/ng-grid/wiki

On Mon, Dec 3, 2012 at 11:29 AM, Sandip Bhavsar
Re: [AngularJS] Re: Angular directive for DataTables jquery plugin Sandip Bhavsar 12/3/12 2:43 AM
Thanks Pawel for your prompt response.

But I am not able to open link in 

Advanced Features

Check these out:

Re: [AngularJS] Re: Angular directive for DataTables jquery plugin jimmy collazos 12/3/12 10:11 AM
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 :::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Re: [AngularJS] Re: Angular directive for DataTables jquery plugin Tim Sweet 12/3/12 10:22 AM
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
Re: [AngularJS] Re: Angular directive for DataTables jquery plugin Tim Sweet 12/3/12 10:43 AM
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
Re: [AngularJS] Re: Angular directive for DataTables jquery plugin Tim Sweet 12/3/12 10:59 AM
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
Re: [AngularJS] Re: Angular directive for DataTables jquery plugin jimmy collazos 12/3/12 11:12 AM
I'm  looking at that page now... :)


2012/12/3 Timothy Sweet <timot...@gmail.com>
Re: [AngularJS] Re: Angular directive for DataTables jquery plugin Giuseppe Barbiero 2/10/13 8:29 AM
Do you have any doc of how go include datas trough an ajax call ? 

Thanks

Il giorno lunedì 3 dicembre 2012 19:59:43 UTC+1, Tim Sweet ha scritto:
Re: Angular directive for DataTables jquery plugin Giuseppe Barbiero 2/10/13 8:31 AM
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

Il giorno martedì 7 agosto 2012 17:05:59 UTC+2, Tad Christiansen ha scritto:
Re: Angular directive for DataTables jquery plugin Tim Sweet 2/10/13 11:09 PM
We do on the examples page. Look at the server side paging example. It is getting the data from an asynchronous call.
Re: Angular directive for DataTables jquery plugin David Wade 5/29/13 10:34 AM
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
Re: Angular directive for DataTables jquery plugin lorenzofox3 5/29/13 12:32 PM
Hi, 
It might interest you : 
I have just released an alternative table module which allows you to do so easily :
smart table

cheers,

Laurent

Le mercredi 29 mai 2013 19:34:04 UTC+2, swa...@gmail.com a écrit :
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
Re: Angular directive for DataTables jquery plugin Jianbo Cui 7/2/13 3:25 PM
Hi Thiago Ventura

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

Thanks
Jianbo
Re: Angular directive for DataTables jquery plugin Peter Drinnan 7/18/13 1:25 PM
That looks really awesome! Can't wait to try it.
Re: Angular directive for DataTables jquery plugin Sacha 7/19/13 2:17 AM
Very nice! Your table module really convinced me, nice work!

Le mercredi 29 mai 2013 21:32:11 UTC+2, lorenzofox3 a écrit :
Re: Angular directive for DataTables jquery plugin William Szeliga 8/16/13 5:37 AM
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


On Sunday, March 18, 2012 7:05:51 PM UTC-4, zdam wrote:
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.

On Saturday, 17 March 2012 12:16:22 UTC+10, zdam wrote:

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.

Re: Angular directive for DataTables jquery plugin Roman Kabiev 8/16/13 11:29 AM
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 написал:

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.

Re: Angular directive for DataTables jquery plugin Gijs Mollema 8/25/13 11:04 PM
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
Re: Angular directive for DataTables jquery plugin ranadheer reddy 9/4/13 10:27 AM
angularJS ng-grid with example: angularJS ng-grid
Re: Angular directive for DataTables jquery plugin Rémy Esmery 9/25/13 4:31 AM
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

Le samedi 17 mars 2012 03:16:22 UTC+1, Adam Webber a écrit :

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.

More topics »