用JS实现分页功能

时间：2022-09-20 20:28:45

最近做项目的时候碰到了分页问题，在这里把过程写下来，分享一下经验。

首先，我们应该明确一下分页的逻辑步骤：

  1. 从后台获取数据
  2. 确定每页显示数量以及总页数
  3. 显示数据

步骤明确了，接下来，开始写代码：

.html部分
假设html文件里已经有一个表格框架和分页按钮，默认页数设为1（为了方便我直接用bootstrap框架写分页按钮）

<div>     
<table id="table">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody id="tbody">

</tbody> 
</table>
</div>
<div>
<ul class="pagination">
<li><a id="left" href="#">上一页</a></li>  
<li class="active"><a id="now" href="#">1</a></li>
<li><a id="right" href="#">下一页</a></li>
</ul>
</div>

.js部分
定义三个变量，后面会用到

var num=6;//每页显示多少条数据，暂定设为6.
var page;//总页数
var now_page=1;//当前页数

在这里我是用AJAX从后台获取数据的

$.ajax({
        url : "",/*获取自己后台对应的url*/
        type : "post",
        data : {
/*原代码发送的是查询条件数据，具体视项目而定*/
        },
        dataType : "json",
        contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
        success : function(result) {
/*主体代码*/
        }
});

这样子数据就拿到前端了，接下来只需要在主体代码里捣鼓就行了。

然后是确定每页显示数量以及总页数，这个只有2行代码，只需要在主体代码里加上就行。

$.ajax({
        url : "",/*获取自己后台对应的url*/
        type : "post",
        data : {
/*原代码发送的是查询条件数据，具体视项目需求而定*/
        },
        dataType : "json",
        contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
        success : function(result) {
/*主体代码*/
if(result.data.length%num==0){
            page=result.data.length/num;
/*数据长度是6的倍数，直接取商作为总页数*/
        }
else{
            page=Math.ceil(result.data.length/num);
/*数据长度不是6的倍数，用ceil()函数向上取整*/
        }   
        }
});

另外，在写程序的时候，为了简介明了，我们习惯把某些功能写成函数，然后再调用它。所以在这里我要把显示数据这个行为写成函数，这样子最后只需要在主体代码中调用它，就能直接显示我们需要的数据。

下面写一个显示数据的函数 dataDisplay(result,begin,end)，里面设有三个参数，result代表后台返回的数据，begin和end代表显示第begin到第end条数据。

function dataDisplay(result,begin,end){
var str; 
for(var i=begin;i<end;i++){
/*用拼接字符串的方式，把数据动态添加到前端页面的表格上*/
        str="<tr>" +
"<td>"+result[i].orderId+"</td>" +
"<td>"+result[i].orderAmount+"</td>" +
"<td>"+time+"</td>" +
"<td>"+result[i].custName+"</td>" +
"<td>"+result[i].msgType+"</td>";

        $("#tbody").append(str);
/*代码里拼接上去的数据仅供参考，具体视项目需求而定*/

    }
}

于是我们可以在主体代码里调用这个函数了

$.ajax({
        url : "",/*获取自己后台对应的url*/
        type : "post",
        data : {
/*原代码发送的是查询条件数据，具体视项目而定*/
        },
        dataType : "json",
        contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
        success : function(result) {
/*主体代码*/
if(result.data.length%num==0){
            page=result.data.length/num;
/*数据长度是6的倍数，直接取商作为总页数*/
        }
else{
            page=Math.ceil(result.data.length/num);
/*数据长度不是6的倍数，用ceil()函数向上取整*/
        }

var index=num;
/*此时index和num都为6*/
        dataDisplay(result.data,0,index);
/*默认第一页显示第0条到第index条数据*/

        $("#right").click(function(){
            now_page++; /*每次点击下一页，页数+1*/
            $("#page").text(now_page);/*改变分页按钮上显示的页数*/
if(now_page+1>page){
                $("#right").removeAttr("disabled");
/*如果是最后一页，就禁用a标签*/
            }
else{
                $("#right").attr('disabled',"true");
/*如果不是最后一页，就重新启用a标签*/
            }

if(now_page-1<1){ 
                $("#left").removeAttr("disabled");
/*如果是第一页，就禁用a标签*/
            }
else{
                $("#left").attr('disabled',"true");
/*如果不是第一页，就重新启用a标签*/
            }
            $("#tbody").empty();/*清空上一页显示的数据*/
            dataDisplay(result.data,index,index=index+num);
/*显示新一页的数据，*/
        });

        $("#left").click(function(){
            now_page--;/*每次点击上一页，页数-1*/
            $("#page").text(now_page);  //改变分页按钮上显示的页数
if(now_page-1<1){
                $("#left").removeAttr("disabled");
/*如果是第一页，就禁用a标签*/
            }
else{
                $("#left").attr('disabled',"true");
/*如果不是第一页，就重新启用a标签*/
            }

if(now_page+1>page{
                $("#right").removeAttr("disabled");
/*如果是最后一页，就禁用a标签*/
            } 
else{
                $("#right").attr('disabled',"true");
/*如果不是最后一页，就重新启用a标签*/
            }
            $("#tbody").empty();/*清空上一页显示的数据*/
            dataDisplay(result.data,index=index-2*num,index=index+num);
/*显示新一页的数据，*/                   
        });
        }
});

到这里为止，分页功能基本已经实现了。当然你也可以自己修饰分页按钮，例如禁用a标签的同时把按钮背景颜色设为灰色等等。
标签：

相关文章