Paginating: Restrict the page number for smaller screens

When viewing on a small screen device (> 641 px), my pagination should resemble https://i.sstatic.net/dSSUX.png

Conversely, on screens that are medium-sized and larger (< 641 px), the pagination should appear as shown here: https://i.sstatic.net/C1EXv.png

I am utilizing the 'paginga - jQuery Pagination Plugin v0.8.1' along with some custom jQuery code to achieve this functionality. However, I'm facing difficulty in producing the desired outcome. Can anyone provide assistance? The plugin code is displayed below.

(function ($, window, document, undefined)
{
    "use strict";

        var pluginName = "paginga",
            defaults = {
                itemsPerPage: 3,
                ... (other default settings omitted for brevity) ...
                                
            };

        // Plugin constructor
        function paginga(element, options)
        {
            ... (constructor logic omitted for brevity) ...
                                
        }

        $.extend(paginga.prototype,
        {
            init: function()
            {
                ... (initialization logic omitted for brevity) ...
          
            },
           ... (remaining methods omitted for brevity) ...

})(jQuery, window, document);

Below is the custom jQuery code written:

$(document).ready(function () {
    var windowWidth = $(window).width();
    if (windowWidth < 641) {
        $(".paginate").paginga({
            itemsPerPage: 2,
            maxPageNumbers: 2,
            page: 1
        });
    }
    else {
        $(".paginate").paginga({
            itemsPerPage: 2,
            maxPageNumbers: 6
        });
    }
    $( window ).resize(function() {
        if (windowWidth < 641) {
            $(".paginate").paginga({
                itemsPerPage: 2,
                maxPageNumbers: 2
            });
        }
        else {
            $('.pager').load();
            $(".paginate").paginga({
                itemsPerPage: 6,
                maxPageNumbers: 6
            });
        }
    });

});

Answer №1

Have you attempted updating the 'windowWidth' value when the resize event occurs? It's challenging to provide a definitive solution without seeing how pagination is generated in your unique scenario, but incorporating this change may be beneficial. Feel free to reach out if this doesn't address the issue.

$( window ).resize(function() {
    windowWidth = $(window).width(); //inserting this line of code
    if (windowWidth < 641) {
        $(".paginate").paginga({
            itemsPerPage: 2,
            maxPageNumbers: 2
        });
    }
    else {
        $('.pager').load();
        $(".paginate").paginga({
            itemsPerPage: 6,
            maxPageNumbers: 6
        });
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to add a listener for a modification of innerHTML within a <span>?

How can I detect changes inside a particular <span> element in order to attach a handler, but so far have been unsuccessful? Below is the HTML snippet: <span class="pad-truck-number-position"><?php echo $_SESSION['truckId']; ?> ...

Shift the image closer to the top of the sidebar next to the header

I am seeking to adjust the positioning of my circular image in the sidebar so that it aligns with my name in the header. The contact and tech skills sections may also require some tweaking. Although I have a grasp of the concepts of absolute and relative, ...

Limit the number of browser tabs in which users can access the Web Application Options Link

Our online B2B application, developed using ASP.NET webforms on .Net framework 4.7.2, needs to limit users to opening only 3 to 4 tabs in their browser simultaneously. This restriction is necessary to manage server load due to a large number of active user ...

Show angular variable data in a table based on their index

I have an array of angular variables with values like [ 170, 1, 130, 3, 134, 4.... and so on]. I would like to present these values in a table format where the even positioned values are shown in one column and the odd positioned values in another column. ...

Unable to delete the margin of Material-ui TextField

Having trouble removing the padding around material-ui's TextField component when using styled-components and inline styling. Any solutions to this issue? Interestingly, the inline width property is functioning correctly, unlike the styled-component w ...

Utilizing Jquery to transform characters into visual representations

Do you think it is wise to utilize a jQuery function that replaces each character in a text with custom character images? For instance, when using the function, you need to specify which element you would like the characters replaced in, and jQuery will d ...

Extract the content from the division and set it as the image source

Looking for a way to retrieve the content from a div and insert that into the 'src' parameter of an image. Working on a project where JSON is used to load translation files, preventing me from loading images directly, but I want to at least load ...

Tips for seamlessly integrating full-size images into the slider?

I'm a beginner when it comes to CSS and I am having trouble fitting two images inside my first slider. My goal is to display the full images within the slider, but the width of the images exceeds that of the slider. Below is the CSS code for the slid ...

Leveraging the power of Ajax to dynamically submit a single form nested within a forEach iteration

I'm currently working on a database query that retrieves all user posts. This query is then used in a forEach loop to generate a post for each result: for($indexPost=0; $indexPost < $postCount; $indexPost++) { //Code for handling the post echo&l ...

Enhancing jquery datatable functionality with data-* attributes

I successfully added an id to each row of my data table using the rowId property, as outlined in the documentation. $('#myTable').DataTable( { ajax: '/api/staff', rowId: 'staffId' } ); Now I am wondering how I can ad ...

Using conditional statements like 'if' and 'else' in JavaScript can

Can someone help me with solving my problem using if-else statements in Javascript? I need to filter names by gender and save them as keys - woman / man in local storage. Any assistance would be greatly appreciated. I am struggling to figure out how to im ...

Is there a way to convert this JSON object into HTML table code?

I've been working on tweaking a code snippet I came across, but I'm struggling to get it to function the way I desire. Here is the current Javascript code: function JsonUtil() { /** * Given an object, * return its type as a string. ...

What steps should be taken to incorporate a user input space similar to the one found in the Wordpress new post section

I am looking to incorporate a user input section on my website similar to the one found in WordPress for creating new posts. I would like this area to have all of the same tools available, such as adding hyperlinks, bolding text, and uploading images. Ca ...

How can you create a blurred effect on a navbar?

Looking to achieve a unique blur effect in the background of my navbar component. The standard CSS blur effect isn't giving me the desired result, so I'm seeking some guidance on how to customize it. For example: https://i.sstatic.net/bPEXZ.png ...

Creating a Border Length Animation Effect for Button Hover in Material-UI

I'm currently exploring Material-UI and trying to customize a component. My goal is to add a 'Border Length Animation' effect when hovering over the button. Unfortunately, I have yet to successfully implement this animation as intended. For ...

Using jQuery to retrieve a List<> from an ASP.NET WebService

This is my WebService Method: [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string retrieveImages() { DBservices DBS = new DBservices(); List<string> ImageUrls = new List<string>(); try { DBS.g ...

Customize Material UI components by incorporating SASS classes

Currently, I am using Material UI components but I want to streamline my styles by moving them all into a .scss file. Right now, I have a significant styles object within the same JavaScript file where I am utilizing the Material UI components. This styles ...

Can the hasClass() function be applied to querySelectorAll() in JavaScript?

As a beginner in javascript and jquery, I recently attempted to manipulate classes using the following code snippet: if ($(".head").hasClass("collapsed")) { $(".fas").addClass("fa-chevron-down"); $(".fas&qu ...

The white background of the .jpg image is conflicting with the white background of the HTML

My website has a top-of-page .jpg image that was created with a white background. However, when using the img src="topOfEveryPageImage.jpg" tag, the white background of the image appears visually different from the rest of the solid white background on the ...

Adjust font size using jQuery and CSS styles

I'm currently working on a website where the body has a specified font-size property that is inherited by all elements on the page. Some tags on the page have font-sizes specified in percentages (%). Others are assigned sizes in pixels (px). I&apos ...