jQueryを用いたページング処理について

jQueryを用いたページング処理についての質問です。

開発環境は、
Windows7
ブラウザ：IE
Java：1.6
eclipce：3.6
Tomcat：7.0
Oracle11g
となります。

以下のjspページに、ページング処理を施したいと考えています
現在は登録された情報が際限なく追加されていくので、10件毎に
「前ページへ」(ページ数)「次ページへ」
というような実装を盛り込みたいです。

<%@ page language="java" contentType="text/html; charset=Shift_JIS"
pageEncoding="Shift_JIS"%>
<%@ page import="java.util." %>
<%@ page import="java.io." %>
<%@ page import="bean.BookBean" %>
<%@ page import="operator." %>
<%@ page import="servlet." %>

<!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=Shift_JIS"> <title>書籍情報一覧画面</title> <link rel="stylesheet" href="./css/design.css" type="text/css"> <script type="text/javascript" src="./js/function.js"></script> </head> <body> <table id="contents" summary="body"> <tr id="header"><td> <table width="100%"><tr><td>システム</td><td align="right"><a href="TopSrv">TOP</a></td></tr></table> </td></tr> <tr id="body"> <td align="center" valign="top">  <font size="7">一覧</font>

<% List<BookBean> list_ = (ArrayList<BookBean>)session.getAttribute("GENRESERCH_LIST"); %>

<form name = "form_serchList" method ="post" action ="BookSrv" > 書籍名検索 <br> 書籍名をどうぞ<input type = "text" name = "serchWord" > <input type = "hidden" name = "serch" value = "serch"> <input type="submit" value="検索"> </form>

<% List<BookBean> list = (ArrayList<BookBean>)request.getAttribute("BOOK_LIST"); %>
<%if(list.size() == 0){%>
<br>

<h1>書籍情報はありません</h1> <br> <%}%>

<%String error = (String)request.getAttribute("error");%>
<%if(error != null){%>
<font size = "5"><%=error %></font>
<%}%>

<%CharOperator co = new CharOperator(); %>
<%for(BookBean bbean:list){ %>

当初はSQL文を追加してDAOとservletを用いた方法を模索していたのですが、
jQueryでも出来る、というような内容の記述を見つけ、以下のHTMLでインチキページング処理を記述してみました。

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <title>jQueryによるテーブルのページ送り</title> <script> $(function() { var page = 0; function draw() { $('#page').html(page + 1); $('tr').hide(); $('tr:first,tr:gt(' + page * 10 + '):lt(10)').show(); } $('#prev').click(function() { if (page > 0) { page--; draw(); } }); $('#next').click(function() { if (page < ($('tr').size() - 1) / 10 - 1) { page++; draw(); } }); draw(); }); </script> <style> td, th { border: 1px solid black; padding: 2px; } #prev, #next { color: red; cursor: pointer; } </style> </head> <body> <table> <tr><th>MS</th><th>パイロット</th></tr> <tr><td>RX-78-2ガンダム</td><td>アムロ・レイ</td></tr> <tr><td>Zガンダム</td><td>カミーユ・ビダン</td></tr> <tr><td>ガンダムMk-2</td><td>エマ・シーン</td></tr> <tr><td>ハンブラビ</td><td>ヤザン・ゲーブル</td></tr> <tr><td>ジ・O</td><td>パプテマス・シロッコ</td></tr> <tr><td>ZZガンダム</td><td>ジュドー・アーシタ</td></tr> <tr><td>νガンダム</td><td>アムロ・レイ</td></tr> <tr><td>サザビー</td><td>キャスバル・レム・ダイクン</td></tr> <tr><td>ユニコーンガンダム</td><td>バナージ・リンクス</td></tr> <tr><td>シナンジュ</td><td>フル・フロンタル</td></tr> <tr><td>クシャトリヤ</td><td>マリーダ・クルス</td></tr> <tr><td>バンシィ</td><td>リディ・マーセナス</td></tr> <tr><td>ローゼン・ズール</td><td>アンジェロ・ザウパー</td></tr> <tr><td>ロト</td><td>ダグザ・マックール</td></tr> <tr><td>ガンダムF91</td><td>シーブック・アノー</td></tr> <tr><td>クロスボーンガンダムX1</td><td>キンケドゥ・ナウ</td></tr> <tr><td>クロスボーンガンダムX2</td><td>ザビーネ・シャル</td></tr> <tr><td>フリーダム</td><td>キラ・ヤマト</td></tr> <tr><td>プロヴィデンス</td><td>ラウ・ル・クルーゼ</td></tr> <tr><td>デスティニー</td><td>シン・アスカ</td></tr> <tr><td>レジェンド</td><td>レイ・ザ・バレル</td></tr> <tr><td>ゴールドフレーム天ミナ</td><td>ロンド・ミナ・サハク</td></tr> <tr><td>ソードカラミティ</td><td>エドワード・ハレルソン</td></tr> <tr><td>ガンダムエクシア</td><td>刹那・F・セイエイ</td></tr> <tr><td>ガンダムサバーニャ</td><td>ロックオン・ストラトス</td></tr> <tr><td>ガンダムハルート</td><td>アレルヤ・ハプティズム</td></tr> <tr><td>ラファエルガンダム</td><td>ティエリア・アーデ</td></tr> </table> 前へ次へ </body> </html>

サイトの見様見真似ですが、この中で一応ページング処理が出来ています。
これをjspページにも導入したいのですが、それは可能なのでしょうか？
そしてもし可能であるなら、方法を教えて頂けないでしょうか？
どうかよろしくお願い致します。