最简单的ajax分页_小同php论坛

TP5生成的分页是这样的




<ul class="pagination">


<li class="disabled"><span>«</span></li>


<li class="active"><span>1</span></li>


    <li><a href="/index.html?page=2">2</a></li>


    <li><a href="/index.html?page=3">3</a></li>


    <li><a href="/index.html?page=4">4</a></li>


    <li><a href="/index.html?page=2">»</a></li>


</ul>

我们只需要使用jq




$(function(){


      $(function () {


      //当分页链接被点击的时候获取到他的href  然后通过ajax去获取数据 


        $(".pagination a").click(function () {


            $.get($(this).attr("href"),function(){


            //将获取到的数据写入页面Body中


               $(document.body).html(result);


            });


            //阻止a链接的跳转


            return false;


        });


    });


});

还可以使用$.ajax 使用boforeSend 在里面添加等待中之类的提示信息,提升用户体验




  $(function () {


        $(".pagination a").click(function () {


            var url = $(this).attr("href");    //获取点击的url


            $.ajax({


                url:url,    //url





                //使用的是layer的弹窗组件提示等待中,提升用户体验


                beforeSend:function () {


                    layer.msg('加载数据中...',{shade:0.1,icon:16});


                },





                success:function (result) {


                    layer.closeAll();    //关闭弹窗


                    $(document.body).html(result);


                }





            });


             //阻止a链接的跳转


            return false;


        });


    });