Question

现在我正在开发一个包含表排序和分页的项目。这是我刚用于自己的代码，

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <title>Insert title here</title>
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.9.1/jquery.tablesorter.min.js"></script>
      <script type="text/javascript" src="http:////cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.8/addons/pager/jquery.tablesorter.pager.min.js"></script>
   <link href="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.8/addons/pager/jquery.tablesorter.pager.css" rel="stylesheet">
   </head>
   <body>
      <script type="text/javascript">
         $(document).ready(function() 
         { 
          $("#myTable").tablesorter({widgets: ['zebra']});
          $("#myTable").tablesorterPager({container: $("#pager")}); 
         });
      </script>
      <table id="myTable" class="tablesorter" border="0">
         <thead>
            <tr>
               <th><a>Last Name</a></th>
               <th>First Name</th>
               <th>Email</th>
               <th>Due</th>
               <th>Web Site</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Smith</td>
               <td>John</td>
               <td>jsmith@gmail.com</td>
               <td>$50.00</td>
               <td>http://www.jsmith.com</td>
            </tr>
            <tr>
               <td>Bach</td>
               <td>Frank</td>
               <td>fbach@yahoo.com</td>
               <td>$50.00</td>
               <td>http://www.frank.com</td>
            </tr>
            <tr>
               <td>Doe</td>
               <td>Jason</td>
               <td>jdoe@hotmail.com</td>
               <td>$100.00</td>
               <td>http://www.jdoe.com</td>
            </tr>
            <tr>
               <td>nConway</td>
               <td>Tim</td>
               <td>tconway@earthlink.net</td>
               <td>$50.00</td>
               <td>http://www.timconway.com</td>
            </tr>
            <tr>
               <td>mConway</td>
               <td>Tim</td>
               <td>tconway@earthlink.net</td>
               <td>$50.00</td>
               <td>http://www.timconway.com</td>
            </tr>
            <tr>
               <td>vConway</td>
               <td>Tim</td>
               <td>tconway@earthlink.net</td>
               <td>$50.00</td>
               <td>http://www.timconway.com</td>
            </tr>
            <tr>
               <td>wConway</td>
               <td>Tim</td>
               <td>tconway@earthlink.net</td>
               <td>$50.00</td>
               <td>http://www.timconway.com</td>
            </tr>
            <tr>
               <td>fConway</td>
               <td>Tim</td>
               <td>tconway@earthlink.net</td>
               <td>$50.00</td>
               <td>http://www.timconway.com</td>
            </tr>
            <tr>
               <td>honway</td>
               <td>him</td>
               <td>tconway@earthlink.net</td>
               <td>$50.00</td>
               <td>http://www.timconway.com</td>
            </tr>
            <tr>
               <td>gonway</td>
               <td>Tim2</td>
               <td>2tconway@earthlink.net</td>
               <td>$540.00</td>
               <td>http://www.timconway3.com</td>
            </tr>
            <tr>
               <td>Conway1</td>
               <td>Tim1</td>
               <td>tconway@earthlink.net1</td>
               <td>$450.00</td>
               <td>http://www.timconway.com1</td>
            </tr>
         </tbody>
      </table>
      <div id=”pager”  class=”pager”>
         <img src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.8/addons/pager/icons/first.png" class="first"/> 
         <img src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.8/addons/pager/icons/prev.png" class="prev"/> 
         <input type="text" class="pagedisplay" readonly="readonly">
         <img src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.8/addons/pager/icons/next.png" class="next"/> 
         <img src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.8/addons/pager/icons/last.png" class="last"/> 
         <select  class=”pagesize”>
            <option selected=”selected”  value=”1″>1</option>
            <option value=”2″>2</option>
            <option value=”3″>3</option>
            <option  value=”4″>4</option>
         </select>
      </div>
   </body>
</html>

表格排序正常。但是分页不起作用。我搜索了很多网站但是我对分页感到困惑。我是否添加了Javascript函数以便分页正常工作？如果是这样，请提供代码。

这么多小时都是如此。任何人请帮助我或提供任何源代码链接以便更好地理解。

提前致谢。

Answer 1

在页面中使用”简单替换"

<div id=”pager”  class=”pager”>

到

<div id="pager"  class="pager">

如何使用js函数在jsp中进行Jquery表分类器和分页器？

1 个答案: