jquery分页显示

我们在显示文章列表的时候，通常需要分页显示。
一种方式是通过SQL查询的limit进行分页，即只查询该页面的数据。
另外一种方式是查询出所有的数据，传递给前段，然后用jquery控制只显示我们想看到的分页。

html代码

<div class="am-g">
    <div class="am-u-sm-12" id="listTag">

    </div>

</div>

js代码

$(function(){
        showPage(1);
    });
    function showPage(page){
        $.ajax({
            type:"GET",
            url:"<{$urlParent}>/newsManageList?cid=all",
            dataType:"json",
            success:function(data){
                var newsTotalNum = data.length;  //新闻记录的总条数
                var pageNum = Math.ceil(newsTotalNum/<{$newsPageNum}>); //分页的总页数
                var content = ' <form class="am-form" id="listContainer">' +
                        '<table class="am-table am-table-striped am-table-hover table-main" id="newsList">' +
                        '<thead>' +
                        '<tr>' +
                        '<th class="table-id">ID</th><th class="table-title">标题</th><th class="table-type">类别</th><th class="table-author am-hide-sm-only">作者</th><th class="table-date am-hide-sm-only">修改日期</th><th class="table-set">操作</th> ' +
                        '</tr>' +
                        '</thead>' +
                        '<tbody>';
               for(var i=((page-1)*<{$newsPageNum}>);i<(page*<{$newsPageNum}>)&&i<newsTotalNum;i++){
                   content += '<tr>' +
                           '<td>'+(i+1)+'</td>' +
                           '<td><a href="#">'+data[i].title+'</a></td>'+
                           '<td>'+data[i].name+'</td>' +
                           '<td class="am-hide-sm-only">'+data[i].author+'</td>' +
                           '<td class="am-hide-sm-only">'+data[i].time+'</td>' +
                           '<td>' +
                           '<div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs">' +
                           '<a href="<{$urlParent}>/newsUpdate?id='+data[i].id+'>" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</a> ' +
                           '<a href="<{$urlParent}>/newsDel?id='+data[i].id+'>" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</a> ' +
                           '</div></div>' +
                           '</td>' +
                           '</tr>';
               }
                content += '</tbody></table>' +
                        '<div class="am-cf">' +
                        '共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
                        '<div class="am-fr">' +
                        '<ul class="am-pagination" id="page">';
                //判断前面是否还有页面
                if(page == 1){
                    content += '<li class="am-disabled"><a href="#">«</a></li>';
                }else{
                    content += '<li><a href="javascript:showPage('+(page-1)+')">«</a></li>';
                }
                for(var i=1;i<=pageNum;i++){
                    if(i == page){
                        content += '<li class="am-active"><a href="javascript:showPage('+i+')">'+i+'</a></li>';
                    }else{
                        content += '<li><a href="javascript:showPage('+i+')">'+i+'</a></li>';
                    }
                }
                //判断后面是否还有页面
                if(page == pageNum){
                    content += '<li class="am-disabled"><a href="#">»</a></li>';
                }else{
                    content += '<li><a href="javascript:showPage('+(page+1)+')">»</a></li>';
                }
                content += '</ul>' +
                           '</div>' +
                           '</div><hr>' +
                           '</form>';
                $("#listTag").empty();
                $("#listTag").append(content);
            }
        });
    }

显示效果：