使用纯js写的一个分页

上图晒效果：

     网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用limit进行分页。

     因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用

这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问题的

废话不多说，直接上代码了！      注：本项目是全程使用js来写的，前台的数据通过ajax进行获取，然后再进行拼装，动态加载到页面。

1.先把上一页，下一页等的代码附上(里面的值都是伪值，下面会在js里进行重新赋值的！)

<ul id="page">    <li id="shouye" >      <a href='javascript:indexpage(1);'>首 页</a>    </li>    <li id="shangyiye" >      <a href='javascript:indexpage(-1);'><i></i>上一页</a>    </li>    <li ><a id="one" href="javascript:void(0);" >1</a></li>    <li><a id="two" href="javascript:void(0);" >2</a></li>    <li><a id="three" href="javascript:void(0);" >3</a></li>    <li ><a id="five" href="javascript:void(0);" >...</a></li>    <li><a id="fore" href="javascript:void(0);" >13855</a></li>    <li class='p-next'>      <a href='javascript:indexpage(-3);' onclick="jumpToPage('2','/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);">下一页<i></i></a>    </li>    <li id="weiye" class='p-next'>      <a href='javascript:void(0);' onclick="indexpage(0);">尾 页</a>    </li>    <li >            <span id="span_number">共13855页 到第<input type="text" id="input_number" />页              <input name="" value="确定" type="button" onclick="jumpToPage(jQuery('#input_number').val(),'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);" />            </span>    </li>  </ul>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：使用纯js写的一个分页

关键词：JS