1621838269
A Python Tool for The Generation Of Geological Data Of Minerals
Open-source, Python-based tool for the synthetic generation of geological data with focus on minerals, rocks and stratigraphy.
GebPy
developed by Maximilian A. Beeskow
GebPy is an open-source, Python-based tool for the synthetic generation of geological data with focus on minerals, rocks and stratigraphy. The main assumption of GepPy is that all rock properties are determined by the mineral assemblage besides structural features. GebPy can be used for educational purposes, for example by the generation of mineralogical data that could be then further investigated in specific diagrams or in well log analysis courses after creating different stratigraphic sequences.
GebPy is a one-man project and can still contain some technical bugs or some wrong assumptions, but it is driven by a huge motivation and has the goal to improve the knowledge and understanding of different geological aspects that are (actually) focused on mineralogy, rocks and stratigraphy.
🚀 Getting started / Installation
Actually, GebPy can only be installed by cloning this repository. An alternative solution will be found in the near future.
💻 Working with GebPy
After the installation of GebPy, you can find some Jupyter notebooks within the folder “notebooks” that could be helpful as an introduction for the work with GebPy. A more detailed documentation is already in progress.
Download Details:
Author: MABeeskow
Download Link: Download The Source Code
Official Website: https://github.com/MABeeskow/GebPy
License: LGPL-3.0
#python
What is GEEK
Buddha Community
1620466520
Your Data Architecture: Simple Best Practices for Your Data Strategy
If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.
If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.
In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.
#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition
1593156510
Basic Data Types in Python | Python Web Development For Beginners
At the end of 2019, Python is one of the fastest-growing programming languages. More than 10% of developers have opted for Python development.
In the programming world, Data types play an important role. Each Variable is stored in different data types and responsible for various functions. Python had two different objects, and They are mutable and immutable objects.
Table of Contents hide
III Built-in data types in Python
Mutable objects
The Size and declared value and its sequence of the object can able to be modified called mutable objects.
Mutable Data Types are list, dict, set, byte array
Immutable objects
The Size and declared value and its sequence of the object can able to be modified.
Immutable data types are int, float, complex, String, tuples, bytes, and frozen sets.
id() and type() is used to know the Identity and data type of the object
a**=25+**85j
type**(a)**
output**:<class’complex’>**
b**={1:10,2:“Pinky”****}**
id**(b)**
output**:**238989244168
Built-in data types in Python
a**=str(“Hello python world”)****#str**
b**=int(18)****#int**
c**=float(20482.5)****#float**
d**=complex(5+85j)****#complex**
e**=list((“python”,“fast”,“growing”,“in”,2018))****#list**
f**=tuple((“python”,“easy”,“learning”))****#tuple**
g**=range(10)****#range**
h**=dict(name=“Vidu”,age=36)****#dict**
i**=set((“python”,“fast”,“growing”,“in”,2018))****#set**
j**=frozenset((“python”,“fast”,“growing”,“in”,2018))****#frozenset**
k**=bool(18)****#bool**
l**=bytes(8)****#bytes**
m**=bytearray(8)****#bytearray**
n**=memoryview(bytes(18))****#memoryview**
Numbers (int,Float,Complex)
Numbers are stored in numeric Types. when a number is assigned to a variable, Python creates Number objects.
#signed interger
age**=**18
print**(age)**
Output**:**18
Python supports 3 types of numeric data.
int (signed integers like 20, 2, 225, etc.)
float (float is used to store floating-point numbers like 9.8, 3.1444, 89.52, etc.)
complex (complex numbers like 8.94j, 4.0 + 7.3j, etc.)
A complex number contains an ordered pair, i.e., a + ib where a and b denote the real and imaginary parts respectively).
String
The string can be represented as the sequence of characters in the quotation marks. In python, to define strings we can use single, double, or triple quotes.
# String Handling
‘Hello Python’
#single (') Quoted String
“Hello Python”
# Double (") Quoted String
“”“Hello Python”“”
‘’‘Hello Python’‘’
# triple (‘’') (“”") Quoted String
In python, string handling is a straightforward task, and python provides various built-in functions and operators for representing strings.
The operator “+” is used to concatenate strings and “*” is used to repeat the string.
“Hello”+“python”
output**:****‘Hello python’**
"python "*****2
'Output : Python python ’
#python web development #data types in python #list of all python data types #python data types #python datatypes #python types #python variable type
1624399200
Top 10 Big Data Tools for Data Management and Analytics
Introduction to Big Data
What exactly is Big Data? Big Data is nothing but large and complex data sets, which can be both structured and unstructured. Its concept encompasses the infrastructures, technologies, and Big Data Tools created to manage this large amount of information.
To fulfill the need to achieve high-performance, Big Data Analytics tools play a vital role. Further, various Big Data tools and frameworks are responsible for retrieving meaningful information from a huge set of data.
List of Big Data Tools & Frameworks
The most important as well as popular Big Data Analytics Open Source Tools which are used in 2020 are as follows:
- Big Data Framework
- Data Storage Tools
- Data Visualization Tools
- Big Data Processing Tools
- Data Preprocessing Tools
- Data Wrangling Tools
- Big Data Testing Tools
- Data Governance Tools
- Security Management Tools
- Real-Time Data Streaming Tools
#big data engineering #top 10 big data tools for data management and analytics #big data tools for data management and analytics #tools for data management #analytics #top big data tools for data management and analytics
1685216760
Создание пагинации с помощью jQuery
В этой статье мы увидим, как создать пагинацию с помощью jquery. Мы создадим разбиение на страницы jquery, используя несколько способов. Вы можете создать разбиение на страницы, используя разные способы, такие как создание разбиения на страницы с помощью простого HTML, вы можете создать разбиение на страницы в laravel, используя метод paginate(). Кроме того, создайте разбиение на страницы laravel livewire, разбиение на страницы с помощью бутстрапа.
Мы создадим простую пагинацию jquery. Кроме того, создайте разбиение на страницы с помощью jquery без плагина и создайте разбивку на страницы jquery с помощью кнопок «Далее» и «Предыдущий».
Итак, давайте посмотрим динамическую нумерацию страниц в jquery и бутстраповскую нумерацию страниц в jquery.
Пример:
В этом примере мы создадим пагинацию с помощью jquery без использования плагина. Кроме того, вы можете настроить пагинацию.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Pagination Using jQuery - Websolutionstuff</title>
<style>
.current {
color: green;
}
#pagin li {
display: inline-block;
font-weight: 500;
}
.prev {
cursor: pointer;
}
.next {
cursor: pointer;
}
.last {
cursor:pointer;
margin-left:10px;
}
.first {
cursor:pointer;
margin-right:10px;
}
.line-content, #pagin, h3 {
text-align:center;
}
.line-content {
margin-top:20px;
}
#pagin {
margin-top:10px;
padding-left:0;
}
h3 {
margin:50px 0;
}
</style>
</head>
<body>
<h3>How To Create Pagination Using jQuery - Websolutionstuff</h3>
<div class="line-content">This is Page 1 content example with next and prev.</div>
<div class="line-content">This is Page 2 content example with next and prev.</div>
<div class="line-content">This is Page 3 content example with next and prev.</div>
<div class="line-content">This is Page 4 content example with next and prev.</div>
<div class="line-content">This is Page 5 content example with next and prev.</div>
<div class="line-content">This is Page 6 content example with next and prev.</div>
<div class="line-content">This is Page 7 content example with next and prev.</div>
<div class="line-content">This is Page 8 content example with next and prev.</div>
<div class="line-content">This is Page 9 content example with next and prev.</div>
<div class="line-content">This is Page 10 content example with next and prev.</div>
<div class="line-content">This is Page 11 content example with next and prev.</div>
<div class="line-content">This is Page 12 content example with next and prev.</div>
<div class="line-content">This is Page 13 content example with next and prev.</div>
<div class="line-content">This is Page 14 content example with next and prev.</div>
<div class="line-content">This is Page 15 content example with next and prev.</div>
<div class="line-content">This is Page 16 content example with next and prev.</div>
<div class="line-content">This is Page 17 content example with next and prev.</div>
<div class="line-content">This is Page 18 content example with next and prev.</div>
<div class="line-content">This is Page 19 content example with next and prev.</div>
<div class="line-content">This is Page 20 content example with next and prev.</div>
<div class="line-content">This is Page 21 content example with next and prev.</div>
<div class="line-content">This is Page 22 content example with next and prev.</div>
<div class="line-content">This is Page 23 content example with next and prev.</div>
<div class="line-content">This is Page 24 content example with next and prev.</div>
<div class="line-content">This is Page 25 content example with next and prev.</div>
<div class="line-content">This is Page 26 content example with next and prev.</div>
<div class="line-content">This is Page 27 content example with next and prev.</div>
<div class="line-content">This is Page 28 content example with next and prev.</div>
<div class="line-content">This is Page 29 content example with next and prev.</div>
<div class="line-content">This is Page 30 content example with next and prev.</div>
<div class="line-content">This is Page 31 content example with next and prev.</div>
<div class="line-content">This is Page 32 content example with next and prev.</div>
<div class="line-content">This is Page 33 content example with next and prev.</div>
<div class="line-content">This is Page 34 content example with next and prev.</div>
<div class="line-content">This is Page 35 content example with next and prev.</div>
<div class="line-content">This is Page 36 content example with next and prev.</div>
<div class="line-content">This is Page 37 content example with next and prev.</div>
<div class="line-content">This is Page 38 content example with next and prev.</div>
<div class="line-content">This is Page 39 content example with next and prev.</div>
<div class="line-content">This is Page 40 content example with next and prev.</div>
<div class="line-content">This is Page 41 content example with next and prev.</div>
<div class="line-content">This is Page 42 content example with next and prev.</div>
<div class="line-content">This is Page 43 content example with next and prev.</div>
<div class="line-content">This is Page 44 content example with next and prev.</div>
<div class="line-content">This is Page 45 content example with next and prev.</div>
<ul id="pagin"></ul>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
pageSize = 5;
incremSlide = 5;
startPage = 0;
numberPage = 0;
var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
for(var i = 0 ; i<pageCount;i++){
$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
if(i>pageSize){
$("#pagin li").eq(i).hide();
}
}
var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
startPage-=5;
incremSlide-=5;
numberPage--;
slide();
});
prev.hide();
var next = $("<li/>").addClass("next").html("Next").click(function(){
startPage+=5;
incremSlide+=5;
numberPage++;
slide();
});
$("#pagin").prepend(prev).append(next);
$("#pagin li").first().find("a").addClass("current");
slide = function(sens){
$("#pagin li").hide();
for(t=startPage;t<incremSlide;t++){
$("#pagin li").eq(t+1).show();
}
if(startPage == 0){
next.show();
prev.hide();
}else if(numberPage == totalSlidepPage ){
next.hide();
prev.show();
}else{
next.show();
prev.show();
}
}
showPage = function(page) {
$(".line-content").hide();
$(".line-content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page){
$(this).show();
}
});
}
showPage(1);
$("#pagin li a").eq(0).addClass("current");
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()));
});
</script>Выход:
Пример:
В этом примере мы создадим загрузочную пагинацию с помощью jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Bootstrap Pagination Using jQuery - Websolutionstuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
#data tr {
display: none;
}
.page {
margin: 30px;
}
table, th, td {
border: 1px solid black;
}
#data {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#data td, #data th {
border: 1px solid #ddd;
padding: 8px;
}
#data tr:nth-child(even) {
background-color: #f2f2f2;
}
#data tr:hover {
background-color: #ddd;
}
#data th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #03aa96;
color: white;
}
#nav a {
color: #03aa96;
font-size: 20px;
margin-top: 22px;
font-weight: 600;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
#nav {
margin-top: 20px;
}
</style>
</head>
<body>
<h2 align="center" class="mt-4">How To Create Bootstrap Pagination Using jQuery - Websolutionstuff</h2>
<div class="page" align="center">
<table id="data">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Christina</td>
<td>Sweden</td>
</tr>
<tr>
<td>3</td>
<td>Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>4</td>
<td>Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>5</td>
<td>Helen</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>6</td>
<td>Philip</td>
<td>Germany</td>
</tr>
<tr>
<td>7</td>
<td>Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>8</td>
<td>Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>9</td>
<td>Dell</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>10</td>
<td>Trump</td>
<td>France</td>
</tr>
</table>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$(document).ready (function () {
$('#data').after ('<div id="nav"></div>');
var rowsShown = 5;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal/rowsShown;
for (i = 0;i < numPages;i++) {
var pageNum = i + 1;
$('#nav').append ('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice (0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
css('display','table-row').animate({opacity:1}, 300);
});
});
</script>Выход:
Пример:
В этом примере мы создадим пагинацию с помощью плагина twbsPagination . Этот плагин jQuery упрощает использование разбиения на страницы Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Pagination Using Plugin - Websolutionstuff</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<style>
.wrapper{
margin: 60px auto;
text-align: center;
}
h2{
margin-bottom: 1.25em;
}
#pagination-demo{
display: inline-block;
margin-bottom: 1.75em;
}
#pagination-demo li{
display: inline-block;
}
.page-content{
background: #eee;
display: inline-block;
padding: 10px;
width: 100%;
max-width: 660px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>jQuery Pagination Using Plugin - Websolutionstuff</h2>
<p>Simple pagination using the TWBS pagination JS library.</p>
<ul id="pagination-demo" class="pagination-sm"></ul>
</div>
</div>
<div id="page-content" class="page-content">Page 1</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script>
$(document).ready (function () {
$('#pagination-demo').twbsPagination({
totalPages: 16,
visiblePages: 6,
next: 'Next',
prev: 'Prev',
onPageClick: function (event, page) {
$('#page-content').text('Page ' + page) + ' content here';
}
});
});
</script>Выход:
Оригинальный источник статьи: https://websolutionstuff.com/
1685205672
Create Pagination Using jQuery
In this article, we will see how to create pagination using jquery. We will create jquery pagination using multiple ways. You can create pagination using different ways like creating pagination using simple HTML, you can create pagination in laravel using paginate() method. Also, create pagination laravel livewire, pagination using bootstrap.
We will create simple jquery pagination. Also, create pagination using jquery without a plugin and create jquery pagination with next and previous buttons
So, let's see dynamic pagination in jquery and bootstrap pagination in jquery
Example:
In this example, we will create pagination using jquery without using a plugin. Also, you can customize the pagination.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Pagination Using jQuery - Websolutionstuff</title>
<style>
.current {
color: green;
}
#pagin li {
display: inline-block;
font-weight: 500;
}
.prev {
cursor: pointer;
}
.next {
cursor: pointer;
}
.last {
cursor:pointer;
margin-left:10px;
}
.first {
cursor:pointer;
margin-right:10px;
}
.line-content, #pagin, h3 {
text-align:center;
}
.line-content {
margin-top:20px;
}
#pagin {
margin-top:10px;
padding-left:0;
}
h3 {
margin:50px 0;
}
</style>
</head>
<body>
<h3>How To Create Pagination Using jQuery - Websolutionstuff</h3>
<div class="line-content">This is Page 1 content example with next and prev.</div>
<div class="line-content">This is Page 2 content example with next and prev.</div>
<div class="line-content">This is Page 3 content example with next and prev.</div>
<div class="line-content">This is Page 4 content example with next and prev.</div>
<div class="line-content">This is Page 5 content example with next and prev.</div>
<div class="line-content">This is Page 6 content example with next and prev.</div>
<div class="line-content">This is Page 7 content example with next and prev.</div>
<div class="line-content">This is Page 8 content example with next and prev.</div>
<div class="line-content">This is Page 9 content example with next and prev.</div>
<div class="line-content">This is Page 10 content example with next and prev.</div>
<div class="line-content">This is Page 11 content example with next and prev.</div>
<div class="line-content">This is Page 12 content example with next and prev.</div>
<div class="line-content">This is Page 13 content example with next and prev.</div>
<div class="line-content">This is Page 14 content example with next and prev.</div>
<div class="line-content">This is Page 15 content example with next and prev.</div>
<div class="line-content">This is Page 16 content example with next and prev.</div>
<div class="line-content">This is Page 17 content example with next and prev.</div>
<div class="line-content">This is Page 18 content example with next and prev.</div>
<div class="line-content">This is Page 19 content example with next and prev.</div>
<div class="line-content">This is Page 20 content example with next and prev.</div>
<div class="line-content">This is Page 21 content example with next and prev.</div>
<div class="line-content">This is Page 22 content example with next and prev.</div>
<div class="line-content">This is Page 23 content example with next and prev.</div>
<div class="line-content">This is Page 24 content example with next and prev.</div>
<div class="line-content">This is Page 25 content example with next and prev.</div>
<div class="line-content">This is Page 26 content example with next and prev.</div>
<div class="line-content">This is Page 27 content example with next and prev.</div>
<div class="line-content">This is Page 28 content example with next and prev.</div>
<div class="line-content">This is Page 29 content example with next and prev.</div>
<div class="line-content">This is Page 30 content example with next and prev.</div>
<div class="line-content">This is Page 31 content example with next and prev.</div>
<div class="line-content">This is Page 32 content example with next and prev.</div>
<div class="line-content">This is Page 33 content example with next and prev.</div>
<div class="line-content">This is Page 34 content example with next and prev.</div>
<div class="line-content">This is Page 35 content example with next and prev.</div>
<div class="line-content">This is Page 36 content example with next and prev.</div>
<div class="line-content">This is Page 37 content example with next and prev.</div>
<div class="line-content">This is Page 38 content example with next and prev.</div>
<div class="line-content">This is Page 39 content example with next and prev.</div>
<div class="line-content">This is Page 40 content example with next and prev.</div>
<div class="line-content">This is Page 41 content example with next and prev.</div>
<div class="line-content">This is Page 42 content example with next and prev.</div>
<div class="line-content">This is Page 43 content example with next and prev.</div>
<div class="line-content">This is Page 44 content example with next and prev.</div>
<div class="line-content">This is Page 45 content example with next and prev.</div>
<ul id="pagin"></ul>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
pageSize = 5;
incremSlide = 5;
startPage = 0;
numberPage = 0;
var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
for(var i = 0 ; i<pageCount;i++){
$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
if(i>pageSize){
$("#pagin li").eq(i).hide();
}
}
var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
startPage-=5;
incremSlide-=5;
numberPage--;
slide();
});
prev.hide();
var next = $("<li/>").addClass("next").html("Next").click(function(){
startPage+=5;
incremSlide+=5;
numberPage++;
slide();
});
$("#pagin").prepend(prev).append(next);
$("#pagin li").first().find("a").addClass("current");
slide = function(sens){
$("#pagin li").hide();
for(t=startPage;t<incremSlide;t++){
$("#pagin li").eq(t+1).show();
}
if(startPage == 0){
next.show();
prev.hide();
}else if(numberPage == totalSlidepPage ){
next.hide();
prev.show();
}else{
next.show();
prev.show();
}
}
showPage = function(page) {
$(".line-content").hide();
$(".line-content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page){
$(this).show();
}
});
}
showPage(1);
$("#pagin li a").eq(0).addClass("current");
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()));
});
</script>Output:
Example:
In this example, we will create bootstrap pagination with help of jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create Bootstrap Pagination Using jQuery - Websolutionstuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
#data tr {
display: none;
}
.page {
margin: 30px;
}
table, th, td {
border: 1px solid black;
}
#data {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#data td, #data th {
border: 1px solid #ddd;
padding: 8px;
}
#data tr:nth-child(even) {
background-color: #f2f2f2;
}
#data tr:hover {
background-color: #ddd;
}
#data th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #03aa96;
color: white;
}
#nav a {
color: #03aa96;
font-size: 20px;
margin-top: 22px;
font-weight: 600;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
#nav {
margin-top: 20px;
}
</style>
</head>
<body>
<h2 align="center" class="mt-4">How To Create Bootstrap Pagination Using jQuery - Websolutionstuff</h2>
<div class="page" align="center">
<table id="data">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Christina</td>
<td>Sweden</td>
</tr>
<tr>
<td>3</td>
<td>Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>4</td>
<td>Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>5</td>
<td>Helen</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>6</td>
<td>Philip</td>
<td>Germany</td>
</tr>
<tr>
<td>7</td>
<td>Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>8</td>
<td>Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>9</td>
<td>Dell</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>10</td>
<td>Trump</td>
<td>France</td>
</tr>
</table>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$(document).ready (function () {
$('#data').after ('<div id="nav"></div>');
var rowsShown = 5;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal/rowsShown;
for (i = 0;i < numPages;i++) {
var pageNum = i + 1;
$('#nav').append ('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice (0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
css('display','table-row').animate({opacity:1}, 300);
});
});
</script>Output:
Example:
In this example, we will create pagination using the twbsPagination plugin. This jQuery plugin simplifies the usage of Bootstrap Pagination.
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Pagination Using Plugin - Websolutionstuff</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<style>
.wrapper{
margin: 60px auto;
text-align: center;
}
h2{
margin-bottom: 1.25em;
}
#pagination-demo{
display: inline-block;
margin-bottom: 1.75em;
}
#pagination-demo li{
display: inline-block;
}
.page-content{
background: #eee;
display: inline-block;
padding: 10px;
width: 100%;
max-width: 660px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>jQuery Pagination Using Plugin - Websolutionstuff</h2>
<p>Simple pagination using the TWBS pagination JS library.</p>
<ul id="pagination-demo" class="pagination-sm"></ul>
</div>
</div>
<div id="page-content" class="page-content">Page 1</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script>
$(document).ready (function () {
$('#pagination-demo').twbsPagination({
totalPages: 16,
visiblePages: 6,
next: 'Next',
prev: 'Prev',
onPageClick: function (event, page) {
$('#page-content').text('Page ' + page) + ' content here';
}
});
});
</script>Output:
Original article source at: https://websolutionstuff.com/