Question

如何在服务器端使用simplePagination.js jQuery plugin？我有很多div加载我的页面（不是表格），我正在对那些'div'进行分页。但是，有些情况下我会得到很多分页（比如2500+）并且我的页面变慢了。这是我现在的代码：

$("#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();
    }
  });

这是我加载了所有div的页面： page loaded

如您所见，我有一个搜索选项： search option

但是每当我搜索某些东西时，所有的div都会被重新加载，并且再次进行分页。

我想知道是否有可能将此代码更改为不加载客户端中的所有内容，但是如果我从服务器端选择内容。 div由SQL命令加载，因此，也许我可以使用每个页码的功能正确加载每个页面只有20个itens，之后我可以对搜索框做一些事情。

修改的那是我的HTML代码（在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>

由于

Answer 1

我将提供解决方案。

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>

simplePagination jQuery服务器端

1 个答案: