springmvc pagination 实现数据分页

pagination 插件下载:https://download.csdn.net/download/weixin_40652498/12313663

    <link rel="stylesheet" href="lib/pagination.css" />
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="lib/jquery.pagination.js"></script>


    <div id="Searchresult">分页内容(自动替换)</div>

    <div style="margin-left: 330px"><div id="Pagination" class="pagination"  ><!-- 这里显示分页 --></div></div>



$(function(){
        //这是一个非常简单的demo实例,让列表元素分页显示
        //回调函数的作用是显示对应分页的列表项内容
        //回调函数在用户每次点击分页链接的时候执行
        //参数page_index{int整型}表示当前的索引页
        var initPagination = function() {  //页码加载
            var num_entries = 1;   //有多少个分页

            $.ajax({
                url: "selectPageNum",
                async:false,   //同步请求
                success: function (size) {
                    num_entries=size;
                }
            });

            // 创建分页
            $("#Pagination").pagination(num_entries, {
                num_edge_entries: 1, //边缘页数
                num_display_entries: 4, //主体页数
                callback: pageselectCallback,
                items_per_page:1 //每页显示1项
            });
        }();

        function pageselectCallback(page_index, jq){   //切换页数
            var new_content=" <table id='table' class='table table-bordered' style='width: 800px'>"+
            "<tr> <td><font color='red'>eid</font></font></td><td><font color='red'>ename</font></td><td><font color='red'>did</font></td><td><font color='red'>dname</font></td><td><font color='red'>daddress</font></td><td><button onclick='addData()'><font color='#4c84ff'>添加</font></button></td>   </tr>";
            $.ajax({
                url: "select",
                async:false,   //同步请求
                data: {start: page_index, leng: 10},
                success: function (data) {
                    var list = eval("("+data+")");   //返回List 数据
                    for(var i=0;i<list.length;i++){
                        new_content+=" <tr>";

                        new_content +="<td>"+ list[i].eid+"</td>";
                        new_content +="<td>"+ list[i].ename+"</td>";
                        new_content +="<td>"+ list[i].dno.did+"</td>";
                        new_content +="<td>"+ list[i].dno.dname+"</td>";
                        new_content +="<td>"+ list[i].dno.daddress+"</td>";
                        new_content +="<td>"+ "<button onclick='updateData(\""+list[i].eid+"\")'><font color='#4c84ff'>修改</font></button>  <button onclick='deleteData(\""+list[i].eid+"\")'><font color='#4c84ff'>删除</font></button>";+"</td>";
                        new_content+=" </tr>";

                    }
                    new_content+=" </table>";
                }
            });

            $("#Searchresult").empty().append(new_content); //装载对应分页的内容
            return false;
        }



    });

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章