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

Does Work with Angular? #124

Open
umutgithub opened this issue Sep 28, 2016 · 7 comments
Open

Does Work with Angular? #124

umutgithub opened this issue Sep 28, 2016 · 7 comments

Comments

@umutgithub
Copy link

umutgithub commented Sep 28, 2016

Hi,

//my controller
angular.module('myapp').controller('controller', etc etc) {
$(function () {
$("#my-table").stickyTableHeaders();
});
//other codes
}

//this is the view

screen shot 2016-09-28 at 10 43 52 am

in jquery.stickytableheader.js I put some console logs to see if jquery.stickytableheader.js is working. I see that (function ($, window, undefined) {
'use strict';
console.log("1==============="); //works I see that in console window
function Plugin (el, options) {
console.log("2==============="); //doesnt work

$.fn[name] = function ( options ) {
console.log("3==============="); //works I see that in console window

Any idea why Plugin function doesn't work. thats the one not making stickyheader not work

Thanks

@umutgithub
Copy link
Author

I just saw that 'this' in below function is array. When I use your plugin and console it's object
$.fn[name] = function ( options ) { })

Can you take a look.

from jsfiddle example thiss, [table#mytbl, context: document, selector: "#mytbl"]
my console: thisssss, n.fn.init {context: document, selector: "#adj-table"}

that's the reason it doesn't get into loop
return this.each(function () {...

@dzendras
Copy link

I manged to make it work with angular (with ng-repeated multilevel columns). The trick was to turn the JQuery plugin into a directive and call base.init via $timeout so that the ng-repeated columns are available when init gets called.

The example usage is then pretty straightforward:

<table sticky-table-headers> ... </table>

Works like a charm!

@myersultan
Copy link

Hello, dzendras
can you share with your directive?

@umutgithub
Copy link
Author

I made it work. It's great.No problem with angular 1.x Thanks again!
Dzendras, when I put a table into a widget and make the table scrollable I set height of div wrapping table to a certain px number. When I do that header doesn't get fixed position and header doesn't freeze because it has to reach on top of the page then it freezes. Is there anyway around that maybe I can change in the source code that whenever table is scrolled header would freeze immediately, doesn't have to wait to reach the top of the page.

Thanks

@arunvelsriram
Copy link

@dzendras Can you please share your directive code ? I looking to make this work with Angular 2.

@joegarb
Copy link

joegarb commented May 8, 2017

+1 one more request for code for the angular directive, please

Edit: For anyone else interested in this for Angular (Angular 1 in my case), https://github.com/brandon-barker/angular-floatThead seems to work pretty well.

@arunvelsriram
Copy link

@joegarb I was able make it work with Angular 2. Please refer #131. Hope this helps!

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

No branches or pull requests

5 participants