JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="Pagination" class="pagination"></div>
         <div id="res"></div>

           <div id="hiddenresult">
               <div class="result">
                  <p>hoge</p>
                  <p>hoge</p>
                  <p>hoge</p>
               </div>
               <div class="result">
                  <p>huga</p>
                  <p>huga</p>
                  <p>huga</p>
               </div>
               <div class="result">
                  <p>piyo</p>
                  <p>piyo</p>
                  <p>piyo</p>
               </div>
               <div class="result">
                  <p>foo</p>
                  <p>foo</p>
                  <p>foo</p>
               </div>
               <div class="result">
                  <p>bar</p>
                  <p>bar</p>
                  <p>bar</p>
               </div>
           </div>

CSS

.pagination { 
    margin:0 0 5px 0; 
    padding:0; height:2.5em; 
}
.pagination a { 
    text-decoration:none; 
    border:solid 1px #aaa; 
    color:#aaa; 
}
.pagination a, .pagination span { 
    font-weight:bold; 
    display:block; 
    float:left; 
    margin:0 5px 0 0; 
    padding:.3em .5em; 
}
.pagination .current { 
    background:#999; 
    color:#fff; 
    border:solid 1px #999; 
}
.pagination .current.prev, .pagination .current.next { 
    color:#999; 
    border-color:#999; 
    background:#fff; 
}
#res { 
    margin:0; 
    padding:0 10px; 
    border:solid 1px #ccc; 
    background:#fff; 
    width:300px; 
    clear:both; }
#hiddenresult{display:none;}

JavaScript

/**
 * This jQuery plugin displays pagination links inside the selected elements.
 *
 * @author Gabriel Birke (birke *at* d-scribe *dot* de)
 * @version 1.2
 * @param {int} maxentries Number of entries to paginate
 * @param {Object} opts Several options (see README for documentation)
 * @return {Object} jQuery Object
 */
jQuery.fn.pagination = function(maxentries, opts){
    opts = jQuery.extend({
        items_per_page:10,
        num_display_entries:10,
        current_page:0,
        num_edge_entries:0,
        link_to:"#",
        prev_text:"<<<",
        next_text:">>>",
        ellipse_text:"...",
        prev_show_always:true,
        next_show_always:true,
        callback:function(){return false;}
    },opts||{});
    return this.each(function() {
        /**
         * Calculate the maximum number of pages
         */
        function numPages() {
            return Math.ceil(maxentries/opts.items_per_page);
        }
        
        /**
         * Calculate start and end point of pagination links depending on 
         * current_page and num_display_entries.
         * @return {Array}
         */
        function getInterval()  {
            var ne_half = Math.ceil(opts.num_display_entries/2);
            var np = numPages();
            var upper_limit = np-opts.num_display_entries;
            var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
            var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
            return [start,end];
        }
        
        /**
         * This is the event handling function for the pagination links. 
         * @param {int} page_id The new page number
         */
        function pageSelected(page_id, evt){
            current_page = page_id;
            drawLinks();
            var continuePropagation = opts.callback(page_id, panel);
            if (!continuePropagation) {
                if (evt.stopPropagation)...