2. 程式人生 > >Handsontable的前端分頁與數據庫分頁

Handsontable的前端分頁與數據庫分頁

阿新 • • 發佈：2017-11-17
gof handle .text mage cati offset www. 一次 filter

　　Handsontable雖然處理速度很快，但當數據量達到10W+的時候很容易導致瀏覽器內存泄漏，這時候可以用分頁來解決。官網提供了前端分頁demo，測試後發現也只能處理低於10W的數據，而且調試的時候由於是一次性把所有數據全部加載到瀏覽器，瀏覽器會非常卡，這個時候最好選擇數據庫分頁。

　　一、前端分頁

　　這邊就借用官網的前端分頁核心代碼。

 <div class="descLayout">
        <div class="pad" data-jsfiddle="example1">
          <h2>Pagination</
 
h2>

          <div id="example1"></div>

          <div class="pagination">
            <a href="#1">1</a>
            <a href="#2">2</a>
            <a href="#3">3</a>
            <a href="#4">4</a>
            <a href="#5"
 
>5</a>
            
          </div>
         
      </div>
</div>
            var getData = (function () {
              var data = [
                    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
                    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
                    [
 
0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
                    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
                    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
                    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
                    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
                    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
                    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
                    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
                    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
                    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
                    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
                    [1,2,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],
                    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0],
                    [0,0,0,0,0,0,0,0,0],[1,2,3,4,5,6,7,8,9,0],[0,0,0,0,0,0,0,0,0,0]
                ];

              return function () {
                var page  = parseInt(window.location.hash.replace(‘#‘, ‘‘), 10) || 1,
                  limit = 6,
                  row   = (page - 1) * limit,
                  count = page * limit,
                  part  = [];

                for (;row < count;row++) {
                  part.push(data[row]);
                }

                return part;
              }
            })();

            var container = document.getElementById(‘example1‘),
              hot;

            hot = new Handsontable(container, {
              data: getData(),
              colHeaders: true
            });

            Handsontable.Dom.addEvent(window, ‘hashchange‘, function (event) {
              hot.loadData(getData());
            });

　　效果如下：

　　技術分享

　　二、數據庫分頁

　　我用的是PetaPoco中Page分頁，將得到的總頁數、當前頁數、總條數等信息通過Model返回到頁面。　

 <div>

            <div id="deallist"></div>
            <div class="text-center pageInput pagination" style="padding-top:5px;">
                <label>第</label>
                <span id="CurrentPage">@(Model.CurrentPage)</span>/
                <span id="AllPage">@(Model.TotalPages)</span>
                <label>頁&nbsp;&nbsp;</label>
                <label>共</label>
                <span id="total">@(Model.TotalItems)</span>
                <label>條&nbsp;&nbsp;</label>
                <a id="FirstPage" class="a-state" href="javascript:void(0);">首頁&nbsp;&nbsp;</a>
                <a id="UpPage" class="a-state" href="javascript:void(0);">上一頁&nbsp;&nbsp;</a>
                <a id="DownPage" class="a-state" href="javascript:void(0);">下一頁&nbsp;&nbsp;</a>
                <a id="LastPage" class="a-state" href="javascript:void(0);">尾頁&nbsp;&nbsp;</a>
                <span id="MainContent_gvNewsList_Label2">跳轉到：</span>
                <input type="text" value="1" id="txtNeedPage" style="height:16px !important;width:30px;">
                <a id="lnkGoto" class="a-state" href="javascript:void(0);">
                    跳轉
                </a>
            </div>
        </div>
//首頁 
       $("#FirstPage").click(function () {
            href += "&page=" + 1;
            window.location.href = (window.location.href.indexOf("&") > 0 ? window.location.href.substr(0, window.location.href.indexOf("&")) : window.location.href) + href;
        });
//尾頁
        $("#LastPage").click(function () {
            href += "&page=" + parseInt($("#AllPage").text());
            window.location.href = (window.location.href.indexOf("&") > 0 ? window.location.href.substr(0, window.location.href.indexOf("&")) : window.location.href) + href;
        });
//上一頁
        $("#UpPage").click(function () {
            if (parseInt($("#CurrentPage").text()) != 1) {
                href += "&page=" + (parseInt($("#CurrentPage").text()) - 1);
                window.location.href = (window.location.href.indexOf("&") > 0 ? window.location.href.substr(0, window.location.href.indexOf("&")) : window.location.href) + href;
            }
        });
//下一頁
        $("#DownPage").click(function () {
            if (parseInt($("#CurrentPage").text()) != parseInt($("#AllPage").text())) {
                href += "&page=" + (parseInt($("#CurrentPage").text()) + 1);
                window.location.href = (window.location.href.indexOf("&") > 0 ? window.location.href.substr(0, window.location.href.indexOf("&")) : window.location.href) + href;
            }
        });
//跳轉
        $("#lnkGoto").click(function () {
            if (parseInt($("#txtNeedPage").val().trim()) > 0 && parseInt($("#txtNeedPage").val().trim()) <= parseInt($("#AllPage").text())) {
                href += "&page=" + parseInt($("#txtNeedPage").val().trim());
                window.location.href = (window.location.href.indexOf("&") > 0 ? window.location.href.substr(0, window.location.href.indexOf("&")) : window.location.href) + href;
            }
        });

        var container = document.querySelector(‘#deallist‘);
            hot = new Handsontable(container, {
            height: 533,
            rowHeaders: true,
            colHeaders: @Html.Raw(Model.Headers ==null?"[]":Model.Headers),
            data: @Html.Raw((Model.AssetPoolDataList != null && Model.AssetPoolDataList.ToList().Count > 0) ? serializer.Serialize((from i in Model.AssetPoolDataList
                                    select i).ToList()) : "[]"),
            columns: @Html.Raw(Model.Columns == null ? "[]" : Model.Columns),
            filters: false,
            columnSorting: false,
            sortIndicator: true,
            autoColumnSize: true,
            fixedColumnsLeft: 1,
            fillHandle: false,
            stretchH: ‘all‘,
            viewportRowRenderingOffset:100,
            cells: function (row, col, prop) {
                        var cellProperties = {};
                        cellProperties.renderer = "negativeValueRenderer";
                        return cellProperties;
                    }
      });

　　分頁效果如下：

　　技術分享

　By QJL

Handsontable的前端分頁與數據庫分頁

相關推薦

Handsontable的前端分頁與數據庫分頁

gof handle .text mage cati offset www. 一次 filter 　　Handsontable雖然處理速度很快，但當數據量達到10W+的時候很容易導致瀏覽器內存泄漏，這時候可以用分頁來解決。官網提供了前端分頁demo，測試後發現也只能處理低於

數據庫分頁

http請求 庫函數 () art hit har 方式 其它 space 數據分批查詢數據 Sql Server: 前段時間因為線上項目的活動問題，發現向第三方系統請求數據的時候，請求的數據量居然達到了3w多，請求的數據的方式採用Http請求的形式。

分布式數據庫數據從屬與client與server的數據同步

又一 div 探討 工作 多系統 維護 數據 修改 由於 老實說，眼下市面上很多產品，的確是不成熟的產品。 用過一些，給人蛋痛的感覺。 導言 分布還是集總 今天我們來探討一個非常重要的問題。 每一個程序猿都有其思想，我的思想之中的一個，就是分布式。

數據庫分頁讀取

logs cli data end quest 上下 nbsp led emp .aspx <div align="center"> <asp:Label ID="Label1" runat="server" Text=" 當前頁:"></

分布式系統中的一致性，與數據庫的隔離級別

多個 str 副本 one 基礎上 應用設計 OS 全局 哪裏 一致性，是描述多副本的同步特征（本文我們不討論分布式數據庫中，保持多個分片裏的數據在業務邏輯上一致性的情況，僅討論數據多副本的case）。一般從兩個角度來研究： 從全局數據角度來看： 強一致性： 無論誰、無

數據庫分頁備份

rep data mys gzip base database sed format ash mysql -e ‘show databases;‘ |grep -Ev ‘Database|information_schema|performance_schema‘ |sed

數據庫分頁查詢

pan 分頁 spa 宋體 text ng- styles and sta 分頁語句: Oracle: --這樣的分頁查詢方式不不過針對單表的簡單查詢，對於最內層查詢是復雜的

Flask入門之SQLAlchemy配置與數據庫連接

數據 rdo nsh imp log kref mod pre file 1. 安裝SQLAlchemy pip install flask-sqlalchemy 2. 導入和配置 from flask_sqlalchemy import SQLAlchemy bas

減少與數據庫的連接，提高請求效率

數據庫連接工時系統代碼優化記錄：在查看工時詳情的時候，我們需要將個人的工時分項目，每月進行一個展示。一年有12個月，一個人有多個項目。初始代碼只是為了實現功能，所以在代碼中進行的循環操作，即每個項目每月到數據庫中獲取該用用戶的工時統計。這樣就造成了多次請求數據庫，強求效率很低。差不多查詢一次要2500ms的時

「七天自制PHP框架」第二天：模型與數據庫

數據庫 truct sprintf 和數 int connect 類的定義 框架 調用 往期回顧：「七天自制PHP框架」第一天：路由與控制器，點擊此處 什麽是模型？ 我們的WEB系統一定會和各種數據打交道，實際開發過程中，往往一個類對應了關系數據庫的一張或多張數據表，這

MVC排球計分（二）——需求分析與數據庫設計

logs 用例圖 中國隊 eight 需求 back 過程 style .cn 需求分析和數據庫的設計是很重要的一個環節，這個環節會直接影響項目的開發過程和質量。 這裏做的排球計分程序是一個例子，而且其業務極為簡單，因此，這裏並不是真正的需求分 析和數據庫設計，而是將排球計

需求分析與數據庫設計（二）

-s size spa blog png 設計 需求分析 技術 詳細 需求分析： 作為一名觀眾， 我希望知道詳細的隊伍比分變化和隊伍得分信息， 以便於了解比賽信息和運動員的精彩得分 用例圖： 數據庫設計： 用mvc中自帶的 數據庫SQL Server

ASP.NET MVC 排球計分程序 （三）需求分析與數據庫設計

arch 情況 img 需求 全場 ima 功能 每次 str 需求分析： 軟件名稱：排球計分程序 1、 需要鍵入比賽人員的的姓名，需要根據場上的比賽結果及時做出操作，記分員可以在記錯的情況下撤銷上一部操作。比賽結束，記分員應能查詢到每個隊伍的進球情況，以及攔網、擊球等的

MySQL數據庫分表分區（一）（轉）

procedure 它的 找到 程序 鎖定 into 根據 服務器 har 面對當今大數據存儲，設想當mysql中一個表的總記錄超過1000W，會出現性能的大幅度下降嗎？ 答案是肯定的，一個表的總記錄超過1000W，在操作系統層面檢索也是效率非常低的 解決方案： 目

分布式數據庫系統

小寫 可用性 結果 主鍵約束 忽略 數據 -c man trac 一、分布式數據庫系統 分布式數據庫系統 分布式數據庫系統：物理上分散而邏輯上集中的數據庫系統. 物理上分散：指各網站分散在不同的地方。大可為不同國家。小可為同一建築物的不同位置。

阿裏10年分布式數據庫技術沈澱，AliSQL X-Cluster的應用實戰

阿裏 分布式數據庫 alisql x-cluster 應用實戰 MySQL 數據庫從誕生以來就以簡單、易用、開源為主打特點，成為不少開發者首選的數據庫系統。阿裏集團在 2008 年開始提出"去 IOE"的口號，邁入了 MySQL 數據庫的時代。系統使用大量的 MySQL，配合業務的改造替代

Mysql數據庫分布式事務XA詳解

oar 存儲引擎 成了 from get 分布式事務 value ive 進展 XA事務簡介 XA 事務的基礎是兩階段提交協議。需要有一個事務協調者來保證所有的事務參與者都完成了準備工作(第一階段)。如果協調者收到所有參與者都準備好的消息，就會通知所有的事務都可以提交了（第

java代碼實現highchart與數據庫數據結合完整案例分析（一）---餅狀圖

隱藏 des log cred 數據庫數據 idt string 時間 input 作者原創：轉載請註明出處 在做項目的過程中，經常會用到統計數據，同時會用到highchart或echart進行數據展示，highchart是外國開發的數據統計圖插件， echa

java代碼實現highchart與數據庫數據結合完整案例分析（二）---折線圖

end idt 。。 客戶端 屬性 hid pla 循環 scrip 作者原創：未經博主允許不許轉載 在上一篇的博客中，展示和分析了如何做一個餅狀圖，有疑問可以參考上一篇博客。 現在分析和展示折線圖的繪制和案例分析， 先展示效果圖： 與餅狀圖不同的是，折線圖展現更多的數據

緩存與數據庫一致性保證

pan 處理 查看 多個 讀寫 pool img 後端 span 本文主要討論這麽幾個問題： （1）啥時候數據庫和緩存中的數據會不一致 （2）不一致優化思路 （3）如何保證數據庫與緩存的一致性 一、需求緣起 上一篇《緩存架構設計細節二三事》（點擊查看）引起了廣泛的討論，