Jquery Next previous buttons not stopping when there is no item at end

Question

Fiddle: http://jsfiddle.net/dpD56/4

I am adding a Next Previous button in a list to split the list into parts.

Here is the HTML:

<ul id="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
</ul>

<button id="prev" type='button'>prev</button>
<button id="more" type='button'>next</button>

And I am using the following js code to make working Next Previous buttons.

Here is JS:

var pageNumber = 1;
$(document).ready(function () {
    showPage(pageNumber);

    $('#prev').click(function () {
       pageNumber--;
       showPage(pageNumber);
    });

    $('#more').click(function () {
       pageNumber++;
       showPage(pageNumber);
    });

    $('#goto').click(function () {
       pageNumber = +$("#page").val();

       if (!pageNumber) {
            pageNumber = 1;   
       }

       showPage(pageNumber);
    });
});

function showPage(page) {
    var start = (5 * page) - 5;
    var showListItems = $("#test li").splice(start, 5);

    console.log(start, showListItems);

    $("#test li").hide();
    $(showListItems).show();
}

This code is working fine for Next & Previous buttons, but Next and Previous buttons are not stopping when there is no more items at end.

Next button should be disabled or should not working when there is no more item after last item and Previous button should also stop working when there is no previous item or it should be disabled when there is no more items.

But these buttons are performing their functions even if there is no more items and they are showing blank page with the NEXT PREVIOUS BUTTON.

Answer 1

Please find a working solution below:

const ITEMS_PER_PAGE = 5;

var pageNumber = 1;
var totalNumberOfPages;

$(document).ready(function () {
    totalNumberOfPages = $("#test").find("li").length;
    console.log(totalNumberOfPages);

    showPage(pageNumber);

    $('#prev').click(function () {
       pageNumber--;
       showPage(pageNumber);
    });

    $('#more').click(function () {
       pageNumber++;
       showPage(pageNumber);
    });

    $('#goto').click(function () {
       pageNumber = +$("#page").val();

        if (!pageNumber) {
            pageNumber = 1;   
        }

        showPage(pageNumber);
    });
});

function showPage(page) {
    var start = (ITEMS_PER_PAGE * page) - ITEMS_PER_PAGE;
    var showListItems = $("#test li").splice(start, ITEMS_PER_PAGE);

    if (start == 0) {
        $("#prev").prop('disabled', true);
    } else {
        $("#prev").prop('disabled', false);
    }

    if (start >= totalNumberOfPages - ITEMS_PER_PAGE) {
        $("#more").prop('disabled', true);
    } else {
        $("#more").prop('disabled', false);
    }

    console.log(start, showListItems);

    $("#test li").hide();
    $(showListItems).show();
}

I've added some checks to disable the previous and next buttons when we are on the first and last pages.

Besides, since 5 was used many times I moved it into a constant. This way, it's much easier to see what is this 5 for and you can change the number of images per page only by changing the value of the constant.

UPDATE:

function showPage(page) {
    var start = (ITEMS_PER_PAGE * page) - ITEMS_PER_PAGE;
    var showListItems = $("#test li").splice(start, ITEMS_PER_PAGE);

    if (start == 0) {
        $("#prev").prop('disabled', true);
    } else {
        $("#prev").prop('disabled', false);
    }

    if (start >= totalNumberOfPages - ITEMS_PER_PAGE) {
        $("#prev").prop('disabled', true);
        $("#more").prop('disabled', true);
    } else {
        $("#more").prop('disabled', false);
    }

    console.log(start, showListItems);

    $("#test li").hide();
    $(showListItems).show();
}

Or you can just disable the two buttons by putting these two lines into the event handler of the Send button:

        $("#prev").prop('disabled', true);
        $("#more").prop('disabled', true);

Answer 2

Here's your solution:

Firstly, give an id to the first element of your list:

<ul id="test">
    <li id="firstLi">1</li>
    <li>2</li>

Then, in the showPage() function, you need to check the size of the showListItems, compare it with the size of $(#test li) and disable the buttons accordingly:

function showPage(page) {
    var start = (5 * page) - 5;
    var showListItems = $("#test li").splice(start, 5);

    if(showListItems.length < 5) {
        $('#more').prop('disabled', true);
        $("#test li").hide();
        $(showListItems).show();
    } else {
        if(showListItems[0].id === 'firstLi') {
            $('#prev').prop('disabled', true);
        }
        if($("#test li").length === (page * 5 )) {
            $('#more').prop('disabled', true);
        }
        $("#test li").hide();
        $(showListItems).show();
    }
    console.log(start, showListItems);    
}

Finally, you need to enable the buttons. You can do this in different ways, but I chose this way:

Enable the prev button when next button is clicked, and vice versa.

$('#prev').click(function () {
    pageNumber--;
    showPage(pageNumber);
    if($('#more').prop('disabled')) {
        $('#more').prop('disabled', false);
    }
});

$('#more').click(function () {
    pageNumber++;
    showPage(pageNumber);
    if($('#prev').prop('disabled')) {
        $('#prev').prop('disabled', false);
    }
});