jquert如何实现分页数据已经从数据库 读取出来绑定好了

图片说明
数据已经从数据库 读取出来绑定好了 如何用jquert实现分页呀 实现图片上的有上下翻页 显示多少也 例如每页显示十条数据

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <!-- END JAVASCRIPTS -->


</head>
<body >


<ul >

                                <li>
                                    <i class="icon-home"></i>
                                    <a href="<%=basePath%>"></a>
                                    <i class="icon-angle-right"></i>
                                </li>
                                <li><s:a action="system_selSysUserAll" namespace="/system" >角色添加</s:a></li>
                                <li class="pull-right no-text-shadow"></li>
                            </ul>

              <div class="tcdPageCode">    
            <table class="table table-striped table-bordered table-hover dataTable">
             <tr>

                 <td>角色编号</td>
                 <td>角色名称</td>
                 <td>角色描述</td>


             </tr>

                <s:iterator value="modelList" status="item">    
                  <tr>  

                     <td><s:property value="rid "/></td> 
                     <td><s:property value="rtitle"/></td>
                     <td><s:property value="rdesc"/></td> 


                  </tr>    
                 </s:iterator> 
         </table>
         </div>  
        <!-- END PAGE DIV -->
        </div>
     <!--END PAGE CONTAINER DIV-->
     </div>
</body>
</html>

用分页插件吧，自己写太麻烦~

参考：http://www.cnblogs.com/wangjq/archive/2011/03/15/1984029.html

jquery.pagination:http://www.cnblogs.com/xffy1028/archive/2011/12/01/2270719.html