I have a small AngularJS app using ngTable. The app has several tables, but most of them don't need pagination. I'm working on one table that will require pagination.
When the table renders, I know there are quite a few entries in the table (more than 100). When it first renders, it shows the first 10. It draws the page size selector ("10 25 50 100") on the bottom right, but it doesn't draw the page selector on the bottom left.
I can click the buttons in the page size selector, and it will redraw showing that many entries, but it still doesn't show the page selector.
I tried examining the default pagination template, and I even defined a custom one on my page, but just pasted in the default one, so I could play with it. I added some junk content to the page size selector div, and that never showed up when it rendered, even though I can see that change in the script block in firebug.
Anyone have any ideas what's going on here?
I've managed to construct a plunkr that demonstrates this.
You need add params.total($scope.completedQueries.length); before $defer.resolve because when you init ngTableParams array $scope.completedQueries is empty, it filled when called getData
Related
The past two nights I have been struggling with an issue in React. I have a website that has multiple images (a header, some gallery images, some cool photos). I want the page to render in whole the moment all images are correctly loaded.
There are people that tell me to use the lifecycle hooks, but that doesn't seem to work because the render proces is faster than the time some images need to load in.
This one time I thought I managed to get it working by doing the following: Add inline styling to container div saying display none. Then add onLoad={method to trigger a display: inherit} to the container div.
But when I used a bigger image (of 15MB, just to test it out) the loading was perhaps a succes but still took time to show on the page. So it didn't work afterall. It just 'looked' like it worked cause the other image loaded faster.
Anyone has any other idea's to tackle this problem?
Best of wishes,
If you know the number of images you have on the page you can do a counter that starts from zero and put an onLoad on each image which adds one to the counter when the image is loaded...then do a condition:
{counter===numberOfImages? <Content><Content/> : null}
I am currently using responsiveSlides
as an image slider on our web page.
It is a jQuery slider using an HTML unsorted list of images to slide through (automatically in my case).
Now the Issue i am having is, that before the slider actually starts (meaning the script is loaded) there is the last picture in the unsorted list displayed, for a short moment. Then the slider starts his work with the first image in that list.
I tried using a minified version of the js-file, and load that script at the very beginning of my HTML markup. This actually shortened the display time of the last picture, but it is still noticeable and annoying. (This happens with every click on a navigation point, as the page is loading new...)
Also i experimented with timeout function (js) to display the unsorted list containing div after some miliseconds, or on document.ready state, etc..
But all of theses attempts where ugly.
So now i am at the point, where i try to understand how the whole slider script is working, and i assume there must be a point, where i can set to start with the last picture in my unsorted list, instead of starting with the first one, but i just can't find that point in the code.
I couldn't manage to post the code here with proper syntax highlighting, so you can find the code here
Any ideas are much appreciated!
As I see on their demo page, sliding happens because of changing z-index, so slides like a pie.
In you slider you may see the last slide while script is initializing because of already applied CSS, but not JS yet.
I'd suggest to add opacity: 0; in CSS to all your slides. When JS will be ready, it'll add opacity: 1; itself.
I am using AG-Grid without a framework to create an Excel-like editable table. I have implemented the ability to select one or more rows and have them duplicated immediately under the original row.
You may find a plunker here.
The issue arises with attempting to call the Loading Overlay on scripts.js:421 and hide in on scripts.js:438.
gridOptions.api.showLoadingOverlay();
...
gridOptions.api.hideOverlay();
If you attempt to duplicate the rows, the provided overlay does not show. If you view the console, you can see that the div.ag-bl-overlay is manipulated but the loading overlay never shows.
I have also attempted to manually force an overlay onto the grid using any outside function. This too does not display.
How do I get the loadingOverlay to display while I am inside the 'duplicateRows()' function?
I am a junior programmer and struggling with a plugin.
Everything works well except when you want to confirm all the details. The confirmation page display incorrectly and you can't see the whole page.
Any ideas to what I am doing wrong?
Here is a link to the single page with the form:
http://www.creatiffweb.co.za/emillingTester/list.html
Thanks!
I think there is a problem in your calculation of the widths array. Some child elements of your pages (the fieldset.step elements) also have the class step. That's because you are calculating too much widths and for the last page the width is too short.
This results in the page being only half displayed. Then you focus the button on the page, which is not entirely visible yet. The browser then scrolls your steps to the left to fully show the button and breaks the layout.
You should propably adjust the selector to something like the following, to only include the actual pages:
$('#steps fieldset.step').each(function(i) {
// ...
});
i am currently using angular 1.2 rc3, i used transition for my ng-repeat items.
however, i found that whenever i change my model for the ng-repeat, the transition goes haywired. You'll see the whole list of items pop down and then disappear. What i wanted to have is just a simple fade out the whole list, and fade in the new items list. How can I achieve that effect?
Here's the plunker to reproduce that: http://plnkr.co/edit/lnsxCySFGmUmAnYDqVm3?p=preview
Just add a few lines, and then change model, you'll see that weird behaviour.
Thanks.
The problem appears to be that when you are switching the list content the new elements are immediately inserted at the top and occupy some space although they are not visible yet. An improvement might be to animate the height as well see this modification of your plunker for an example.
Another solution would be to delay the enter animation when you are switching the list contents completely. First the present elements disappear and then the new ones appear. However, you will probably need an extra class attached to the whole list to make this distinction in your CSS. And you will have to manually handle the addition and removal of the class before and after your switch animation since ng-repeat does not distinguish your switch operation and the addition or removal of single elements.