关于javascript:数据分页显示的js代码

34次阅读

共计 1861 个字符,预计需要花费 5 分钟才能阅读完成。

<ul class="pagination pagination-sm no-margin pull-right">
    <li><a class="first"> 首页 </a></li>
    <li><a class="pre"> 上一页 </a></li>
    <li><a class="next"> 下一页 </a></li>
    <li><a class="last"> 尾页 </a></li>
    <li><a class="rowCount"> 总记录数 (0)</a></li>
    <li><a class="pageCount"> 总页数 (0)</a></li>
    <li><a class="pageCurrent"> 当前页 (0)</a></li>
</ul>
<script type="text/javascript">
    function doSetPagination(page){console.log("page",page)
        //1. 初始化数据   rowCount 总行数   pageCount 总页数        pageCurrent 当前页
        $(".rowCount").html("总记录数 ("+page.rowCount+")");
        $(".pageCount").html("总页数 ("+page.pageCount+")");
        $(".pageCurrent").html("当前页 ("+page.pageCurrent+")");
    //2. 绑定数据(为后续对此数据的应用提供服务)$("#pageId").data("pageCurrent",page.pageCurrent);
    $("#pageId").data("pageCount",page.pageCount);
    }
    $(function(){
        // 事件注册
    $("#pageId").on("click",".first,.pre,.next,.last",doJumpToPage);
    })
     function doJumpToPage(){
        //1. 获取点击对象的 clss 值
        var cls=$(this).prop("class");//Property
        //2. 基于点击的对象执行 pageCurrent 值得批改
        //2.1 获取 pageCurrent,pageCount 的以后值
         var pageCurrent=$("#pageId").data("pageCurrent");
            var pageCount=$("#pageId").data("pageCount");
            //2.2 批改 pageCurrent 的值
            if(cls=="first"){// 首页
                pageCurrent=1;
            }else if(cls=="pre"&&pageCurrent>1){// 上一页
                pageCurrent--;
            }else if(cls=="next"&&pageCurrent<pageCount){// 下一页
                pageCurrent++;
            }else if(cls=="last"){// 最初一页
                pageCurrent=pageCount;
            }else{return;}
            //3. 对 pageCurrent 值进行从新绑定
            $("#pageId").data("pageCurrent",pageCurrent);
            //4. 基于新的 pageCurrent 的值进行当前页数据查问
            doGetObjects();}
     function doGetObjects(){
        //1. 定义 url 和参数
        var url ="doFindPageObjects";
        //data 是从指定元素上获取绑定的数据
        // 数据会在何时进行绑定?(setPagination,doQueryObjects)var pageCurrent = $("#pageId").data("pageCurrent");
        // 为什么要执行如下判断,而后初始化 pageCurrent 的值为 1
        //pageCurrent 参数在没有赋值的状况下,默认初始值应该为 1.
        if(!pageCurrent)
            pageCurrent=1;
        var params={"pageCurrent":pageCurrent};
        //2. 发动异步申请
        // 请问如下 ajax 申请的回调函数参数名能够是任意的吗??能够,必须合乎标识符的标准
        $.getJSON(url,params,function(result){
            // 请问 result 是一个字符串还是 json 格局的 js 对象?答:json 格局对象
            doHandleQueryResponseResult(result);

        });
    }// 非凡的 ajax 函数
     
</script>








正文完
 0