jquery实现简单的分页功能

最新推荐文章于 2022-11-10 08:39:30 发布

啊O鹅

最新推荐文章于 2022-11-10 08:39:30 发布

阅读量3.5k

点赞数 6

文章标签： javascript jquery

本文链接：https://blog.youkuaiyun.com/qq_39371823/article/details/105296466

版权

这篇博客介绍了如何使用jQuery实现简单的分页功能，适用于数据量不大的场景。文中通过展示页面代码、样式和具体实现代码，呈现了分页功能的运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery实现简单的分页功能

本文适合少量数据的使用，如果数据条数过多，不太适合！

页面`html`代码

<table>
<!--展示数据的表格-->
</table>
 <ul class="ul">
 <!--用于样式切换的列表-->
 </ul>

`css`样式

  table {
   
      text-align: center;
    }
    .ul li {
   
      padding: 0 5px;
      height: 20px;
      list-style: none;
      float: left;
      border: 1px solid #ccc;
      text-align: center;
      cursor: pointer;
    }
    .active {
   
      background: blue;
      color: #fff;
    }

`jquery`代码

  //使用axja获取后台数据,我这里请求的是本地的json文件
function getdata () {
   
  $.ajax({
   
    type: 'get',
    url: './test.json',
    success: function (res) {
   
      var len = res.length   //后端数据总条数
      var num = 5 //每一页5条数据,可以自己修改
      var totalPage