1562228557
Socket Programming in Python | Sending and Receiving Data with Sockets in Python
This video on ‘Socket Programming in Python’ is to educate you as to how networks are created using the socket module in Python. Below are the topics covered in this video:
What are sockets?
How to achieve socket programming in Python?
Servers and clients
Client-server communication
Transferring Python objects
============================
Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter
Learn More
☞ Complete Python Bootcamp: Go from zero to hero in Python 3
☞ Python for Time Series Data Analysis
☞ Python Programming For Beginners From Scratch
☞ Python Network Programming | Network Apps & Hacking Tools
☞ Intro To SQLite Databases for Python Programming
☞ Ethical Hacking With Python, JavaScript and Kali Linux
☞ Beginner’s guide on Python: Learn python from scratch! (New)
☞ Python for Beginners: Complete Python Programming
#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
1574341105
Python Programming & Data Handling
Description
Students will be able to know various commands include:
Python Basic Programming
string,if else,Range, for loop, while loop, making functions, tuple, dictionary etc
WEB WORKING:
Download files from Web, Exceptional Handling etc
Data Handling:
Get data from files create , read, write, delete.
IMAGE PROCESSING: (NEW DEVELOPING ART)
Image transformation , Image crop , edit and much more
Basic knowledge
Listener should know how about very basic C Language basic commands to understand Python Language
What will you learn
I will more update if any student want need to add more skills related to python
#Python Programming & Data Handling #Python Programming #Data Handling #Programming # Python
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/