Bootstrap Paginations:

Circular Pagination for Tables using Bootstrap

Tables are usually needed on websites that do more specialized work than simple corporate websites. It is possible for these tables not to be too long with the help of pagination. In this post, we also have a circular pagination that is located at the bottom of a table. This pagination has a good appearance with other table items such as checkboxes and buttons.

Bootstrap Circular Pagination

Simple Javascript Pagination

Responsive Circular Pagination

Table Pagination Code

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <span class="navbar-brand">Bootstrap Table Panel</span>
                </div>
                <p class="navbar-text">With pagination, checkbox column, toggle-filtering and add/edit/delete row
                    placeholders.</p>
            </div>
        </nav>
    </div>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default panel-table">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col col-xs-6">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="col col-xs-6 text-right">
                            <div class="pull-right">
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-success btn-filter active" data-target="completed">
                                        <input type="radio" name="options" id="option1" autocomplete="off" checked>
                                        Completed
                                    </label>
                                    <label class="btn btn-warning btn-filter" data-target="pending">
                                        <input type="radio" name="options" id="option2" autocomplete="off"> Pending
                                    </label>
                                    <label class="btn btn-default btn-filter" data-target="all">
                                        <input type="radio" name="options" id="option3" autocomplete="off"> All
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <table id="mytable" class="table table-striped table-bordered table-list">
                        <thead>
                        <tr>
                            <th class="col-check"><input type="checkbox" id="checkall" onclick="test()"/></th>
                            <th class="col-tools"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
                            </th>
                            <th class="hidden-xs">ID</th>
                            <th class="col-text">Name</th>
                            <th class="col-text">Email</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr data-status="completed">
                            <td align="center"><input type="checkbox" class="checkthis"/></td>
                            <td align="center">
                                <a class="btn btn-default"><span class="glyphicon glyphicon-pencil"
                                                                 aria-hidden="true"></span></a>
                                <a class="btn btn-danger"><span class="glyphicon glyphicon-trash"
                                                                aria-hidden="true"></span></a>
                            </td>
                            <td class="hidden-xs">1</td>
                            <td>Your Name</td>
                            <td>YourName@example.com</td>
                        </tr>
                        <tr data-status="pending">
                            <td align="center"><input type="checkbox" class="checkthis"/></td>
                            <td align="center">
                                <a class="btn btn-default"><span class="glyphicon glyphicon-pencil"
                                                                 aria-hidden="true"></span></a>
                                <a class="btn btn-danger"><span class="glyphicon glyphicon-trash"
                                                                aria-hidden="true"></span></a>
                            </td>
                            <td class="hidden-xs">2</td>
                            <td>Your Name</td>
                            <td>YourName@example.com</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col col-xs-offset-3 col-xs-6">
                            <nav aria-label="Page navigation" class="text-center">
                                <ul class="pagination">
                                    <li>
                                        <a href="#" aria-label="Previous">
                                            <span aria-hidden="true">«</span>
                                        </a>
                                    </li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li>
                                        <a href="#" aria-label="Next">
                                            <span aria-hidden="true">»</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="col col-xs-3">
                            <div class="pull-right">
                                <button type="button" class="btn btn-primary">
                                    <span class="glyphicon glyphicon-plus"
                                          aria-hidden="true"></span>
                                    Add row
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <p class="navbar-text">A simple example of how-to put a bordered table within a panel. Responsive, place
                    holders in header/footer
                    for buttons or pagination.</p>
            </div>
        </nav>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.btn-group .btn {
	transition: background-color .3s ease;
}
.panel-table .panel-body {
	padding: 0;
}
.table>thead>tr>th {
	border-bottom: none;
}
.panel-footer, .panel-table .panel-body .table-bordered {
	border-style: none;
	margin: 0;
}
.panel-table .panel-body .table-bordered>thead>tr>th:first-of-type {
	text-align: center;
	width: 50px;
}
.panel-table .panel-body .table-bordered>thead>tr>th.col-tools {
	text-align: center;
	width: 120px;
}
.panel-table .panel-body .table-bordered>thead>tr>th:last-of-type, .panel-table .panel-body .table-bordered>tbody>tr>td:last-of-type {
	border-right: 0;
}
.panel-table .panel-body .table-bordered>thead>tr>th:first-of-type, .panel-table .panel-body .table-bordered>tbody>tr>td:first-of-type {
	border-left: 0;
}
.panel-table .panel-body .table-bordered>tbody>tr:first-of-type>td {
	border-bottom: 0;
}
.panel-table .panel-body .table-bordered>thead>tr:first-of-type>th {
	border-top: 0;
}
.pagination>li>a, .pagination>li>span {
	border-radius: 50% !important;
	margin: 0 5px;
}
.pagination {
	margin: 0;
}

$(document).ready(function () {
    $('.btn-filter').on('click', function () {
        var $target = $(this).data('target');
        if ($target != 'all') {
            $('.table tbody tr').css('display', 'none');
            $('.table tr[data-status="' + $target + '"]').fadeIn('slow');
        } else {
            $('.table tbody tr').css('display', 'none').fadeIn('slow');
        }
    });
    $('#checkall').on('click', function () {
        if ($("#mytable #checkall").is(':checked')) {
            $("#mytable input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });
        } else {
            $("#mytable input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.btn-group .btn {
	transition: background-color .3s ease;
}
.panel-table .panel-body {
	padding: 0;
}
.table>thead>tr>th {
	border-bottom: none;
}
.panel-footer, .panel-table .panel-body .table-bordered {
	border-style: none;
	margin: 0;
}
.panel-table .panel-body .table-bordered>thead>tr>th:first-of-type {
	text-align: center;
	width: 50px;
}
.panel-table .panel-body .table-bordered>thead>tr>th.col-tools {
	text-align: center;
	width: 120px;
}
.panel-table .panel-body .table-bordered>thead>tr>th:last-of-type, .panel-table .panel-body .table-bordered>tbody>tr>td:last-of-type {
	border-right: 0;
}
.panel-table .panel-body .table-bordered>thead>tr>th:first-of-type, .panel-table .panel-body .table-bordered>tbody>tr>td:first-of-type {
	border-left: 0;
}
.panel-table .panel-body .table-bordered>tbody>tr:first-of-type>td {
	border-bottom: 0;
}
.panel-table .panel-body .table-bordered>thead>tr:first-of-type>th {
	border-top: 0;
}
.pagination>li>a, .pagination>li>span {
	border-radius: 50% !important;
	margin: 0 5px;
}
.pagination {
	margin: 0;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <span class="navbar-brand">Bootstrap Table Panel</span>
                </div>
                <p class="navbar-text">With pagination, checkbox column, toggle-filtering and add/edit/delete row
                    placeholders.</p>
            </div>
        </nav>
    </div>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default panel-table">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col col-xs-6">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="col col-xs-6 text-right">
                            <div class="pull-right">
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-success btn-filter active" data-target="completed">
                                        <input type="radio" name="options" id="option1" autocomplete="off" checked>
                                        Completed
                                    </label>
                                    <label class="btn btn-warning btn-filter" data-target="pending">
                                        <input type="radio" name="options" id="option2" autocomplete="off"> Pending
                                    </label>
                                    <label class="btn btn-default btn-filter" data-target="all">
                                        <input type="radio" name="options" id="option3" autocomplete="off"> All
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <table id="mytable" class="table table-striped table-bordered table-list">
                        <thead>
                        <tr>
                            <th class="col-check"><input type="checkbox" id="checkall" onclick="test()"/></th>
                            <th class="col-tools"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
                            </th>
                            <th class="hidden-xs">ID</th>
                            <th class="col-text">Name</th>
                            <th class="col-text">Email</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr data-status="completed">
                            <td align="center"><input type="checkbox" class="checkthis"/></td>
                            <td align="center">
                                <a class="btn btn-default"><span class="glyphicon glyphicon-pencil"
                                                                 aria-hidden="true"></span></a>
                                <a class="btn btn-danger"><span class="glyphicon glyphicon-trash"
                                                                aria-hidden="true"></span></a>
                            </td>
                            <td class="hidden-xs">1</td>
                            <td>Your Name</td>
                            <td>YourName@example.com</td>
                        </tr>
                        <tr data-status="pending">
                            <td align="center"><input type="checkbox" class="checkthis"/></td>
                            <td align="center">
                                <a class="btn btn-default"><span class="glyphicon glyphicon-pencil"
                                                                 aria-hidden="true"></span></a>
                                <a class="btn btn-danger"><span class="glyphicon glyphicon-trash"
                                                                aria-hidden="true"></span></a>
                            </td>
                            <td class="hidden-xs">2</td>
                            <td>Your Name</td>
                            <td>YourName@example.com</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col col-xs-offset-3 col-xs-6">
                            <nav aria-label="Page navigation" class="text-center">
                                <ul class="pagination">
                                    <li>
                                        <a href="#" aria-label="Previous">
                                            <span aria-hidden="true">«</span>
                                        </a>
                                    </li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li>
                                        <a href="#" aria-label="Next">
                                            <span aria-hidden="true">»</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="col col-xs-3">
                            <div class="pull-right">
                                <button type="button" class="btn btn-primary">
                                    <span class="glyphicon glyphicon-plus"
                                          aria-hidden="true"></span>
                                    Add row
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <p class="navbar-text">A simple example of how-to put a bordered table within a panel. Responsive, place
                    holders in header/footer
                    for buttons or pagination.</p>
            </div>
        </nav>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    $('.btn-filter').on('click', function () {
        var $target = $(this).data('target');
        if ($target != 'all') {
            $('.table tbody tr').css('display', 'none');
            $('.table tr[data-status="' + $target + '"]').fadeIn('slow');
        } else {
            $('.table tbody tr').css('display', 'none').fadeIn('slow');
        }
    });
    $('#checkall').on('click', function () {
        if ($("#mytable #checkall").is(':checked')) {
            $("#mytable input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });
        } else {
            $("#mytable input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS