Handsontable的前端分页与数据库分页

　　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