CODEWITHSUNDEEP
jqueryjsppagination
Test1234
Test1234

Reputation: 407

Pagination is not working for table concept

I would like to implement pagination for the below jsp table, where the name,title and genre will retrieve from Database. I would like to list the data 1 per each page.

In header i have used below codes

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/Fileupload/js/jquery.paginate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#paging_container3').pajinate({
    num_page_links_to_display : 1,
    items_per_page : 1,
  }(jQuery));
  });   
</script>

In jsp file i am having below code

<div id="paging_container3">
  <table border="1" id="myTable">
    <tbody>
        <tr>
          <td><b>Name</b></td>
          <td><b>Title</b></td>
          <td><b>Genre</b></td>
          <%  
            while(rs.next())
            {
               String name = rs.getString("Name");
               String title = rs.getString("Title");
               String genre = rs.getString("Genre");
           %>
          <tr><td><%=name %></td><td><%=title %></td><td><%=genre %></td></tr>
           <%   
            }
            %>
      </tbody>
   </table>
  </div>

Can anyone suggest where i have to concentrate to fix the issue.Thanks in advance

Upvotes: 0

Views: 347

Answers (1)

Vinoth Krishnan
Vinoth Krishnan

Reputation: 2949

Please make sure that you are following these, and check your pajinate.js path.

DEFAULT USAGE
---------------------------------
1) Place pajinate-x.x folder somewhere in your website directory structure.
2) Include script tags for the desired version of the script. 
3) Create at least one <div> in your HTML with a CSS class 
value of "page_navigation".  The navigation links will be 
attached to these divs.
4) Ensure that all items you would like to page through are 
all the first-children of an HTML element with a CSS 
class value of "content". The child-elements can be of any tag type.
5) Call the Pajinate plugin with the function.

For more details go through this link. https://github.com/wesnolte/Pajinate. May be your html need to look like this,

<div id="page_container">
<div class="page_navigation"></div>     
        <ul class="content">
            <li> <p>One</p> </li>
        <li> <p>Two</p> </li>
        <li> <p>Three</p> </li>
        <li> <p>Four</p> </li>
        <li> <p>Five</p> </li>
        <li> <p>Six</p> </li>
        <li> <p>Seven</p> </li>
        <li> <p>Eight</p> </li>
    </ul>
  </div>    
</div>

Upvotes: 1

Related Questions