content logo

Bootstrap Buttons:

Bootstrap Show Next Item Title in Pagination Button

Separating the content of the website is one of the most interesting elements of any page. If you like to engage your visitors, it is better to do so. This post contains the Bootstrap Show Next Item Title in Pagination Button that has the same purpose. If you choose this Bootstrap Pagination Button, you can increase the attraction of your page. As a result, you will increase the number of your users. This HTML Next Button Code helps you to improve your page in a short time.

As you see in the preview of the JavaScript Pagination Button, this code has a simple design with blue text. You can see some titles on the right side of the page and there are two fields on the left side. All of these sections in this Next Item Button Code have a blue color. Two fields on the left side are designed for moving to the next and previous title. If you click on the “Next” button, you will move forward and see the next page. As you choose the “Prev” category, you can see the previous text easily. The color of the selected title is blue and after clicking, it changes to red.

#

Bootstrap Pagination Button

#

HTML Next Button Code

#

Javascript Pagination Button

#

Next Item Button Code

<!-- This script got from frontendfreecode.com -->
<div class="container-fluid container-fluid-max-xl mt-5">
    <div class="row">
        <div class="col-8">
            <div class="btn-group">
                <button id="btnPrevTab" type="button" class="btn btn-outline-primary text-left">
                    <div>Prev</div>
                    <div class="btn-text"></div>
                </button>
                <button id="btnNextTab" type="button" class="btn btn-outline-primary text-right">
                    <div>Next</div>
                    <div class="btn-text"></div>
                </button>
            </div>
        </div>
        <div class="col-4">
            <ul class="nav nav-stacked">
                <li class="nav-item"><a class="active nav-link" href="#1">Details</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Categorization</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Site Template</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Configuration</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Identification</a></li>
            </ul>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.active {
  color: red;
}
.btn .btn-text {
  font-size: 13px;
  color: #00748b;
  text-decoration: none;
}
.btn:hover .btn-text {
  text-decoration: underline;
}
/**** Variables ****/
var tocTabs = $('ul li a');
var pageSize = 1;
var currentPage = 1;
var pagedResults = [];
var totalResults = tocTabs.length;
var fullFace = Math.max(document.documentElement.clientWidth, window.innerWidth);
var total = tocTabs.length;
var selected = $("ul li.active");
/**** Functions ****/
function updateList() {
    // Grab the required section of results from the tocTabs list
    var end = currentPage * pageSize;
    var start = end - pageSize;
    pagedResults = tocTabs.slice(start, end);
    // Disable the previous button if we are on the first page
    if (currentPage <= 1) {
        $("#btnPrevTab").prop("disabled", true);
        $("#btnPrevTab").find('.btn-text').text('');
    } else {
        // Enable the previous button if we are not on the first page
        $("#btnPrevTab").prop("disabled", false);
        var previous = $('ul').find('a.active').closest('li').prev().find('a').text();
        $("#btnPrevTab").find('.btn-text').text(previous);
    }
    // Disable the next button if we are on the last page
    if (currentPage * pageSize >= totalResults) {
        $("#btnNextTab").prop("disabled", true);
        $("#btnNextTab").find('.btn-text').text('');
    } else {
        // Enable the next button if we are not on the last page
        $("#btnNextTab").prop("disabled", false);
        var next = $('ul').find('a.active').closest('li').next().find('a').text();
        $("#btnNextTab").find('.btn-text').text(next);
    }
}
/**** On Page Load ****/
$(function () {
    updateList();
    $('#btnPrevTab').on('click', function () {
        $(".nav-stacked").find("a.nav-link.active").removeClass('active').parent().prev("li").find("a.nav-link").addClass('active');
        if (currentPage > 1) currentPage--;
        updateList();
        // alert('previous');
    });
    $('#btnNextTab').on('click', function () {
        $(".nav-stacked").find("a.nav-link.active").removeClass('active').parent().next("li").find("a.nav-link").addClass('active');
        if ((currentPage * pageSize) <= totalResults) currentPage++;
        updateList();
        // alert('next');
    });
});
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@clayui/css@3.0.0/lib/css/atlas.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/clay/lib/js/clay.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@clayui/css@3.0.0/lib/css/atlas.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/clay/lib/js/clay.js'></script>
<style>
.active {
  color: red;
}
.btn .btn-text {
  font-size: 13px;
  color: #00748b;
  text-decoration: none;
}
.btn:hover .btn-text {
  text-decoration: underline;
}
</style>

</head>
<body>
<div class="container-fluid container-fluid-max-xl mt-5">
    <div class="row">
        <div class="col-8">
            <div class="btn-group">
                <button id="btnPrevTab" type="button" class="btn btn-outline-primary text-left">
                    <div>Prev</div>
                    <div class="btn-text"></div>
                </button>
                <button id="btnNextTab" type="button" class="btn btn-outline-primary text-right">
                    <div>Next</div>
                    <div class="btn-text"></div>
                </button>
            </div>
        </div>
        <div class="col-4">
            <ul class="nav nav-stacked">
                <li class="nav-item"><a class="active nav-link" href="#1">Details</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Categorization</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Site Template</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Configuration</a></li>
                <li class="nav-item"><a class="nav-link" href="#1">Identification</a></li>
            </ul>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
/**** Variables ****/
var tocTabs = $('ul li a');
var pageSize = 1;
var currentPage = 1;
var pagedResults = [];
var totalResults = tocTabs.length;
var fullFace = Math.max(document.documentElement.clientWidth, window.innerWidth);
var total = tocTabs.length;
var selected = $("ul li.active");
/**** Functions ****/
function updateList() {
    // Grab the required section of results from the tocTabs list
    var end = currentPage * pageSize;
    var start = end - pageSize;
    pagedResults = tocTabs.slice(start, end);
    // Disable the previous button if we are on the first page
    if (currentPage <= 1) {
        $("#btnPrevTab").prop("disabled", true);
        $("#btnPrevTab").find('.btn-text').text('');
    } else {
        // Enable the previous button if we are not on the first page
        $("#btnPrevTab").prop("disabled", false);
        var previous = $('ul').find('a.active').closest('li').prev().find('a').text();
        $("#btnPrevTab").find('.btn-text').text(previous);
    }
    // Disable the next button if we are on the last page
    if (currentPage * pageSize >= totalResults) {
        $("#btnNextTab").prop("disabled", true);
        $("#btnNextTab").find('.btn-text').text('');
    } else {
        // Enable the next button if we are not on the last page
        $("#btnNextTab").prop("disabled", false);
        var next = $('ul').find('a.active').closest('li').next().find('a').text();
        $("#btnNextTab").find('.btn-text').text(next);
    }
}
/**** On Page Load ****/
$(function () {
    updateList();
    $('#btnPrevTab').on('click', function () {
        $(".nav-stacked").find("a.nav-link.active").removeClass('active').parent().prev("li").find("a.nav-link").addClass('active');
        if (currentPage > 1) currentPage--;
        updateList();
        // alert('previous');
    });
    $('#btnNextTab').on('click', function () {
        $(".nav-stacked").find("a.nav-link.active").removeClass('active').parent().next("li").find("a.nav-link").addClass('active');
        if ((currentPage * pageSize) <= totalResults) currentPage++;
        updateList();
        // alert('next');
    });
});
</script>

</body>
</html>
Preview