一尘不染

使用jQuery在jsp中进行分页不起作用

jsp

jQuery(function($){ 
    var items = $("table tr"); 
    var numItems = items.length; 
    var perPage = 2; 
    items.slice(perPage).hide(); 
    $(".pagination-page").pagination({ 
        items: numItems, 
        itemsOnPage: perPage, 
        cssStyle: "light-theme", 
        onPageClick: function(pageNumber) { 
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage; 
            items.hide(); 
           .slice(showFrom, showTo).show();
        }
    });

阅读 223

收藏
2020-06-10

共1个答案

一尘不染

您的示例中有许多语法错误。假设您的html表已在服务器端正确填充,这似乎可以正常工作:

$(function($) {

  var items = $("table tr");

  var numItems = items.length;

  var perPage = 2;

  items.slice(perPage).hide();

  $(".pagination-page").pagination({

    items: numItems,

    itemsOnPage: perPage,

    cssStyle: "light-theme",

    onPageClick: function(pageNumber) {

      var showFrom = perPage * (pageNumber - 1);

      var showTo = showFrom + perPage;

      items.hide();

      items.slice(showFrom, showTo).show();

    }

  });

});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ciiing-project-learn.googlecode.com/svn-history/r1792/trunk/projects/eddie/app/webroot/js/jquery.simplePagination.js"></script>



<table>

  <tr><td>1</td></tr>

  <tr><td>2</td></tr>

  <tr><td>3</td></tr>

  <tr><td>4</td></tr>

  <tr><td>5</td></tr>

  <tr><td>6</td></tr>

  <tr><td>7</td></tr>

  <tr><td>8</td></tr>

  <tr><td>9</td></tr>

  <tr><td>10</td></tr>

</table>



<div class="pagination-page"></div>
2020-06-10