AJAX分页效果简单实现（图文教程）

来源：动视网责编：小OO 时间：2020-11-27 19:48:06

AJAX分页效果简单实现（图文教程）

最近写一个给用户组添加角色的功能，要求一边是未添加的角色，一边是已添加的角色，还有搜索功能.点击添加后，ajax保存操作。考虑功能为待查询功能分页 .下方分页条.一共有 2*2 ，4个ajax…。JS代码如下：HTML代码如下：

推荐度：

点击下载本文 文档为doc格式

导读最近写一个给用户组添加角色的功能，要求一边是未添加的角色，一边是已添加的角色，还有搜索功能.点击添加后，ajax保存操作。考虑功能为待查询功能分页 .下方分页条.一共有 2*2 ，4个ajax…。JS代码如下：HTML代码如下：

这篇文章主要为大家详细介绍了AJAX分页效果的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近写一个给用户组添加角色的功能,要求一边是未添加的角色,一边是已添加的角色,还有搜索功能, 点击添加后,ajax保存操作.

考虑功能为待查询功能分页 , 下方分页条, 一共有 2*2 ,4个ajax…

JS代码如下:

HTML代码如下:

<!-- 两个相同的p 下面只是一个-->
<p class="panel-body col-md-6">
 <p style="border: 1px solid #E0E0E0;border-radius: 4px">
 <p class="panel-heading " style="background-color:#E0E0E0; ">

 <h2 class="panel-title"><b>已选角色</b></h2>
 </p>
 <p id="firstCheck" class="panel-body">
 <p style="padding-left: 0 !important;" id="firstCheck" class="panel-body">
 <form class="form-inline" method="POST" >
 <p class="form-group m-r-10">
 <input id="currentRoleCheckName" type="text" class="form-control" placeholder="角色名称" name="fname" maxlength="40" />
 </p>
 <p class="checkbox m-r-10">
 </p>
 <button id="currentCheck"type="button" class="btn btn-sm btn-primary m-r-5" onclick="currentRoleCheck()" >查询</button>
 </form>
 </p>
 <p >
 <table id='data-table' class='table table-bordered' >
 <thead>
 <tr>
 <th>角色名称</th>
 <th>备注信息</th>
 <th>操作</th>
 </tr> 
 </thead>
 <tbody id="currentRole">
 <!--
 当前用户组已有角色list
 -->

 </tbody>
 </table>
 </p>
 <p class="buttonBox">

 <p align="right">
 <ul id="fy_list" class="pagination pagination-sm m-t-0 m-b-10 ">

 </ul>
 </p> 
 </p> 

 </p>

 </p>
</p>

上面是我整理给大家的，希望今后会对大家有帮助。

$.ajax()方法怎样从服务器里获取json数据

ajax实现简单实时验证功能

Vue怎么进行ajax请求公共方法