漂亮的分页插件JPAGINATE个人使用心得

一直在用ajax,突然发现不会直接传参了好尴尬,记录一下直接跳转后台

1.先在页面导入这三个包

<link href="Views/css/style.css" rel="stylesheet">
<script src="Views/jquery.paginate.js"></script>
<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>

2.在js中加入插件代码

$(function() {
        $("#demo1").paginate({

                count       : ${countPage},//页面总数

                start       : ${currentPage},//起始页

                display     : 7,//可展示的页码数，也就是规定一次显示多少页码

                border                  : true,//存放页码的容器是否有边框，可选值： (true/false)

                border_color            : '#fff',//边框的颜色

                text_color              : '#fff',//页码文字的颜色

                background_color        : 'red',//页码容器的背景颜色 

                border_hover_color      : '#ccc',//当鼠标移动到页码上时,容器边框的颜色

                text_hover_color        : '#000',//当鼠标移动到页码上时，页码文字的颜色

                background_hover_color  : '#fff', //当鼠标移动到页码上时，容器的背景颜色

                images                  : false,//“上一页”或“下一页”是否显示为图片，可选(true/false)

                mouse                   : 'press',
                //↑如果为 “press” 那么当鼠标在上一页或下一页上按下的时候，页码将会一直滚动，
                //↑如果为 “slide” 那么鼠标点击一次页码就会滚动一次

                onChange                : function(currentPage){//回调函数,参数为当前点击的页码
                                        alert(currentPage);
                //将页码发到后台,传回分页的列表,在渲染到对应位置
                window.location.href="settings/dictionary/index.do?currentPage="+currentPage;                                        
                                          }
            });

    })

3.代码不需要修改,就能直接使用,很方便

 <tbody id="dtList">
                <c:forEach items='${dtList }' var='disType' varStatus='vs'>
                    <tr class='active'>
                        <td><input type='checkbox' /></td>
                        <td>${vs.index+1 }</td>
                        <td>${disType.code }</td>
                        <td>${disType.name }</td>
                        <td>${disType.description }</td>
                    </tr>
                </c:forEach>
            </tbody> 
        </table>
    <div id="demo1"></div>