杰奇cms官方版实现笔趣阁手机端分页样式

最近在搞杰奇cms仿制一个类似笔趣阁的模板，看到它的手机端的时候，其实就知道这个分页肯定是官方版直接调用无法实现的，但是其实只要思路明确的话，利用js可以很好的实现整个效果。原理就是利用jquery根据class获取到分页的那些参数，然后一个for循环直接加进dom层。
还算完美，以下是效果图（手机浏览器进入）：

这个界面是完全抓取的现成的模板，所以css样式也是现成的，就不需要自己再去写了，所以如果以后要把17mb那些的手机端，移植到杰奇的官方程序上，这篇教程是很适用的。以老古小说网为案例https://www.laoguu.com咱们来看

代码如下：
总共分为三个部分，这是全部的代码，不过记得要先引入jquery

上一页
    下一页
    
    
{?$url_jumppage?}
    

1.第一部分是改造原本的分页代码，比如原本的是这样，option标签一路循环下去，上一页下一页也是通过php调用出来的，但是杰奇根本做不到的。

所以，原本的代码就完全精简为如下了：

上一页
    下一页

这样的意思是，无论是上一页，下一页，还是中间的下拉选项全部都留空了，不给任何值，因为所有的值将交给js处理，让js将杰奇原本的分页代码转进去。

2.放置杰奇的原本分页代码，但是默认隐藏起来。

{?$url_jumppage?}

这句代码，在实际网页访问中，会输出所有的分页和上一页下一页那些，但是不是按照模板需要格式来的，而且二开也特别麻烦。所以默认隐藏了，不过如果看源代码视图，就会发现它的关键值都是有class的，所以完全能让js来读取。

3.利用js读取原本的分页代码关键词，然后生成html代码，渲染进分页的代码中。

读取了第一页的数字，最后一页的数字，当前页的数字，并且知道每页输出20个，于是就可以把这些值处理后赋值到分页代码中，而被删除的option标签对，也就由js生成，一起放进select中了。有i和j这两个字段，就是显示多少章到多少章，简单的计算公式就可以实现。

是不是思路一下子就清晰了。