前端分页从搭建到联调接口数据

之前一直做的是vue项目，分页用element-ui pagination插件来解决，解释教程很全，一直没什么问题。

现在要为公司写一个老项目添加分页，而项目是用jquery搭建的，原生分页一直没处理过遇到了好多麻烦，网上插件很多，但是教程总是差一些东西，尤其是调后台接口这块。经过思考处理，今天写出了原生分页，测试过关，项目已上线，这里和大家分享一下分页搭建联调全过程。

网站jquery的分页有好多，调用方式也类似就不一一介绍了，我随意选择了一款并做了修改，想知道的小伙伴可以留言或者联系到我索取，接下来教程开始。

 

一、首先有个DOM容器用来盛放分页。

<div id="pagination" class="pagination"></div>

二、引入样式表和js文件。

<link rel="stylesheet" href="./plugins/myPagination/myPagination.css">
<script src="./plugins/myPagination/myPagination.js"></script>

三、需要实例化分页插件。

        //总页数，这里是根据总条数/每页线上的数目来的！！！        
        if (parseInt(dataTotal % pageAmount) == 0) {
            totalPage = parseInt(dataTotal / pageAmount)
        } else {
            totalPage = parseInt(dataTotal / pageAmount + 1)
        }

        new myPagination({
            id: 'pagination',
            curPage: 1, //初始页码
            pageTotal: totalPage, 
            pageAmount: pageAmount, //每页多少条
            dataTotal: dataTotal, //总共多少条数据即接口返回的总条数！！！
            pageSize: 5, //可选,分页个数
            showPageTotalFlag: true, //是否显示数据统计
            showSkipInputFlag: true, //是否支持跳转
            getPage: function (page) {
                //获取当前页数
                console.log(page);
                pageNum = page;
                infoShow();  //重新加载ajax请求数据
                dataIdShow(); //重新渲染页面
            }
        })

四、获取接口总条数，传输每页显示的条数，还有显示第几页！！！

var _params = {
  numPerPage: pageAmount, //每页请求的条数
  pageNum: pageNum  //显示第几页
}

function infoShow() {
    $.ajax({
        url: '后台接口',
        dataType: 'json',
        type: 'POST',
        data: _param, //请求参数！！！
        success: function (data) {
            dataTotal = data.total;  //接口的total字段，赋值给分页的总条数。
        },
        error: function (data) {
            console.log(data, 'error');
        }
    })
}
infoShow();

五、渲染页面调用封装的函数即可，默认调用一次。

//接口的数据要用一个变量值存起来，动态渲染到页面上，我这里是mockData.
function dataIdShow() {
    $(".list-detail").html(template('list_detail', mockData)); 
}
dataIdShow();

 

 

效果图：

 

感谢观赏，期待您的宝贵意见。