直接调用的分页控件U.UF.P.displayDataPaging
规范命名为: U.UF.P.displayDataPaging(_pageEl,_params, function (params,createPageControlcallback){},function(data){});
参数一: {element}(el):需要插入分页控件的位置
参数二: {object}(num):分页基础参数,形如:{ "start": 0, "amount": 200, "numberPerPage": 40, "searchText": _searchName,...... };
start:数据库取数开始位置,必须为0.
amount:从数据库取多少条数据。理想状态下amount是numberPerPage的整数倍。
numberPerPage:前端每页显示多少条数据,
后面的属性可自己定义。
注释:object的第1, 2,3的键不可更改,必须为start,amount,numberPerPage,可自己构建参数4,,5,6...后面的参数,以便于获取数据库的值
参数三: {function}(function(params,callback){分页取数代码}):数据库分页取数后的回调函数
参数四: {function}(function(data){}):回调函数,进行数据的展示
完整示例:
//显示分页的元素位置
var _pageEl = document.getElementById("resultarea");
//找到用户填写的搜索信息
var _params = { "start": 0, "amount": 200, "numberPerPage": 40, "searchText": "电脑" };
//调用分页函数
U.UF.P.displayDataPaging(_pageEl,_params, function (params,createPageControlcallback) {
//有思俱乐部取数据库数据的方法,异步ajax请求
//params.start为数据库取数的起始位置, params.amount为数据库取数的数量
U.A.Request("http://java.1473.cn", ["mysql.1473.cn", "2021TaobaoDB", "Product_Search", params.searchText,params.start, params.amount], function (r) {
//分批获取数据库产品数据
var _data = r.value;
//根基数据量的大小,创建分页控件的回调函数
createPageControlcallback(_data);
});
}, function (data) {
//输出数据
printProducts(data);
});
/*分页显示产品信息
*@param{array} data 待显示的数据
*@param{int} number 每页显示的数据量
*@param{int} page 显示第几页
*/
printProducts = function (data) {
var _data = data;
//获取放置内容的元素
var _content = document.getElementById("productArea");
//清空以前的产品信息
_content.innerHTML = "";
//循环输出
for (var i = 0; i < data.length; i++) {
//每一行数据
var _bigblock = document.createElement("div");
_bigblock.className = "product_content";
_content.appendChild(_bigblock);
//输出产品图片图片
var _productimg = document.createElement("img");
_productimg.className = "product_img";
_productimg.src = _data[i].ProductThumbnail220px;
//跳转到产品详情页面。
toDetailPage(_productimg, _data[i].ProductId);
_bigblock.appendChild(_productimg);
//输出产品价格
var _productprice = document.createElement("div");
_productprice.className = "prodcut_price";
_productprice.innerHTML = "$" + _data[i].ProductPrice;
_bigblock.appendChild(_productprice);
//输出产品名称
var _productname = document.createElement("div");
_productname.className = "prodcut_des";
_productname.innerHTML = _data[i].ProductName;
_bigblock.appendChild(_productname);
//输出产品评论
var _productreply = document.createElement("div");
_productreply.className = "product_reply";
_productreply.innerHTML = "5000+条评价条评价";
_bigblock.appendChild(_productreply);
//输出产品店铺
var _productshop = document.createElement("div");
_productshop.className = "product_shop";
_productshop.innerHTML = "Disney+旗舰店";
_bigblock.appendChild(_productshop);
}
}
示例:
运行结果展示区域: