Cordelia  Klein

Cordelia Klein

1644868560

Difference Between Continuous Data and Discrete Data with Examples

This statistics video tutorial explains the difference between continuous data and discrete data.  It gives plenty of examples and practice problems with graphs included.

#statistics  #probability 

What is GEEK

Buddha Community

Difference Between Continuous Data and Discrete Data with Examples
Lawrence  Lesch

Lawrence Lesch

1677668905

TS-mockito: Mocking Library for TypeScript

TS-mockito

Mocking library for TypeScript inspired by http://mockito.org/

1.x to 2.x migration guide

1.x to 2.x migration guide

Main features

  • Strongly typed
  • IDE autocomplete
  • Mock creation (mock) (also abstract classes) #example
  • Spying on real objects (spy) #example
  • Changing mock behavior (when) via:
  • Checking if methods were called with given arguments (verify)
    • anything, notNull, anyString, anyOfClass etc. - for more flexible comparision
    • once, twice, times, atLeast etc. - allows call count verification #example
    • calledBefore, calledAfter - allows call order verification #example
  • Resetting mock (reset, resetCalls) #example, #example
  • Capturing arguments passed to method (capture) #example
  • Recording multiple behaviors #example
  • Readable error messages (ex. 'Expected "convertNumberToString(strictEqual(3))" to be called 2 time(s). But has been called 1 time(s).')

Installation

npm install ts-mockito --save-dev

Usage

Basics

// Creating mock
let mockedFoo:Foo = mock(Foo);

// Getting instance from mock
let foo:Foo = instance(mockedFoo);

// Using instance in source code
foo.getBar(3);
foo.getBar(5);

// Explicit, readable verification
verify(mockedFoo.getBar(3)).called();
verify(mockedFoo.getBar(anything())).called();

Stubbing method calls

// Creating mock
let mockedFoo:Foo = mock(Foo);

// stub method before execution
when(mockedFoo.getBar(3)).thenReturn('three');

// Getting instance
let foo:Foo = instance(mockedFoo);

// prints three
console.log(foo.getBar(3));

// prints null, because "getBar(999)" was not stubbed
console.log(foo.getBar(999));

Stubbing getter value

// Creating mock
let mockedFoo:Foo = mock(Foo);

// stub getter before execution
when(mockedFoo.sampleGetter).thenReturn('three');

// Getting instance
let foo:Foo = instance(mockedFoo);

// prints three
console.log(foo.sampleGetter);

Stubbing property values that have no getters

Syntax is the same as with getter values.

Please note, that stubbing properties that don't have getters only works if Proxy object is available (ES6).

Call count verification

// Creating mock
let mockedFoo:Foo = mock(Foo);

// Getting instance
let foo:Foo = instance(mockedFoo);

// Some calls
foo.getBar(1);
foo.getBar(2);
foo.getBar(2);
foo.getBar(3);

// Call count verification
verify(mockedFoo.getBar(1)).once();               // was called with arg === 1 only once
verify(mockedFoo.getBar(2)).twice();              // was called with arg === 2 exactly two times
verify(mockedFoo.getBar(between(2, 3))).thrice(); // was called with arg between 2-3 exactly three times
verify(mockedFoo.getBar(anyNumber()).times(4);    // was called with any number arg exactly four times
verify(mockedFoo.getBar(2)).atLeast(2);           // was called with arg === 2 min two times
verify(mockedFoo.getBar(anything())).atMost(4);   // was called with any argument max four times
verify(mockedFoo.getBar(4)).never();              // was never called with arg === 4

Call order verification

// Creating mock
let mockedFoo:Foo = mock(Foo);
let mockedBar:Bar = mock(Bar);

// Getting instance
let foo:Foo = instance(mockedFoo);
let bar:Bar = instance(mockedBar);

// Some calls
foo.getBar(1);
bar.getFoo(2);

// Call order verification
verify(mockedFoo.getBar(1)).calledBefore(mockedBar.getFoo(2));    // foo.getBar(1) has been called before bar.getFoo(2)
verify(mockedBar.getFoo(2)).calledAfter(mockedFoo.getBar(1));    // bar.getFoo(2) has been called before foo.getBar(1)
verify(mockedFoo.getBar(1)).calledBefore(mockedBar.getFoo(999999));    // throws error (mockedBar.getFoo(999999) has never been called)

Throwing errors

let mockedFoo:Foo = mock(Foo);

when(mockedFoo.getBar(10)).thenThrow(new Error('fatal error'));

let foo:Foo = instance(mockedFoo);
try {
    foo.getBar(10);
} catch (error:Error) {
    console.log(error.message); // 'fatal error'
}

Custom function

You can also stub method with your own implementation

let mockedFoo:Foo = mock(Foo);
let foo:Foo = instance(mockedFoo);

when(mockedFoo.sumTwoNumbers(anyNumber(), anyNumber())).thenCall((arg1:number, arg2:number) => {
    return arg1 * arg2; 
});

// prints '50' because we've changed sum method implementation to multiply!
console.log(foo.sumTwoNumbers(5, 10));

Resolving / rejecting promises

You can also stub method to resolve / reject promise

let mockedFoo:Foo = mock(Foo);

when(mockedFoo.fetchData("a")).thenResolve({id: "a", value: "Hello world"});
when(mockedFoo.fetchData("b")).thenReject(new Error("b does not exist"));

Resetting mock calls

You can reset just mock call counter

// Creating mock
let mockedFoo:Foo = mock(Foo);

// Getting instance
let foo:Foo = instance(mockedFoo);

// Some calls
foo.getBar(1);
foo.getBar(1);
verify(mockedFoo.getBar(1)).twice();      // getBar with arg "1" has been called twice

// Reset mock
resetCalls(mockedFoo);

// Call count verification
verify(mockedFoo.getBar(1)).never();      // has never been called after reset

You can also reset calls of multiple mocks at once resetCalls(firstMock, secondMock, thirdMock)

Resetting mock

Or reset mock call counter with all stubs

// Creating mock
let mockedFoo:Foo = mock(Foo);
when(mockedFoo.getBar(1)).thenReturn("one").

// Getting instance
let foo:Foo = instance(mockedFoo);

// Some calls
console.log(foo.getBar(1));               // "one" - as defined in stub
console.log(foo.getBar(1));               // "one" - as defined in stub
verify(mockedFoo.getBar(1)).twice();      // getBar with arg "1" has been called twice

// Reset mock
reset(mockedFoo);

// Call count verification
verify(mockedFoo.getBar(1)).never();      // has never been called after reset
console.log(foo.getBar(1));               // null - previously added stub has been removed

You can also reset multiple mocks at once reset(firstMock, secondMock, thirdMock)

Capturing method arguments

let mockedFoo:Foo = mock(Foo);
let foo:Foo = instance(mockedFoo);

// Call method
foo.sumTwoNumbers(1, 2);

// Check first arg captor values
const [firstArg, secondArg] = capture(mockedFoo.sumTwoNumbers).last();
console.log(firstArg);    // prints 1
console.log(secondArg);    // prints 2

You can also get other calls using first(), second(), byCallIndex(3) and more...

Recording multiple behaviors

You can set multiple returning values for same matching values

const mockedFoo:Foo = mock(Foo);

when(mockedFoo.getBar(anyNumber())).thenReturn('one').thenReturn('two').thenReturn('three');

const foo:Foo = instance(mockedFoo);

console.log(foo.getBar(1));    // one
console.log(foo.getBar(1));    // two
console.log(foo.getBar(1));    // three
console.log(foo.getBar(1));    // three - last defined behavior will be repeated infinitely

Another example with specific values

let mockedFoo:Foo = mock(Foo);

when(mockedFoo.getBar(1)).thenReturn('one').thenReturn('another one');
when(mockedFoo.getBar(2)).thenReturn('two');

let foo:Foo = instance(mockedFoo);

console.log(foo.getBar(1));    // one
console.log(foo.getBar(2));    // two
console.log(foo.getBar(1));    // another one
console.log(foo.getBar(1));    // another one - this is last defined behavior for arg '1' so it will be repeated
console.log(foo.getBar(2));    // two
console.log(foo.getBar(2));    // two - this is last defined behavior for arg '2' so it will be repeated

Short notation:

const mockedFoo:Foo = mock(Foo);

// You can specify return values as multiple thenReturn args
when(mockedFoo.getBar(anyNumber())).thenReturn('one', 'two', 'three');

const foo:Foo = instance(mockedFoo);

console.log(foo.getBar(1));    // one
console.log(foo.getBar(1));    // two
console.log(foo.getBar(1));    // three
console.log(foo.getBar(1));    // three - last defined behavior will be repeated infinity

Possible errors:

const mockedFoo:Foo = mock(Foo);

// When multiple matchers, matches same result:
when(mockedFoo.getBar(anyNumber())).thenReturn('one');
when(mockedFoo.getBar(3)).thenReturn('one');

const foo:Foo = instance(mockedFoo);
foo.getBar(3); // MultipleMatchersMatchSameStubError will be thrown, two matchers match same method call

Mocking interfaces

You can mock interfaces too, just instead of passing type to mock function, set mock function generic type Mocking interfaces requires Proxy implementation

let mockedFoo:Foo = mock<FooInterface>(); // instead of mock(FooInterface)
const foo: SampleGeneric<FooInterface> = instance(mockedFoo);

Mocking types

You can mock abstract classes

const mockedFoo: SampleAbstractClass = mock(SampleAbstractClass);
const foo: SampleAbstractClass = instance(mockedFoo);

You can also mock generic classes, but note that generic type is just needed by mock type definition

const mockedFoo: SampleGeneric<SampleInterface> = mock(SampleGeneric);
const foo: SampleGeneric<SampleInterface> = instance(mockedFoo);

Spying on real objects

You can partially mock an existing instance:

const foo: Foo = new Foo();
const spiedFoo = spy(foo);

when(spiedFoo.getBar(3)).thenReturn('one');

console.log(foo.getBar(3)); // 'one'
console.log(foo.getBaz()); // call to a real method

You can spy on plain objects too:

const foo = { bar: () => 42 };
const spiedFoo = spy(foo);

foo.bar();

console.log(capture(spiedFoo.bar).last()); // [42] 

Thanks


Download Details:

Author: NagRock
Source Code: https://github.com/NagRock/ts-mockito 
License: MIT license

#typescript #testing #mock 

 iOS App Dev

iOS App Dev

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

使用 jQuery 创建分页

在本文中,我们将看到如何使用 jquery 创建分页。我们将使用多种方式创建 jquery 分页。您可以使用不同的方式创建分页,例如使用简单的 HTML 创建分页,您可以使用 paginate() 方法在 laravel 中创建分页。另外,创建分页 laravel livewire,使用 bootstrap 进行分页。

我们将创建简单的 jquery 分页。此外,使用不带插件的 jquery 创建分页,并使用下一个和上一个按钮创建 jquery 分页

那么,让我们看看jquery中的动态分页和jquery中的bootstrap分页

例子:

在这个例子中,我们将使用 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>

输出:

how_to_create_pagination_using_jquery_output

例子:

在这个例子中,我们将在 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>

输出:

how_to_create_pagination_using_jquery_and_bootstrap

例子:

在此示例中,我们将使用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>

输出:

jquery_pagination_using_plugin

原文出处:https: //websolutionstuff.com/

#jquery #pagination 

Создание пагинации с помощью 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>

Выход:

как_to_create_pagination_using_jquery_output

Пример:

В этом примере мы создадим загрузочную пагинацию с помощью 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>

Выход:

как_to_create_pagination_using_jquery_and_bootstrap

Пример:

В этом примере мы создадим пагинацию с помощью плагина 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>

Выход:

jquery_pagination_using_plugin

Оригинальный источник статьи: https://websolutionstuff.com/

#jquery #pagination 

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:

how_to_create_pagination_using_jquery_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:

how_to_create_pagination_using_jquery_and_bootstrap

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:

jquery_pagination_using_plugin

Original article source at: https://websolutionstuff.com/

#jquery #pagination