漂亮的分页插件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>