有思俱乐部学习园地

直接调用的分页控件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);
        }
    }     

示例:

运行结果展示区域:

工作人员

 
                    
作者:廖志伟
信息录入:廖志伟