前端开发非异步请求做的分页

美国道富前端开发面试|前端开发面试项目经验|0基础面试web前端开发

1.后端接口数据比较多,没有做分页,在前端自己做的分页,看示例

2.一次请求将所有数据存储,后面根据索引展示分页数据,直接看代码吧
3.有网上找过例子,有错误,自己重新修改,比较有用
4.重点:不是后端做的分页(传参limit和page),分页前端来做的,一次请求拿到所有数据,然后做的分页。
代码部分:

html 代码

<script type=”text/javascript”>
    function qukong(a) {
        if (a == “” || null) {
            return “无”;
        }
        else {
            return a;
        }
    };
    $.ajax({
        type: “get”,
        url: “https://route.showapi.com/44-6?showapi_appid=32868&showapi_sign=37c9611696e648c9b5febf972ebffb99”,
        dataType: “json”,
        success: function (msg) {
            var data_msg = msg.showapi_res_body.result;
            //编造表数据
            //表头
            var head =
                ‘<thead><tr>’ +
                ‘<td> 彩票种类 </td>’ +
                ‘<td> 地区 </td>’ +
                ‘<td> 分类 </td>’ +
                ‘<td> 描述 </td>’ +
                ‘<td> 名称</td>’ +
                ‘</tr></thead><tbody>’;
            var end = ‘</tbody>’
            //表内容,后台返回的内容可以封装到这里,随时取用,但是如果数据量很大估计会相当耗资源
            var pageData = [];
            for (var key in data_msg) {
                var data = ‘<tr>’ +
                    ‘<td>’ + qukong(data_msg[key].series) + ‘</td>’ +
                    ‘<td>’ + qukong(data_msg[key].area) + ‘</td>’ +
                    ‘<td>’ + qukong(data_msg[key].issuer) + ‘</td>’ +
                    ‘<td>’ + qukong(data_msg[key].notes) + ‘</td>’ +
                    ‘<td>’ + qukong(data_msg[key].descr) + ‘</td>’ +
                    ‘</tr>’;
                pageData.push(data);
            }
            $(function () {
                var Count = pageData.length;//记录条数
                alert(Count);
                var PageSize = 10;//设置每页示数目
                var PageCount = Math.ceil(Count / PageSize);//计算总页数
                var currentPage = 1;//当前页,默认为1。
                //造个简单的分页按钮
                $(‘.total’).html(PageCount);
                $(‘.show_current’).html(currentPage);
                //显示默认页(第一页)
                $(‘#table’).empty().append(head);
                for (i = (currentPage – 1) * PageSize; i < 10; i++) {
                    $(‘#table’).append(pageData[i]);
                }
                $(‘#table’).append(end);
                //显示选择页的内容
                $(‘.next’).click(function () {
                    if (currentPage < PageCount) {
                        currentPage++;
                        $(‘.show_current’).html(currentPage);
                        $(‘#table’).html(”);
                        $(‘#table’).append(head);
                        for (i = (currentPage – 1) * PageSize; i < PageSize * currentPage; i++) {
                            $(‘#table’).append(pageData[i]);
                        }
                        $(‘#table’).append(end);
                    }
                });
                $(‘.prev’).click(function () {
                    console.log(currentPage)
                    if (currentPage > 1) {
                        currentPage–;
                        $(‘.show_current’).html(currentPage);
                        $(‘#table’).html(”);
                        $(‘#table’).append(head);
                        for (i = (currentPage – 1) * PageSize; i < PageSize * currentPage; i++) {
                            $(‘#table’).append(pageData[i]);
                        }
                        $(‘#table’).append(end);
                    }
                });
            });
        },
        error: function () {
            alert(“网络错误”)
        }
    })
</script>

5.有不懂的,点这个

mac上的前端开发工具|中文前端开发工具|企业前端开发工具

» 本文来自:前端开发者 » 《前端开发非异步请求做的分页》
» 本文链接地址:https://www.rokub.com/4597.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!