How to change the item per page count according to windows size

I have a list of items which initially shows 12 items per page, I wanted to implement some more responsiveness to my page. When i’m resizing the window size or for using differnt devices i need to show the items according to that window size.

I have tried to get current window siz using window.innerwidth by using ifelse for variation. How can i pass the count variable to my itemsPerPage.

Here is my JS Code. (Tried this after the suggestion frm the comment)

var detect = function (width) {
      var count;
      if (width < 576) {
           count = 6;
      } else if (width >= 576 && width < 768) {
            count = 8;
      } else if (width >= 768 && width < 992) {
            count = 12;
      } else if (width >= 992) {
            count = 16;
      }
  }

$(function () {
    $("#content")
        .flexiblePagination({
            //I wanted to change this itemperPage value according to my window size
            itemsPerPage: count,
            displayedPages: 4,
            itemSelector: "div.result:visible",
            pagingControlsContainer: "#pagingControls",
            showingInfoSelector: "#showingInfo",
            searchBox: { onClick: !0, onClickSelector: "#search" },
        })
        .getController().onPageClick = function (s, n) {
        console.log("You Clicked Page: " + s);
    };
});

$(document).ready(function() {
var width = window.innerWidth;
detect(width) $(window).resize(function() {
    var width = window.innerWidth;
    detect(width)
});

});

Its not working what’s the issue here.

Answer

First window.innerWidth should be used to calculate itemsPerPage.

You have already created the detect(width) function to calculate it.

However it had an issue that count variable is declared inside detect function and is not visible (and can’t be used) outside. The simplest way to use the result of detect function is to add return statement.

const detect = function (width) {
        let count;
        if (width < 576) {
            count = 6;
        } else if (width >= 576 && width < 768) {
            count = 8;
        } else if (width >= 768 && width < 992) {
            count = 12;
        } else if (width >= 992) {
            count = 16;
        }
        return count;
}

Now we can call detect(window.innerWidth) when we initialize pagination component to get corresponding itemsPerPage.

Let’s move pagination setup into a separate function for re-use.

function setupPagination() {
    $("#content")
        .flexiblePagination({
            itemsPerPage: detect(window.innerWidth), // calculate using detect()
            displayedPages: 4,
            itemSelector: "div.result:visible",
            pagingControlsContainer: "#pagingControls",
            showingInfoSelector: "#showingInfo",
            searchBox: { onClick: !0, onClickSelector: "#search" },
        })
        .getController().onPageClick = function (s, n) {
        console.log("You Clicked Page: " + s);
    };
}

The setupPagination function needs to be called during initial load and when window is resized to update the settings.

Something like this:

$(document).ready(function() {
    setupPagination();
    
    $(window).resize(function () {
        setupPagination();
    });
});

However when testing this I’ve discovered that pagination plugin removes some items from content div when called. It’s quite unpleasant but we can have backup of content div HTML ($('#content').html()) and restore it when window gets resized and we need to call pagination plugin again.

$(document).ready(function() {
    const backup = $('#content').html(); // plugin kills content, keep backup
    setupPagination();
    
    $(window).resize(function () {
        $('#content').html(backup); // restore content
        setupPagination();
    });
});

See working example bellow:

const detect = function (width) {
        let count;
        if (width < 576) {
            count = 6;
        } else if (width >= 576 && width < 768) {
            count = 8;
        } else if (width >= 768 && width < 992) {
            count = 12;
        } else if (width >= 992) {
            count = 16;
        }
        return count;
}

function setupPagination() {
    $("#content")
        .flexiblePagination({
            itemsPerPage: detect(window.innerWidth), // calculate
            displayedPages: 4,
            itemSelector: "div.result:visible",
            pagingControlsContainer: "#pagingControls",
            showingInfoSelector: "#showingInfo",
            searchBox: { onClick: !0, onClickSelector: "#search" },
        })
        .getController().onPageClick = function (s, n) {
        console.log("You Clicked Page: " + s);
    };
}

$(document).ready(function() {
    const backup = $('#content').html(); // plugin kills content, keep backup
    setupPagination();
    
    $(window).resize(function () {
        $('#content').html(backup); // restore content
        setupPagination();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/content-paginator-flexiblepaginationjs/Flexible.Pagination.js"></script>

<input type="text" id="search">
<div id="content">
    <div>
    <div class="result">Item 1</div>
    <div class="result">Item 2</div>
    <div class="result">Item 3</div>
    <div class="result">Item 4</div>
    <div class="result">Item 5</div>
    <div class="result">Item 6</div>
    <div class="result">Item 7</div>
    <div class="result">Item 8</div>
    <div class="result">Item 9</div>
    <div class="result">Item 10</div>
    <div class="result">Item 11</div>
    <div class="result">Item 12</div>
    <div class="result">Item 13</div>
    <div class="result">Item 14</div>
    <div class="result">Item 15</div>
    <div class="result">Item 16</div>
    <div class="result">Item 17</div>
    <div class="result">Item 18</div>
    <div class="result">Item 19</div>
    <div class="result">Item 20</div>
    <div class="result">Item 21</div>
    <div class="result">Item 22</div>
    <div class="result">Item 23</div>
    <div class="result">Item 24</div>
    </div>
</div>
<div id="pagingControls"></div>
<div id="showingInfo"><div>