table不符合条件滚动时，如何判断滚动趋势。

Question

问题

滚动到最后一页时，不满足滚动条件，如何判断滚动趋势？

问题出现的环境背景及自己尝试过哪些方法

上司要求做一个table滚动到底部可以自动加载下一页数据，滚动到顶部可以自动加载上一页数据的项目demo。前面获取的分页数据满足滚动时，都可以实现，但加载完最后一页数据的时候，如果数据较少，则无法满足滚动条件。也就无法滚动加载上一页。
本来如果数据不清空时，是没有问题的，但是上司要求只能显示一页数据，这就有问题了。
请教各位大神，有何良策？

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
html代码：
<div class="main_bd">

<div class="col_main js_col_main" style="height: 400px;">
    <div id="js_contacts4" class="col_mainInner">
        <div class="contact_view">
            <div class="js_toolbar tool_bar">
                <div class="bar_left toolbar_search_add_box">
                    <a class="js_menu_search icon icon_search" style="display: block;"></a>
                    <div class="js_menu_search_box toolbar_search_form" style="z-index: 400; display: none;">
                        <input type="text" class="js_menu_search_input input_text" name="query" placeholder="输入商品编号/商品名称" id="token-input-product" autocomplete="off" style="outline: none;">
                        <a class="glyphicon glyphicon-search" title="搜索" style="margin-left:-30px;"></a>
                    </div>
                    <div class="dropdown drop_choose_menu">
                        <a class="choose_menu_title">
                            <span class="dropdown-toggle-text">商品分类</span>
                        </a>
                    </div>
                </div>
                <div class="bar_right_text-title">
                    <div class="dropdown drop_page_title">
                        <a class="filter page_title dropdown-toggle" data-toggle="dropdown">
                            <span class="dropdown-toggle-text">商品存档</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="contact_box">
                <div class="js_party_tree tree_box" style="overflow-y: auto;">
                    <div id="contact-product" style="padding-top: 5px">
                    </div>
                </div>
                <div class="js_member_list tree_list">
                    <div class="js-right-content">
                        <div class="table-responsive">
                            <table class="table table-bordered" style="margin-bottom:0;">
                                <tbody id="product_head">
                                    <tr>
                                        <th class="rem-5">
                                        </th>
                                        <th class="rem-4">
                                            NO
                                        </th>
                                        <th class="rem-5">
                                            商品图片
                                        </th>
                                        <th class="rem-8">
                                            商品编号
                                        </th>
                                        <th class="rem-8">
                                            商品名称
                                        </th>
                                        <th class="rem-8">
                                            属性规格
                                        </th>
                                        <th class="rem-5">
                                            仓库库存
                                        </th>
                                        <th class="rem-5">
                                            成本价
                                        </th>
                                        <th class="aligncenter rem-5">
                                            市场价
                                        </th>
                                        <th class="aligncenter rem-5">
                                            VIP价
                                        </th>
                                        <th class="aligncenter rem-5">
                                            基本单位
                                        </th>
                                        <th class="rem-5">
                                            商品单位
                                        </th>
                                        <th class="rem-5">
                                            转换关系
                                        </th>
                                        <th class="rem-5">
                                            库存单位
                                        </th>
                                        <th class="rem-5">
                                            转换关系
                                        </th>
                                    </tr>
                                </tbody>
                                <tbody id="product_list"></tbody>
                                <tbody id="product_foot"></tbody>
                            </table>
                        </div>
                        <div class="js_load_empty text_center" style="display: none; padding: 50px;">
                            没有成员
                        </div>
                        <div class="js_loading text_align_center list_empty_loading" style="text-align: center;
                        margin-top: 100px; display: none;">
                        </div>
                        <div class="js_load_tail text_align_center list_empty_loading" style="display: none;
                        text-align: center;">
                        </div>
                    </div>
                    <div class="form-group datatable foot" style="overflow: hidden;height:auto;">
                        <div class="footTips">
                            <div class="dataTables_info" id="producteditable_info" role="status" aria-live="polite"></div>
                        </div>
                        <div class="foot-right">
                            <div class="dataTables_paginate paging_simple_numbers" id="editable_paginate">
                                <ul class="pagination" id="producttableFoot"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
@商品列表的模板@
<script type="text/x-jquery-tmpl" id="product_list_tmpl">

<tr class="gradeA odd" role="row" {{if page}}id="page${page}" data-page="${page}" data-pageIndex="true"{{/if}}>
    <td class="aligncenter sorting_2 rem-5">
        <input type="checkbox" name="iCheck" class="checkbox productRadio" data-id="${ProductStockId}" data-skuid="${SKUNum}" data-name="${ProductName}" data-skuname="${SKUName}" data-markep="${MarketPrice}" data-vipp="${VipPrice}" data-baseu="${BaseUnit}" data-productu="${ProductUnit}" data-ProductExchangeRate="${ProductExchangeRate}" data-stocku="${StockUnit}" data-StockExchangeRate="${StockExchangeRate}" data-cost="${BaseCostPrice}" data-uablestock="${UableStock}" data-brand="${Brand}">
    </td>
    <td class="rem-4">
        ${index+1}
    </td>
    <td style="padding:5px" class="rem-5">
        <img src="{{if SkuPictureUrl=="" || SkuPictureUrl==null}}@Url.Content("~/Content/images/productindex.png"){{else}}${SkuPictureUrl}{{/if}}" style="border:none;height: 30px;width: 30px;" class="bigImg">
    </td>
    <td class="rem-8">
        ${SKUNum}
    </td>
    <td class="rem-8">
        ${ProductName}
    </td>
    <td class="rem-8">
        ${SKUName}
    </td>
    <td class="rem-5">
        ${UableStock}
    </td>
    <td class="rem-5">
        ${CostPrice}
    </td>
    <td class="rem-5">
        ${MarketPrice}
    </td>
    <td class="rem-5">
        ${VipPrice}
    </td>
    <td class="rem-5">
        ${BaseUnit}
    </td>
    <td class="rem-5">
        ${ProductUnit}
    </td>
    <td class="rem-5">
        ${ProductExchangeRate}
    </td>
    <td class="rem-5">
        ${StockUnit}
    </td>
    <td class="rem-5">
        ${StockExchangeRate}
    </td>
</tr>

</script>
js代码：
//滚动
var before = 0,loading = false;

    $("#product_list").scroll(function () {
        var after = $("#product_list").scrollTop();
        var ref = $("#contact-product").jstree(true),
            selectedDepartId = ref.get_selected().toString();//分类
        var $this = $(this),
            viewH = $this.height(),//可见高度
            contentH = $this.get(0).scrollHeight,//内容高度
            scrollTop = $this.scrollTop();//滚动高度
        var page = $("#producttableFoot").find("li.active a").text();
        if (before < after) {//往上滚
            before = after;
            var maxPage = $("#producttableFoot").find("li.next a").attr("page");
            if (loading || parseInt(page) >= parseInt(maxPage)) {
                return;
            }
            if (scrollTop / (contentH - viewH) >= 1) { //到达底部100px时,加载新内容
                console.log("加载下一页");
                loading = true;
                getProductList('{"ProductName":"' + $("#token-input-product").val() + '","SKUNum":"' + $("#token-input-product").val() + '" }', parseInt(page) + 1, 10, selectedDepartId, 1);
                before = 0;
            }
        }else if (before > after) {//下
            before = after;
            if (loading || parseInt(page) <= 1) {
                return;
            }
            if (scrollTop <= 2) {
                console.log("加载上一页");
                loading = true;
                //加载获取后数据向前添加，倒序添加，并且记录页码
                getProductList('{"ProductName":"' + $("#token-input-product").val() + '","SKUNum":"' + $("#token-input-product").val() + '" }', parseInt(page) - 1, 10, selectedDepartId, 2);
                before = 0;
            }
        }
    }); 

//获取商品列表

    function getProductList(searchJson, pageIndex, pageSize, depId) {
        pageIndex = pageIndex || 1; //默认为第一页
        pageSize = pageSize || 10; //默认为10条数据
        var defaultSearchJson = searchJson || '';
        $.get("@Url.Action("GetSkuPageData", "Product")", { page: pageIndex, pageSize: pageSize, searchJson: defaultSearchJson, catlog: depId, ware: ""}, function (result) {
            if (result.ContentEntity.Body.length > 0) {
                var newTmplData = result.ContentEntity.Body;
                    for (var i = 0, len = newTmplData.length; i < len; i++) {
                        newTmplData[i].UableStock = newTmplData[i].UableStock * newTmplData[i].ProductExchangeRate;
                        newTmplData[i]['index'] = (pageIndex - 1) * pageSize + i;
                        if (i == 0) {
                            newTmplData[i]['page'] = pageIndex;
                        }
                    }
                $("#product_list").empty();
                $("#product_list_tmpl").tmpl(newTmplData).appendTo("#product_list");
                setTimeout(function () {
                    $("#product_list").scrollTop(5);
                }, 50);
                $('.productRadio').iCheck({//当存在数据时，初始化iCheck控件并默认选中第一行
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                    increaseArea: '20%' // optional
                });
                jQuery.get("@Url.Content("~/Content/tmpl/foot1.htm")", function (repText) {
                    jQuery("#producttableFoot").empty();
                    jQuery.template("tmplData", repText);
                    if (result.ContentEntity.Foot) {
                        jQuery.tmpl("tmplData", result.ContentEntity.Foot).appendTo("#producttableFoot");
                    }
                });
            } else {
                $("#product_list").html("<div style='text-align:center'>没有商品</div>");
            }
            var html = "本页显示 " + ((pageIndex - 1) * pageSize + 1) + " 到 <span class='pageSize'>" + pageIndex * pageSize + "</span> 条数据，共有 " + result.ContentEntity.TotalRows + " 条数据";
            $("#producteditable_info").html(html);
            setTimeout(function () {
                loading = false;
            }, 500);
        }).error(function (xhr, errorText, errorType) {
            swal("", "服务异常，请稍后重试", "warning");
        });
    }

你期待的结果是什么？

有什么替换方法？或者插件可以实现？