StickyTableHeaders icon indicating copy to clipboard operation
StickyTableHeaders copied to clipboard

Does Work with Angular?

Open umutgithub opened this issue 7 years ago • 7 comments

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 avatar Sep 28 '16 14:09 umutgithub

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 () {...

umutgithub avatar Sep 28 '16 15:09 umutgithub

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!

dzendras avatar Nov 16 '16 15:11 dzendras

Hello, dzendras can you share with your directive?

myersultan avatar Nov 17 '16 03:11 myersultan

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

umutgithub avatar Jan 03 '17 20:01 umutgithub

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

arunvelsriram avatar Apr 29 '17 10:04 arunvelsriram

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

joegarb avatar May 08 '17 21:05 joegarb

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

arunvelsriram avatar May 09 '17 04:05 arunvelsriram