分页功能实现（php+js+scss+html）

先看效果图

html结构代码

<div class="pages-wrap">

    <span class="total">共{$pages['total']}条 / {$pages['totalPage']}页</span>

    <span class="main">

        <!--[靠前页数]-->
        {if $pages['prevPage']}
        <a class="prev" href="{$pages['prevPage']}" title="前一页"></a>
        {else}
        <a class="prev disabled" href="javascript:;"></a>
        {/if}

        <!--[居中页数]-->
        {loop $pages['data'] $v}
        {if $v['round']}
        <a class="round {$v['round']}" href="{$v['url']}" title="第{$v['page']}页"></a>
        {else}
        <a class="{if $page == $v['page'] || !$page && $v['page'] == 1}active{/if}"
           href="{$v['url']}"
           title="第{$v['page']}页"
        >{$v['page']}</a>
        {/if}
        {/loop}

        <!--[靠后页数]-->
        {if $pages['nextPage']}
        <a class="next" href="{$pages['nextPage']}" title="下一页"></a>
        {else}
        <a class="next disabled" href="javascript:;"></a>
        {/if}
    </span>

    <span class="input">
        <span>跳转至</span>
        <input class="skin-bg-white" type="number" placeholder="" value="{$page}" />
        <span>页</span>
    </span>

</div>

javascript代码（引用了JQ）

$(document).ready(function () {
   
        var pagesData = JSON.parse('{json_encode($pages)}'), // 分页字符串
            totalPage = pagesData['totalPage'],
            urlMode =