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>頁 </label> <label>共</label> <span id="total">@(Model.TotalItems)</span> <label>條 </label> <a id="FirstPage" class="a-state" href="javascript:void(0);">首頁 </a> <a id="UpPage" class="a-state" href="javascript:void(0);">上一頁 </a> <a id="DownPage" class="a-state" href="javascript:void(0);">下一頁 </a> <a id="LastPage" class="a-state" href="javascript:void(0);">尾頁 </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