Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Feb 2018
    Location
    United Kingdom
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically paginating items on a page without using tables

    Hi, I have a PHP script creating an array of divs on a page. What I want to do is paginate them in intervals of 5. I have found a script that does this, which I've put as a Codepen (original source linked in the Codepen). This script takes all items with a specified class, and dynamically paginates them as needed.

    Basic functionaloty wise, that's exactly what I need. Though right now as it is, it just keeps adding page numbers to the pagination menu. There is no back and fore arrows, last/first page and limit to how many numbers are shown between arrows etc. How can I add this this sort of functionality to the script, or is there any scripts that aren't relying on datatables or bootstrap etc? As that's all I can seem to find except for this basic script that just takes items with a particular class and paginates them without doing anything else.

    Edit: here is the code edited in:
    Code:
    //Pagination
    	pageSize = 5;
    
    	var pageCount =  $(".blog-menu-item").length / pageSize;
        
         for(var i = 0 ; i<pageCount;i++){
            
           $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
         }
            $("#pagin li").first().find("a").addClass("current")
        showPage = function(page) {
    	    $(".blog-menu-item").hide();
    	    $(".blog-menu-item").each(function(n) {
    	        if (n >= pageSize * (page - 1) && n < pageSize * page)
    	            $(this).show();
    	    });        
    	}
        
    	showPage(1);
    
    	$("#pagin li a").click(function() {
    	    $("#pagin li a").removeClass("current");
    	    $(this).addClass("current");
    	    showPage(parseInt($(this).text())) 
    	});
    Last edited by jasewolf; Jul 8th, 2018 at 06:21 AM.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,759
    Thanks
    35
    Thanked 1,041 Times in 1,037 Posts
    This shows the reason(One of them) why I hate CodePin and Fiddle around. The why I insist on posting code HERE and not in some place you use because your too lazy to download WampServer.

    You have a number of pages that don't show up.

    But the answer seems easy. Try this for adding First and Last:
    Code:
    for(var i = 0 ; i<pageCount;i++){
    	$("#pagin").append('<li><a href="#">' + First + '</a></li> ');
    	$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
    	$("#pagin").append('<li><a href="#">' + Last + '</a></li> ');
    }
    If that workss for you add the arrows.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New Coder
    Join Date
    Feb 2018
    Location
    United Kingdom
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The reason I linked a CodePen isn't because that's what I use to code instead of a proper server etc, and why I didn't post the code direct... I read the rules before posting this, and from my understanding, me posting the code of this script directly here, as it's not my script, is breaking the rules. So I linked to it where that CodePen has a link in it to where I originally got the script.

    I didn't share a link to a CodePen because I'm too lazy to post it here or because I'm too lazy to use a proper server to build/work on a site etc. I simply did because of the rules say to not copy, paste and post code that isn't your own, link to it instead. And that's what I've done.

    Sorry if CodePen links bother you so much.

    But regarding the script, adding what you've written, I can see what that's supposed to be doing, though it breaks the script for some reason.
    Last edited by jasewolf; Jul 8th, 2018 at 12:03 AM.

  4. #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,825
    Thanks
    58
    Thanked 688 Times in 683 Posts
    If you credit script found elsewhere in a post here you're fine. You need to distinguish between experimental samples and final production code, but generally speaking, any code posted on a forum like this (or SO) is intended to be used, modified, copied etc.
    You don't need a server for the example given. That code will run fine saved in an html file and accessed through any browser. If it weren't for the jQuery ( insert dearhshadow grumblings here) you wouldn't even need an Internet connection. As is, you could always save a local copy of jQuery but that would be more of an exercise and not really germane to the issue.
    Please don't just say things don't work. SHOW us what you did. Look at the error console. Think like a programmer, not an end user.
    Here are some very good guidelines about creating a post that will save everybody some time:
    https://stackoverflow.com/help/mcve
    I suspect you implemented sunfighter's code badly - it looks to me like it should work, although eyeballing it, I think I'd put the first and last links outside of the loop.

  5. #5
    New Coder
    Join Date
    Feb 2018
    Location
    United Kingdom
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yea I think it's the links being put into the loop that's the issue causing it to just break. CodePen didn't show anything error wise, but when I'm able to get on my laptop, I'll be sure to state clearer any issues. That was mostly as I posted before I knocked out the lights lol. Would be sweet if Chrome on Android had some sort of dev tools as that would save things like this, being able to see whats wrong without going on a desktop os.

    Do I just put the same exact lines as it is outside of the loop in the same sort of way you do with PHP?

  6. #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,825
    Thanks
    58
    Thanked 688 Times in 683 Posts
    yes, loops work the same (more or less) in every language I have seen:
    Code:
    $("#pagin").append('<li><a href="#">' + First + '</a></li> ');
    
    for(var i = 0 ; i<pageCount;i++){
    	$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
    }
    
    $("#pagin").append('<li><a href="#">' + Last + '</a></li> ');
    But that won't have been causing your problem - all that would have been doing would have been to make an output like

    First
    1
    Last
    First
    2
    Last
    First
    3
    Last
    First
    4
    Last

    I have never had luck getting to the actual error console on codepen, jsfiddle, etc which is one of my big reasons not to use them. I won't bother repeating my advice about running your code in the actual browser - that's where it's going to end up after all and all the debugging tools are built in, waiting for you to use them

  7. #7
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,759
    Thanks
    35
    Thanked 1,041 Times in 1,037 Posts
    ... although eyeballing it, I think I'd put the first and last links outside of the loop. ...
    We don't have an "egg on my face" icon and I sure could use one for that faux pas.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  8. #8
    New Coder
    Join Date
    Feb 2018
    Location
    United Kingdom
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Right putting those first and last appends in, in which ever way I do so, inside the loop like the first reply or outside the loop like as shown in the last but one reply... The only thing the console is saying is that First is not defined. I remove the first append, nothing changes in that having any of the appends other than the one in the loop for the numbers, breaks the script. But for some reason the Last append isn't being said is not defined. That's just crazy weird.

    The only thing I can think of is there's some conflicting going on in the script, something that's expecting just the one append fo the numbders and so adding more breaks it, but then it's not coming up with any errors except for that first is undefined which doesn't seem to be of any effect.
    Last edited by jasewolf; Jul 8th, 2018 at 08:45 PM.

  9. #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,825
    Thanks
    58
    Thanked 688 Times in 683 Posts
    Yes, of course it should be all one string. The browser is thinking that First is a variable (because that's what we're telling it...). No idea why Last is working. Should be
    Code:
    $("#pagin").append('<li><a href="#">First</a></li> ');
    
    for(var i = 0 ; i<pageCount;i++){
    	$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
    }
    
    $("#pagin").append('<li><a href="#">Last</a></li> ');

  10. #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,825
    Thanks
    58
    Thanked 688 Times in 683 Posts
    ... and that's 2 eggs for you, one for me, sunfighter :P

  11. #11
    New Coder
    Join Date
    Feb 2018
    Location
    United Kingdom
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok that was the issue the pluses. Though right now, the links just go to blank pages. So how can I set them to go to the pages the links are for, as well as hide them if there's only one page and limit the amount of page numbers listed between to 5 or so?

    Code:
    $("#pagin").append('<li><a href="#">First</a></li> ');
    $("#pagin").append('<li><a href="#"><</a></li> ');
    
    for(var i = 0 ; i<pageCount;i++){
    	$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
    }
    
    $("#pagin").append('<li><a href="#">></a></li> ');
    $("#pagin").append('<li><a href="#">Last</a></li> ');

  12. #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,825
    Thanks
    58
    Thanked 688 Times in 683 Posts
    Isn't that what the original showpage function does?
    I think it might be time for you to set up a minimal, complete and verifiable example (no php, just html and js). Chances are that in the process you'll find your own answer. If not, it will be much easier for us to see what's going on as opposed to guessing our way through

  13. #13
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,091
    Thanks
    4
    Thanked 448 Times in 437 Posts
    Silly question, but if you have PHP able to deliver these from the server, why are you pissing on accessibility and possibly wasting bandwidth trying to paginate them client-side?!?

    I mean the bloated train wreck of how NOT to write JavaScript that is jQuery is bad enough, without doing something client-side that doesn't belong client-side!
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  14. #14
    New Coder
    Join Date
    Feb 2018
    Location
    United Kingdom
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I actually decided JS because I wasn't aware I could do it without any sort of database use with PHP. But on WebDesignerForum, someone was straight off the bat with showing how I do it with PHP, mainly because they weren't aware of doing it via JS.

    Doing as much as I can without JS is what I prefer, but I just getting myself completely lost with this bit how I could use PHP to without a database. But I got that done. Now I just need to work out polishing things out with that plus making it much more appealing too.

    I did think that it may possibly be not that much of an issue if I did do via JS as the main load eating thing, the images, I have them lazy loading, so even with trillions of results, it still loaded as quick (on 2mbit connection) because the images won't load until after the page has loaded or until they're scrolled into view if not in view.

    But then I guess as I add more actual stuff rather than just repeat my array, maybe that would actually be a different case where it's all different infornation for each rather than just duplicated for testing etc.

    But regarding that JS script, I did play about with simply doing in simple html/css/js enviroment without any php. I don't know what the issue is if that script is supposed to be making those appends links without adding anything self but aren't.. Still interested in seeing how I can work that out, but I'm glad that is another thing that have gotten mostly all sorted server side now anyway.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •