We Keep Coding

modifying HTML page "on the fly"

I looked at "Generating HTML Page on the fly" on this website, but most of it was over my head.
I have a 2 part question that I would like assistance with please.
I want to fill a narrow vertical container, <div id=”counter”> with the numbers 1 .. <xx>.
<xx> is determined by the record count of a database, filtered “on-the-fly”, by the user choosing a category (no problem there – I have an SQL background)
Eg. Category1: 1 .. 200
Category2: 1 .. 6
These numbers could change over time, as I want to allow users to add content to the database (vetted of course).
I have viewed a number of website source code pages (of similar ideas eg. Surgicalexam.com), but they have all been hard-coded and are distinct pages per category.
I have created a small website of a similar nature to that, hard-coding all the images and links, but I am looking at 3000+ images (as a starting point here), and they differ per page.
I have created this scenario many times in stand-alone apps and from past experience, I thought perhaps, I could create a javascript routine which would use a loop to
• print the numbers to the <div> using the getelementbyID ( ).
• Fill an array with the record number, a title and an image link.
Question 1: Is this possible or am I beating a “dead horse”?
If it is possible, any suggestions would be gratefully accepted.
Part 2:
My current idea is that, as the user hovers the mouse over any number, a mouseover ( ) event will occur that will read the appropriate array record and display the <title> as a tool-tip-text.
If the user clicks the number, a function (I have yet to write) will read the appropriate array record and attach the image link to an <a> tag, and subsequently display the appropriate image to the screen.
Question 2: repeat of question 1.

I have viewed a number of website source code pages (of similar ideas eg. Surgicalexam.com), but they have all been hard-coded and are distinct pages per category.
Why are you so sure about that? You can't see php-code, because it is executed on the server. There is no way to know if it was hardcoded or by php
Answer:
It is possible.
If I understand this correctly, you want to read some data from a database and if the user clicks / hovers something, you want to load more data?
You have to splitt this into two things:
Load data with PHP from the db (Server side)
If you want a live, visual feedback you need JavaScript (and/or CSS3) to do changes. (Client side)
One possible solution is to create a API with php (maybe REST-like) and then call that api with JavaScript.
You could also do everything with PHP but this will require a reload of the website on every click. PHP cannot do changes On-The-Fly.
First of all you should learn the basics about web development.
And most important: If you decide to learn Web-Programming: learn about security, too. For example things like Cross Site Scripting and SQL-Injection. Never trust data coming from a client (e.g. JavaScript)!

MongoDB - Paging with ranged queries

I am currently working on a web application with MongoDB, and it populates the browser with pages of content.
I am aware of the two methods of paging (seen here: https://scalegrid.io/blog/fast-paging-with-mongodb/):
1) .skip() + .limit()
2) .find({_id > last_id}).limit(n)
I understand the performance issues with the first solution, so that option was out of the picture.
The second solution works great, but only if the results are sorted by _id. If you sort by a non-unique field such as a date, there can be more than one document with that date so some documents may be excluded from the results.
Also, the user must be navigating through the pages linearly because there is a last_id variable that constantly needs to be updated and is determined by the _id of the last document from the previous page. If the user were to jump from page 1 to 7, page 7 would show the results meant for page 2 because the last_id would hold the _id from the last document of page 1.
So my question is, how would one implement paging if we were sorting by a non-unique field (such as a Date or a firstName), and how would we allow users to jump multiple pages at once?
Any tips would be greatly appreciate, thank you!

The comment is correct, you should be fine with skip unless you know you're going to have a lot of documents. But even if you don't expect much but then get enormously successful/popular you don't want your code to break just is it gets used by millions of users.
If you sort by date and then by id you can do the following:
.find(
{
date:{
$lte:lastDate
},
_id:{
$lt: lastId
}
}
).limit(n)

How to fix Wkhtmltopdf incorrect page count

I am trying to merge multiple bills into a single pdf. Every bill has multiple pages and every bill has unique header and footer. To print out page count I use JavaScript code from documentation example. When I build pdf from a single bill, page count is correct, but when I pass in all bills, page count is total sum of every bill page. Headers are printed ok, they are unique for every bill, only the page count is summed together. Is there a way to fix the page count?

No, because each page is processed separately. So for the first webpages you could never get the total page count correct anyways, because the other webpages are not processed yet and the footer is already on the PDFs.

Spliting a VERY long table in multiples pages html/php

here is the problem. I have no right to create a database and I receive a csv that countain MASSIVE amount of data each day. (More than 200 000 rows)
Data that I must make accessible for everybody on the intranet. So I created a simple html/php page that extract all the rows and display those informations in a table with a filter on every column with a simple fgetcsv.
Problem is that the web browser is not suited to display that much informations at the same time so it makes it crash or freeze for a while, and you can't do anything for a while.
I wanted to know if anyone knew a way to say to the page "load only the first 100 rows for exemple, then automatically create a next page that will load and display the next 100 rows etc."
I manages to DISPLAY only the first x rows and then when you clicked a button the table would expand with the next x rows, but they are still all loaded at once. The y remaining are just hidden, so the browser still dies or freeze.
Any idea ?
Thanks

It's a generic pagination question really. It doesn't matter if your data is stored in database or in a CSV file.
Just pass some offset argument to your PHP script via query string or URL rewriting and use it to select only part of your CSV list.
Like this: /big-table.php?page=3.
// Getting passed argument.
$pageNumber = (int) $_GET['page'];
// Items per page default.
$itemsPerPage = 100;
// Calculating offset.
$offset = ($pageNumber - 1) * $itemsPerPage;
Then use the $offset and $itemsPerPage to retrieve only part of your CSV file by limiting scope of your CSV parsing loop.
You can also pass items per page value as an argument to your script in order to control this value from your web interface. For example, if you want to create a dropdown menu with ability to select 10, 50, 100 items per page, etc.
And if you want it - you could always use AJAX to fetch more items dynamically, it doesn't really affect your pagination implementation server-side, only an output format (JSON instead of HTML).
Of course database implementation will work faster and I would recommend to opt for it instead if possible. And/Or you can use some caching layer to speed things up.

You could use the jquery Datatables plugin http://datatables.net/
It's quite simple to do what you want using that.
Refer to either this example: http://datatables.net/examples/data_sources/ajax.html or http://datatables.net/examples/data_sources/server_side.html

The most sensible thing is to demand database access. Right now, you're told to build a car but without using wheels and an engine.
Right now, you could use PHP to split the big csv in multiple smaller files of n rows long. You have to do this only once, or once a day/hour if the big csv is updated. Then you load each of these files only when you need them, either by navigating to another page or dynamically using Javascript.

About Angular list

I want to create a list using Angular, where the data (say like over 1000 items) is retrieved from the server using JSON call. In my plan, the list will only show x amount of items in the list, and will load x more items into it when the user pull up the list.
So my question here is, how to write the expression for the ng-repeat so that
It will only show x amount of items when first loading the list
It will only load x amount of items when user pulled up the list
I think i read somewhere about ngRepeat being able to do this kind of feature, to limit and control the amount of items shown or loaded onto the list, but i forgot where i read it.
But someone told me that better way of doing this is by limiting the amount of data retrieved when using JSON call rather than letting Angular do it.
So i'm kind of confuse in here.

Take a look at ngInfiniteScroll http://binarymuse.github.io/ngInfiniteScroll/.
Last fall, i want to use a similar solution and ended up there.