CODEWITHSUNDEEP
javascriptphpjquerypagination
Killer
Killer

Reputation: 188

simplePagination jQuery server side

How can I use the simplePagination.js jQuery plugin with server side? I have a lot of divs loading with my page (not a table) and I am paginating those 'divs'. But, there will be cases that I will get a lot of things to paginate (like 2500+) and my page gets slow. This is my code now:

$("#pagination").pagination({
  items: numItems,
  itemsOnPage: perPage,
  cssStyle: "light-theme",

  // This is the actual page changing functionality.
  onPageClick: function(pageNumber) {
    // We need to show and hide `tr`s appropriately.
    var showFrom = perPage * (pageNumber - 1);
    var showTo = showFrom + perPage;

    // We'll first hide everything...
    items.hide()
      // ... and then only show the appropriate rows.
      .slice(showFrom, showTo).show();
    }
  });

And this is my page with all the divs loaded: page loaded

As you can see, I have a search option: search option

But everytime I search something, all the divs are reloaded, and the pagination is made again.

I want to know if its possible to change this code to not load all the content in client-side but something like if I select the content from server side. The divs are loaded by a SQL command, so, maybe I can use the functions of each page number to load each page correctly with only 20 itens and later I can do something about the search box.

EDIT That is my html code (in php):

<html lang="pt-br">
<head>
    <link rel="stylesheet" href="assets/css/simplePagination.css">
    <script src="assets/js/jquery.simplePagination.js"></script>

    <script type="text/javascript">
        $(function(){
            var keywordInput = document.querySelector("input[name='keyword']");

            function performMark() {
                $(".content.panel").show();

                // Read the keyword
                var keyword = keywordInput.value;
                $('.content').removeClass('hidden');                 
                $('.content:not(:contains(' + keyword + '))').addClass('hidden');

                /* Tentar refazer paginação */          
                var items = $(".content.panel").not(".hidden");

                var numItems = items.length;
                var perPage = 16;

                // Only show the first 2 (or first `per_page`) items initially.
                items.slice(perPage).hide();   

                $("#pagination").pagination({
                    items: numItems,
                    itemsOnPage: perPage,
                    cssStyle: "light-theme",

                    // This is the actual page changing functionality.
                    onPageClick: function(pageNumber) {
                        // We need to show and hide `tr`s appropriately.
                        var showFrom = perPage * (pageNumber - 1);
                        var showTo = showFrom + perPage;

                        // We'll first hide everything...
                        items.hide()
                            // ... and then only show the appropriate rows.
                            .slice(showFrom, showTo).show();
                    }
                });                
            };

            // Listen to input and option changes            
            keywordInput.addEventListener("input", performMark);                      
        });        
    </script>

    <script type="text/javascript">
        $(function() {
            var items = $(".content.panel").not(".hidden");

            var numItems = items.length;
            var perPage = 16;

            // Only show the first 2 (or first `per_page`) items initially.
            items.show();
            items.slice(perPage).hide();

            // Now setup the pagination using the `.pagination-page` div.
            $("#pagination").pagination({
                items: numItems,
                itemsOnPage: perPage,
                cssStyle: "light-theme",

                // This is the actual page changing functionality.
                onPageClick: function(pageNumber) {
                    // We need to show and hide `tr`s appropriately.
                    var showFrom = perPage * (pageNumber - 1);
                    var showTo = showFrom + perPage;

                    // We'll first hide everything...
                    items.hide()
                        // ... and then only show the appropriate rows.
                        .slice(showFrom, showTo).show();
                }
            });

            function checkFragment() {
                // If there's no hash, treat it like page 1.
                var hash = window.location.hash || "#page-1";

                // We'll use a regular expression to check the hash string.
                hash = hash.match(/^#page-(\d+)$/);

                if(hash) {
                    // The `selectPage` function is described in the documentation.
                    // We've captured the page number in a regex group: `(\d+)`.
                    $("#pagination").pagination("selectPage", parseInt(hash[1]));
                }
            };

            // We'll call this function whenever back/forward is pressed...
            $(window).bind("popstate", checkFragment);

            // ... and we'll also call it when the page has loaded
            // (which is right now).
            checkFragment();
        });
    </script>  

    <!--link href="assets/css/table.css" rel="stylesheet"-->
</head>

<body onload="myFunction()">
    <div class="container">    


        <div id="loader"></div>

        <div style="display:none;" id="myDiv" class="animate-bottom">

            <div class="input-group input-group-lg" style="margin-bottom: 15px;">
            <span class="input-group-addon glyphicon glyphicon-search" id="sizing-addon1" style="position: initial;"></span>
            <input name="keyword" type="text" class="form-control" placeholder="Pesquisar" aria-describedby="sizing-addon1" onload="performMark()">
            </div> 

            <div id="pagination" style="margin-bottom: 5px;"></div>   
            <div class='row centered'>

            <?php                
                $sql = "SELECT * FROM USU_TDriCad";
                $stid = oci_parse($conn, $sql);
                oci_execute($stid);
                while (($row = oci_fetch_array($stid, OCI_BOTH)) != false) {                       
                    $CodDri = 'test';
                    $CodDri = (isset($row['USU_CODDRI']) ? $row['USU_CODDRI'] : ''); 

                    echo '<div class="content warning">
                            <div class="content panel panel-warning">                    
                                <div class="panel-heading highlight">
                                    <h3 class="panel-title">' . $StrLoc . '</h3>
                                </div>
                                <div class="panel-body warning highlight" style="padding: 2px">
                                    ' . $CodDri . '
                                </div>   
                                <div class="panel-body warning highlight" style="padding: 2px; font-size: 16px">
                                    <div class="col-xs-6">1000</div> 
                                    <div class="col-xs-6">#008</div> 
                                </div>                                                    
                            </div>
                        </div>';                                                    
                }
                oci_free_statement($stid);
            ?> 
        </div>     
        </div>      
    </div>  
</body>
</html>

Thanks

Upvotes: 0

Views: 1885

Answers (1)

4e1ovek
4e1ovek

Reputation: 38

I will offer my solution.

var
    search = $("#search"),
    control = $("#pagination"),
    table = $("#table tbody tr"),
    pageParts = null,
    perPage = 2;

search.on("keyup", function() {
    var value = $(this).val().toLowerCase();
    table.filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    updPagination();
});

control.pagination({
    itemsOnPage: perPage,
    cssStyle: "light-theme",
    onPageClick: function(pageNum) {
        var start = perPage * (pageNum - 1);
        var end = start + perPage;
        if (pageParts) {
            pageParts.hide()
                .slice(start, end).show();
        }
    }
});

function updPagination() {
    pageParts = table.filter(function() { return $(this).css("display") !== 'none' });
    pageParts.slice(perPage).hide();
    control.pagination('selectPage', 1);
    control.pagination('updateItems', pageParts.length);
}

updPagination();
table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}
td,
th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: 0.5em 1em
}
td:first-child,
th:first-child {
    border-left-width: 0;
}
thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}
<link rel="stylesheet" href="https://cdn.bootcss.com/simplePagination.js/1.6/simplePagination.min.css">

<input id="search" type="text" placeholder="Search for..">
  <table id="table">
    <thead>
    <tr>
      <td>ID</td>
      <td>Name</td>
    </tr>
    <tbody>
    <tr>
      <td>1</td>
      <td>test 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>test 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>test 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>test 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>test 5</td>
    </tr>
    </tbody>
  </table>
  <div id="pagination"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/simplePagination.js/1.6/jquery.simplePagination.min.js"></script>

Upvotes: 2

Related Questions