利用html,js,css实现分页功能详细教程

该案例用到了html,js,css,bootstrap 

附上最终效果图：

---

由于内容主要强调分页模块，所以可能在其他地方较为粗略解释一下：

第一步：下载文件

下载文件：分别是分页插件和该插件的样式，链接在下面：
链接：https://pan.baidu.com/s/1x7H4A5HZWt8CDg_2-THpfA 
提取码：5aca

第二步：解压缩

解压缩，在项目中引入文件：

例：

{# 引入自定义分页样式文件 #}
     <link href="{% static 'libs/bootstrap-paginator/bootstrapPaginator.css' %}" rel="stylesheet"/>

{# 引入自定义分页js文件 #}
     <script src="{% static 'libs/bootstrap-paginator/bootstrapPaginator.js' %}"></script>

 第三步：引入文件

在html文件中写上如下代码：

{# 分页 #}
   <div class="sorterBody">
        <div class="sorter">
            <ul id="page"></ul>
        </div>
   </div>

第四步：根据后端接口需求定义需要传的参数

我这边以我的为例：

{# 检测员列表 #}
        var currentPage = 0;//当前页
        var pageSize = 8;   // 一页长度
        var inspectorNmae = ''//检测员姓名
        var inspectorCode = ''//检测员姓名

第五步：调用接口，获取数据 

function render() {
            var insData = {
                "csrfmiddlewaretoken": getCookie('csrftoken'),
                "start": currentPage,
                "length": pageSize,
                "columns[5][search][value]": inspectorNmae,
                "columns[7][search][value]": inspectorCode,
            }

            if (currentPage <= 1) {
                insData.start = 0
            } else {
                insData.start = (currentPage - 1) * 8
            }
            //展示loading
            $('.loading').css('display', 'flex')
            $.ajax({
                "dataType": "json",
                "timeout": 2000,
                "type": "POST",
                "url": "inspectorlist",
                "data": insData,
            }).done(function (data, callback, settings) {
                //展示loading
                $('.loading').css('display', 'none')
                console.log("abc", data)
                var insList = data.data
                var insCardHtml = ''
                if (data.recordsTotal == 0) {
                    insCardHtml += '<div class="col-md-12 cardItem">' +
                        '没有检索到数据'
                    '</div>'
                } else {
                    insList.forEach(item => {
                        insCardHtml += ' <div class="col-md-6" style="padding-left: 15px">\n' +
                            '<div class="cardBody">\n' +
                            '<div class="col-md-2 cardImg">\n' +
                            '<img src="../../../../static/img/headPic.png" width="80" height="80">\n' +
                            '</div>\n' +
                            '<div class="col-md-10 cardInfo">\n' +
                            '<div class="cardLabel">\n' +
                            '<div class="col-md-3"><b>检测员：</b><span class="cardBlack">' +
                            item.UserName +
                            '</span></div>\n' +
                            '<div class="col-md-5"><b>ID：</b><span\n' +
                            'class="cardBlack">' +
                            item.InspectorCode +
                            '</span></div>\n' +
                            '<div class="col-md-2"><a class="cardBlue">人员信息</a></div>\n' +
                            '</div>\n' +
                            '<div class="cardLabel">\n' +
                            '<div class="col-md-3"><b>累计单量：</b><span class="cardBlack">' +
                            item.WorkCount +
                            '</span></div>\n' +
                            '<div class="col-md-5">\n' +
                            '<b>检测星级：</b>\n' +
                            '<div class="star-rating">\n' +
                            '<div class="star-rating-top" style="width:' + item.Level * 20 + '%">\n' +
                            '<span></span>\n' +
                            '<span></span>\n' +
                            '<span></span>\n' +
                            '<span></span>\n' +
                            '<span></span>\n' +
                            '</div>\n' +
                            '<div class="star-rating-bottom">\n' +
                            '<span></span>\n' +
                            '<span>