美文网首页JavaScript
ajax请求数据时使用Jquery On绑定事件 案例:分页效果

ajax请求数据时使用Jquery On绑定事件 案例:分页效果

作者: 蔚完待旭 | 来源:发表于2020-06-12 09:29 被阅读0次

    在使用ajax的回调函数中,往html页面添加内容,使用一般的方法绑定事件,是没用的,需要使用以下方法

    $(“#pageNum”).on(‘click’,’#nextPage’,function(){})  //把点击事件绑定到id为pageNum的子级元素id为nextPage的元素身上
    
    • 例如:做出分页效果
    // html
     <ul id="pageNum">
    
     </ul>
    
    // js部分(使用包装过的ajax)
    // currentPage   当前在第几页
    // pageTotal  总页数
    function getPageTotal() {
            myAjax("get","/getPageTotal.do","",function () {
                let data=JSON.parse(xhr.responseText);
                let pageNum = [];
                for (var item = 1; item <= data; item++) {
                    pageNum.push(" <li>");
                    pageNum.push(" <a href=\"javascipt:;\">" + item + "</a>");
                    pageNum.push(" </li>");
                }
                // 往html页面添加内容
                $("#pageNum").html(`<li id="prevPage"><a href="javascipt:;" aria-label="Previous"><span aria-hidden="true">«</span></a></li>`+
    pageNum.join('') +`<li id="nextPage"><a href="javascipt:;" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                <span>总共 <span id="totalPage"></span>页</span>`);
                console.log(data);
                pageTotal=data;
                document.getElementById("totalPage").innerHTML=currentPage+"/"+pageTotal;
            })
        }
    
    //下一页
        $("#pageNum").on("click","#nextPage",function() {
            currentPage++;
            if(currentPage>pageTotal){
                showMsg("已经是最后一页了"); // 调用showMsg提示
                currentPage=pageTotal
            }else{
                renderTable(); // 加载页面数据
                document.getElementById("totalPage").innerHTML=currentPage+"/"+pageTotal;
            }
        });
    
    // 上一页
        $("#pageNum").on("click","#prevPage",function() {
            currentPage--;
            console.log(currentPage);
            console.log(this);
            if(currentPage<=0){
                showMsg("已经是第一页了"); // 调用showMsg提示
                currentPage=1;
            }else{
                renderTable(); // 加载页面数据
                document.getElementById("totalPage").innerHTML=currentPage+"/"+pageTotal;
            }
        });
    
    

    相关文章

      网友评论

        本文标题:ajax请求数据时使用Jquery On绑定事件 案例:分页效果

        本文链接:https://www.haomeiwen.com/subject/letgtktx.html