找回密码
当前位置：前端开发者 > 教程 > 正文

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

2018-07-15 分类：教程 阅读(719) 评论(0)

美国道富前端开发面试|前端开发面试项目经验|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上的前端开发工具|中文前端开发工具|企业前端开发工具

赞(0)
前端开发者 » 前端开发非异步请求做的分页
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论