JS简单原生分页

html部分随便写即可
不同需求写不同样式
html
<div class="container main clear"> <ul> </ul> </div> <div class="container odd"> </div>
这里简单些一个ul标签用来写入内容
odd呢代表我们分页要写入的a标签页数

这里后台我用到了node来书写，不过原理是相通的，用其他后端语言也是可以实现的。
node

const express=require('express') //建立一个服务器
const mysql=require('mysql')    //建立mysql服务器
const url=require('url')        //解析Get参数
const qs=require('querystring')  //将Get参数转换为对象


const db=mysql.createPool({           //连接服务器
    host:'localhost',                  //端口
    user:'root',                         //账号
    password:'root',                    //密码
    database:'nz2002',                //库名
    port:3306                        //端口号
})

const app=express()                //建立服务器
app.use(express.static('src'))        //监听文件夹
app.use(express.urlencoded())          //读取post请求数据不过这里没有用到，不用管

app.get('/data_content',(req,res)=>{        //接收Get请求
    let objVal=url.parse(req.url)           
    let obj=qs.parse(objVal.query)              //获取参数并将参数转换为对象格式
    let startLine=(obj.page-1)*obj.line          //获取当前的参数的索引下标，这个公式是死的  ，可以记住 (当前页数-1) *要显示的条数   这样我们就可以获取到每页的第一条数据的索引
    let sql=`select * from \`goods\`  where  \`cat_one_id\`='${obj.cat_one_id}'  limit  ${startLine} ,${obj.line}`
    //执行mysql语句 的分页查询  由于这里我只是单独查询数据库的一类  所以使用到了where 这个不是必须的  可以根据情况来使用
    db.query(sql,(err,reselt)=>{       //执行mysql语句
        if(err!==null){              //判断如果有误，就显示错误语句，如果显示正确就是null，这个可以自己输出看看，这里就不做演示
            console.log(err)   
            return
        }
        
    //  res.json(reselt)
         let sql1=`select * from \`goods\` where  \`cat_one_id\`='${obj.cat_one_id}'`        //再次执行MySQL语句，这里主要是获取他的所有条数，并且来判断我们可以分为几页，然后生成相应的a标签
    db.query(sql1,(err1,reselt1)=>{
        if(err!==null){
            console.log(err1)
            return
        }
        // res.json(reselt1)
        let num=reselt1.length     //总条数
        let odd=Math.ceil(num/obj.line)  //能分几页
       reselt.forEach(function(item){       //给所有的参数赋值
                item.num=num                  //总条数
                item.odd=odd           //总页数
       })
       res.json(reselt)              //返回数据
    })
    })
   
})
app.listen(8080,()=>{
    console.log("监听成功")
})

JS接收部分

<script>
        oAjax(1)   //默认第一次执行是第一页的内容
       function oAjax(page){
        $.ajax({
            url:'/data_content',  //发送参数
            type:'get',          //发送请求
            data:{cat_one_id:'食品酒水',line:8,page:page}, //发送数据
            dataType:"json",                  //接收数据格式
            success:function(res){                //接受数据
                // console.log(res)               //这里的res是一页的8条数据
                let str=''                  
                res.forEach(function(item){
                    str+=` <li>
                <div class="img"><img src="${item.goods_big_logo}" alt=""></div>
                <div class="content"><p>${item.goods_name}</p></div>
    
            </li>`
                })
                $('.main ul').html(str)    //将其写入到页面中
                let arr=''                 //生成a标签
                for(let i =1;i<= res[0].odd;i++){      //res[0].odd,使用0是因为最少他有1条数据，这样可以保证，只有1条数据也可以读取到  ，odd是我们后台穿过来的总页数
                      arr+=`<a href="JavaScript:;">${i}</a>`   //生成a标签
                }
                $('.odd').html(arr)   //将其写入
                let oA=document.querySelectorAll('.odd a')
             //获取到a标签
             
                oA.forEach(function(item){   //循环遍历a标签，点击a标签时候获取到他是第几页，之后再次调用,
                   item.onclick=function(){
                         oAjax(item.innerText)
         }
      })

            }
        })
       }
  
    </script>

效果图

如有不解，请在下方留言共同探讨！