Pagination with lot of pages - javascript

Hi i got a question about pagination. First of all, im new at html and javascript.
Ok, here is my doubt. Im building a website from cero. Im not using any web editor.
I filled the index.html with enough content (based on what i think is enough).
Now i want to add a new page with new content, and this page will be my new index.html, and the first index.html will be page-2.html (for example).
And I will be adding a new page like every 3 days, so what happens when I got more than 30 or 40 pages?
I know how to do a pagination, but i want to know if there`s a way to have a pagination without having to change name of pages every time?
Like a dynamic pagination or something like that. I dont know how to do it. I have been searching but I found nothing.
-Is there a way to do it with javascript?
-I donĀ“t have knowledge about PHP.
-Thanks for your answer in advance.

Consider the datatables.net library. It paginates for you: https://datatables.net/reference/api/

Only javascript solution :
You don't have to rename pages nor having multiple pages.
What you need to do is create a sinlge long pages with content separated liek this for exemple
<article>
Content 1
</article>
<article>
Content 2
</article>
...
And then simply do a pagination since you know how to do that.
And display element like, first of pagination show article 1 to 5
and display:none the other etc...
However this is clearly not a good idea mostly due to time of loading. The way you should do is to use php and sql to store your content in database and display it calling the server (with php).

Related

How to add load more pagination to blogposts in homepage on blogger?

I'm using Blogger and trying to make a Blogger speed and SEO friendly template from scratch but I have a problem with the blogposts pagination:-
I want to display all the posts in the same grid with load more posts button but without that big load slowing javascripts so the type of load more posts button that I want is just like mogu template.
No need for links Google it and you'll find it because it's the only blogger template with that name and they have it on the template's home page.
My question here is that any chance to get all posts to display as a grid with a functional load more posts pagination button like the one on mogu template and how to do it without getting big javascripts to slow my blog down ?
Sorry in advance for disturbing because I'm totally a newbie to blogger.
PS: for the Blog1 widget I'm using the default generated code once we type this:-
<b:section id='example'>
<b:widget type='Blog' id='Blog1'/>
</b:section>
Any help would be highly appreciated and thank you for reading
I have tried to use mogu template's Blog1 widget code entirely using the necessary <b:defaultmarkups> to work and it worked except for the load more posts pagination button and after a couple of tests it turns out that the pagination is connected to a hidden javascripts from the template's owners outside the given template's code.
( expected but I just checked it as I thought maybe the load more pagination javascript was there some where in the template). So I don't want to have that slow speed as it's really important for me to make it fast and seo friendly as much as possible and also according to my blog design to make my project works

How to create multiple Html subpages without writing redundant code?

everyone currently I am working on a project which a Financial web application. But as I'm moving forward code redundancy is increasing & particularly for HTML code.
I have multiple Html pages on my website such as Dashboard, EditProfile, AccountStatistics, etc. For Eg.
DashBorad - enter image description here
EditProfile - enter image description here
AccountStats - enter image description here
Now judging from the above pics you guys can see every time we navigate from one page to another only the main section content is changing but the body structure & design of the website remains the same.
Problem: If i want to create a new page I have to include code for header, sub-header, sideBar, footer which is repetitive. I just want the main-section code to change. For eg - Made one file like Body.html which contains code for header, sidebar, etc & every time I want to create a new page then only code for the main-section has to written which be can later merge with the body.
How can we achieve this?
(Tech used - Html, Css & JavaScript)
Note: I can also attach code if anyone wants more clear understanding!
Thank You!
Cheers to coding :)
You can use Frontend Frameworks like React/Vue.
Depending on if it's a static site, you can use stuff like Jekyl/Hugo.
If you want to go the SSR way, then you have Angular Universal/ ASP.NET Core/ PHP way.
Depending on your use case, you can't really go wrong either way. If you're new, pick either one and get started Learning.
Have fun!
This is an excellent use-case for a library like ReactJS (and other similar alternatives). Using React you can define 'components' for your header, sidebar and other common parts of your webpages that can be reused in different places. You can also update each of these components separately.

How do I "load" another HTML file?

Hey so I'm making some software that will have 4 different steps.
load
edit item 1
edit item 2
submit to an online storage
Since item 1 and item 2 are large items to be edited I wanted a separate page.
I also wanted a separate page to submit both items so they know it's being submitted and user receives further instructions.
I used to just let it just redirect the user to the next page, but I found it took 2-5 seconds to load each page, and I rather have it a fluid process.
Since Im using electron.js I am using require to load the JS part of the webpages.
But cant find a way to load the HTML and load the JS parts that effect the HTML (JS needs the webpage's DOM).
I've attempted using Jquery but all I accomplished was getting the html in a string format.
Been trying to find a way to use ajax, but so far everywhere I've looked its for including the html into a different html page.
I am new to both Jquery and ajax and just looked at them today. So maybe I am missing something about them. But cannot find any tutorials/documentary for loading another page.

With AJAX, fetch only new(append) content from either div, mysql, or json

I know the title sounds exactly like other questions asked about this, but I've checked about ten pages deep into Google on various searches and can't find an answer. I've seen a few answers on other stack overflow questions that look like it may come close but I'm not sure how to implement what they're saying.
Currently I have this script, but it fetches the whole page of data.php.
<script type = "text/javascript" src="jquery-3.2.1.min.js"></script>
<script type ="text/javascript">
$(document).ready(function() {
setInterval(function() {
$('#show').load('data.php')
}, 5000);
});
</script>
Data.php is a page with a constantly changing list. I'm trying to get the list to update in real time, so my idea was to fetch it from another page. I'm not too familiar with Javascript since I'm more of a PHP/Python kind of guy. What I'd like it to do is append new DIVs from data.php or MySQL rows/JSON/whatever works, to the top of the list.
My problem with this is that it fetches the entire page, which is hard because some of the DIV's have media, which is a no go for refreshing the whole page. This code is also ridiculous because when you load the page up, it will show a blank white page until the it reaches the time shown. I'm just trying to have it append new DIVs with PHP generated code to the top of the page in real time, OR if I can somehow do it via MySQL or JSON I'm open to doing that as well. I'm not bad with PHP/MySQL/Python, but I'm new to JS if anyone can help. This is a personal project of mine but it's going to be for something that everyone can use online(for free). Thanks!

Google "Sitelinks" for a website with almost only dynamic content?

I have a classifieds website, and the index.html is just going to be a simle form, which uses javascript alot to populate drop lists etc...
I have a menu also, put into a div container, but is this enough?
I mean, I have no content in index.html (almost), but a search form, which submits to a search results page, where all the content is.
So I am worried google might not find suitable sitelinks for my site?
Anybody know if I need to add something to the links in the index.html, which google might use for sitelinks? title tags etc...?
Thanks
Instead of changing your site around you can just create a good sitemap.xml file. That is of course if you're using GET for transferring data to your processing page. I would create a dynamic sitemap.xml page that is based on the form data that your processing page can read.
http://sitemaps.org/
http://www.smart-it-consulting.com/article.htm?node=133&page=37

Categories