Json資料型別/分頁演算法/資料瀑布流載入

阿新 • • 發佈：2021-01-10

技術標籤：JavaScript

1.Json資料型別

簡單Json的使用

後臺給前端返回的資料格式 JSON
解析json 進行資料繫結

JSON 資料型別是：陣列 + 物件

建立（name上的引號可以不加）

var arr=[
        {"name":"b1"},
        {"name":"b2"},
        {"name":"b3"},
        {"name":"b4"}
    ];

呼叫

console.log(arr[1].name);

在這裡插入圖片描述

2.分頁演算法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style 
>
        * {
            padding: 0;
            margin: 0;
        }

        .page li {
            list-style: none;
            float: left;
            margin: 0 2px;
        }

        .box {
            display: inline-block;
        }

        .btn_next,
        .btn_top {
            width 
: 50px;
            height: 25px;
            border: 1px solid #cbcbcb;
            text-align: center;
            line-height: 23px;
            box-sizing: border-box;
        }

        .page_input {
            width: 30px;
            height: 23px;
            border: 1px solid #cbcbcb;
            outline: none;
            text-align: center;
            box-sizing: border-box;
        }

        .btn {
            width: 50px;
            height: 23px;
            outline: none;
            text-align: center;
            box-sizing: border-box;
            border: none;
        }

        .page_ul>li {
            width: 30px;
            height: 25px;
            line-height: 23px;
            text-align: center;
            border: 1px solid #cbcbcb;
            font-size: 13px;
            box-sizing: border-box;
        }

        .ck {
            background-color: #373ada;
            color: #fff;
        }

        .page_list {
            display: inline-block;
        }

        .btnList {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="page">
            <li class="btn_top">上一頁</li>
            <li class="page_list">
                <ul class="page_ul">

                </ul>
            </li>
            <li class="btn_next">下一頁</li>
            <li>
                <input type="text" class="page_input">
                <button class="btn">跳轉</button>
            </li>
        </ul>
    </div>
    <script>
        var list = document.getElementsByClassName('page_ul')[0]
        var btnList = document.getElementsByClassName('btnList')
        var btn_next = document.getElementsByClassName('btn_next')[0]
        var btn_top = document.getElementsByClassName('btn_top')[0]
        var page_input = document.getElementsByClassName('page_input')[0]
        var btn = document.getElementsByClassName('btn')[0]
        var isTo = true
        var page = {
            tolPage: 20,
            nowPage: 15,
            //實現分頁顯示的
            PageChange: function () {
                var str = ''
                for (var i = 1; i <= this.tolPage; i++) {
                    //第一種情況，後縮
                    if (this.nowPage < 6) {
                        if (i == 7) {
                            str += '<li>' + '...' + '</li>'
                            i = 19
                        }
                        else {
                            str += '<li class="btnList">' + i + '</li>'
                        }
                    }
                    //第二種情況，前縮
                    else if (this.nowPage > 15) {
                        if (i == 2) {
                            str += '<li>' + '...' + '</li>'
                            i = 14
                        }
                        else {
                            str += '<li class="btnList">' + i + '</li>'
                        }
                    }
                    //第三種情況，前後縮
                    else if (this.nowPage <= 15 && this.nowPage >= 6) {
                        //前縮
                        if (i == 2) {
                            str += '<li>' + '...' + '</li>'
                            i = this.nowPage - 2
                        }
                        //後縮
                        if (i == this.nowPage + 2) {
                            str += '<li>' + '...' + '</li>'
                            i = 19
                        }
                        //正常輸出
                        else {
                            str += '<li class="btnList">' + i + '</li>'
                        }
                    }
                }
                list.innerHTML = str
                this.addBnt()
            },
            getBtnPage: function () {
                for (var i = 0; i < btnList.length; i++) {
                    if (btnList[i].innerHTML == this.nowPage) {
                        btnList[i].classList.add('ck')
                    }
                }
            },
            addBnt: function () {
                that = this
                for (var i = 0; i < btnList.length; i++) {
                    btnList[i].onclick = function () {
                        that.nowPage = parseInt(this.innerHTML)
                        that.PageChange()
                        that.getBtnPage()
                    }
                }
            },
        }
        window.onload = function () {
            page.PageChange()
            page.getBtnPage()
            btn_next.onclick = function () {
                if (page.nowPage <= page.tolPage) {
                    page.nowPage++
                    page.PageChange()
                    page.getBtnPage()
                }
                console.log(page.nowPage);
            }
            btn_top.onclick = function () {
                if (page.nowPage > 1) {
                    page.nowPage--
                    page.PageChange()
                    page.getBtnPage()
                }
                console.log(page.nowPage);
            }
            btn.onclick = function () {
                if (!isNaN(parseInt(page_input.value))) {
                    page.nowPage = page_input.value
                    page.PageChange()
                    page.getBtnPage()
                    page_input.value = ''
                    // isTo = false
                }
            }
        }

    </script>
</body>

</html>

3.資料瀑布流載入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 250px;
        }
    </style>
</head>

<body>
    <div class="conter">

    </div>
    <script>
        var conter = document.getElementsByClassName('conter')[0]
        var data = [
            { src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2005235653,1742582269&fm=26&gp=0.jpg' },
            { src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1857771108,984160923&fm=26&gp=0.jpg' },
            { src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2960427566,1786143065&fm=26&gp=0.jpg' },
            { src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1731472669,4215674773&fm=26&gp=0.jpg' },
            { src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1727914444,3729344997&fm=26&gp=0.jpg' },
            { src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2481321790,3127612340&fm=26&gp=0.jpg' },
            { src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1262655631,4054846463&fm=26&gp=0.jpg' },
            { src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=146893042,4244628931&fm=26&gp=0.jpg' },
            { src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1522015854,2481348088&fm=26&gp=0.jpg' },
            { src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3252747978,4060371130&fm=26&gp=0.jpg' },
        ]
        console.log();
        var dataLoad = {
            //第一次載入圖片的數量
            num: 4,
            //控制載入圖片的數量
            nowpage: 1,
            //儲存載入圖片的圖片路徑
            nowData: null,
            //獲取圖片路徑到nowData
            getData: function () {
                this.nowData = data.slice((this.nowpage - 1) * this.num, this.nowpage * this.num)
                this.load()
            },
            //更新頁面的方法
            load: function () {
                for (var i = 0; i < this.nowData.length; i++) {
                    var box = document.createElement('div')
                    var img = new Image()
                    img.src = this.nowData[i].src
                    box.appendChild(img)
                    conter.appendChild(box)
                }
            }
        }
        //剛載入頁面時的狀態
        window.onload = function () {
            dataLoad.getData()
            console.log(dataLoad.nowData);
        }
        //頁面滑動時的變化載入更多圖片
        document.body.onscroll = function () {
            if (this.scrollY + this.innerHeight >= document.body.clientHeight - 1) {
                dataLoad.nowpage++
                dataLoad.getData()
            }
        }
    </script>
</body>

</html>

Json資料型別/分頁演算法/資料瀑布流載入

技術標籤：JavaScript 1.Json資料型別簡單Json的使用後臺給前端返回的資料格式 JSON 解析json 進行資料繫結

SQL Server 在分頁獲取資料的同時獲取到總記錄數

SQL Server 獲取資料的總記錄數，有兩種方式： 1.先分頁獲取資料，然後再查詢一遍資料庫獲取到總數量

python Django框架實現web端分頁呈現資料

這裡介紹使用python-Django框架來實現web端分頁呈現資料，主要說明對應的views，urls，templates三個檔案的程式設計邏輯的實現。

easyUI使用分頁過濾器對資料進行分頁操作例項分析

本文例項講述了easyUI使用分頁過濾器對資料進行分頁操作。分享給大家供大家參考，具體如下：

C#--資料報表分頁的實現彙總

以下是學習筆記：效果如下：通用分頁的設計與實現一、分頁資料查詢的原理分析

redis中分頁快取資料

` @Autowired StringRedisTemplate stringRedisTemplate; @ApiOperation(value = \"查詢操作日誌\" ) @GetMapping(\"/querySysLogList\")

解決Mybatis-Plus操作分頁後資料失效問題

業務場景我們知道在使用PageHelper分頁外掛時，會對執行PageHelper.startPage(pageNum,pageSize);方法後的第一條查詢語句進行分頁操作。在開發中總會遇到這樣的業務情景，在進行分頁查詢後，需要對獲得的列表資料包

百萬級資料，分頁如何處理

最近遇到了這麼一個情況，資料庫裡面的資料由於長期的堆積，導致資料量不斷的上升，而後臺的系統每次進行分頁查詢的時候，效率都會降低很多。後來查看了一下之後，發現此時的分頁原理主要是採用了傳統的物理分頁 lim

【原創】分享一種WPF列表資料的分頁列印方案

核心想法：基於模板，資料與樣式分離，不希望把資料和樣式混在一起拼接。

layui實現自動分頁以及資料表格的過載

技術標籤：筆記前端在我們直接用layui的表格的接收後臺全部資料的時候，所有資料會在同一頁顯示，無法實現自動分頁，最近寫專案的時候碰到了這個問題，把我的解決辦法記錄下來，以後可能會用到。加一條實現搜尋

【UNI-APP】分頁請求資料列表

// 首先在對應的pages.json檔案中，配置重新整理效果 { \"path\" : \"pages/list/list\", \"style\" :

Java處理List集合資料進行分頁展示

第一種方法是用封裝好的PageInfo封裝資料，返回的結果已經把總個數，每頁資料，當前頁，每頁個數都封裝好了（推薦使用）：

react分頁顯示資料的方法

目錄父元件listBox列表元件List按鈕元件PageButton去年年底，嘗試著用react寫個元件化的頁面!

JS處理資料實現分頁功能

這幾天有小夥伴討論起了分頁的相關問題，這裡我也簡單講下前端如何簡單便捷的利用（庫）寫出優雅，好用的分頁工具。

web 資料展示分頁

<el-table :data=\"tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)> <el-table-column prop=\"r\" label=\"序號\" width=\"50\"></el-table-column>

11_08、批量插入資料和分頁

一、批量插入資料 # 製作一張表 from django.db import models class Book(models.Model): title = models.CharField(max_length=32, verbose_name=\'圖書標題\')

網頁中分頁的資料查詢

有些網頁中通常會有一個分頁的樣式，點選上一頁或者下一頁或者是具體的某一頁的頁碼，頁面中可以顯示具體的從資料庫查詢的對應的資料。

google protobuf 資料型別_理解Protobuf資料格式解析

什麼是protobuf？ Protobuf是Google開源的一款類似於json，XML資料交換格式，其內部資料是純二進位制格式，不依賴於語言和平臺，具有簡單，資料量小，快速等優點。目前用於序列化與反序列化官方支援的語言有C++，C#

可變資料型別和不可變資料型別

不可變資料型別數字number(含int、float、bool、complex)、字串string、元組tuple。在同一程式碼塊下，不同變數的值若是相同且是不可變資料型別，那麼它們的id也相同，實際上它們都是同一個值的引用，這既節省了記

詳解JavaScript中的資料型別，以及檢測資料型別的方法

一.js中的資料型別有哪些? 在js中，基本資料型別有五種，分別是 string、number、boolean、null、undefined，不過在ES6中新增加的了一種基本資料型別Symbol(表示獨一無二的值)，其作用主要是從根本上防止屬性名的

Json資料型別/分頁演算法/資料瀑布流載入

1.Json資料型別

簡單Json的使用

2.分頁演算法

3.資料瀑布流載入

相關推薦