question
when scrolling to the last page, the scrolling condition is not met, how to judge the scrolling trend?
the environmental background of the problems and what methods you have tried
the boss asks for a table that scrolls to the bottom to automatically load the next page of data, and to the top to automatically load the previous page of project demo. The paging data obtained above can be implemented when scrolling is satisfied, but when the last page of data is loaded, if there is less data, the scrolling condition cannot be met. You cannot scroll to load the previous page.
there is no problem if the data is not empty, but the boss requires that only one page of data can be displayed, which is a problem.
I would like to ask the great gods, do you have any good ideas?
related codes
/ / Please paste the code text below (do not replace the code with pictures)
html Code:
< 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 >
@ template for the product list @
< 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 Code:
/ / scroll
var before = 0charge loading = false;
$("-sharpproduct_list").scroll(function () {
var after = $("-sharpproduct_list").scrollTop();
var ref = $("-sharpcontact-product").jstree(true),
selectedDepartId = ref.get_selected().toString();//
var $this = $(this),
viewH = $this.height(),//
contentH = $this.get(0).scrollHeight,//
scrollTop = $this.scrollTop();//
var page = $("-sharpproducttableFoot").find("li.active a").text();
if (before < after) {//
before = after;
var maxPage = $("-sharpproducttableFoot").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":"" + $("-sharptoken-input-product").val() + "","SKUNum":"" + $("-sharptoken-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":"" + $("-sharptoken-input-product").val() + "","SKUNum":"" + $("-sharptoken-input-product").val() + "" }", parseInt(page) - 1, 10, selectedDepartId, 2);
before = 0;
}
}
}); / / get product list
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; iPP) {
newTmplData[i].UableStock = newTmplData[i].UableStock * newTmplData[i].ProductExchangeRate;
newTmplData[i]["index"] = (pageIndex - 1) * pageSize + i;
if (i == 0) {
newTmplData[i]["page"] = pageIndex;
}
}
$("-sharpproduct_list").empty();
$("-sharpproduct_list_tmpl").tmpl(newTmplData).appendTo("-sharpproduct_list");
setTimeout(function () {
$("-sharpproduct_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("-sharpproducttableFoot").empty();
jQuery.template("tmplData", repText);
if (result.ContentEntity.Foot) {
jQuery.tmpl("tmplData", result.ContentEntity.Foot).appendTo("-sharpproducttableFoot");
}
});
} else {
$("-sharpproduct_list").html("<div style="text-align:center"></div>");
}
var html = " " + ((pageIndex - 1) * pageSize + 1) + " <span class="pageSize">" + pageIndex * pageSize + "</span> " + result.ContentEntity.TotalRows + " ";
$("-sharpproducteditable_info").html(html);
setTimeout(function () {
loading = false;
}, 500);
}).error(function (xhr, errorText, errorType) {
swal("", "", "warning");
});
}what result do you expect?
What are the replacement methods for? Or can plug-ins be implemented?