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

<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>








评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理