基于Jquery的无刷新分页

基于Jquery的无刷新分页

<link href="../../css/pagination.css" rel="stylesheet" type="text/css" />//分页样式

<script type="text/javascript" src="../../js/jquery/jquery-1[1].3.2.js"></script>//jquery核心组件

<script type="text/javascript" src="../../js/jquery/jquery.pagination.js"></script>//分页js文件

<script type="text/javascript">

    var items_per_page = 30;//设置每页显示30条记录，你可以自定义

    var RecordCount = 0;//数据库中读取总条目数量，初始为0

    function pageselectCallback(page_id, jq){getDate(page_id + 1);}//点击分页时触发事件，默认从0开始，所以加一个1

    $(document).ready(function(){getDate(1);});//页面加载读取第一页数据

    function getDate(index){

//ajax生成的html内容

        var thml = "";

//隔行变行引用css样式 

        var cla="b";

//查询用到的关键字

        var txtKey=$("#txtName").val();

        var isLease=$("#dropIsLease").val();

        var status=$("#dropStatus").val();

        var isText="";

        $.ajax({

            type: "POST",

            url: "ajaxTest.aspx",

            data: "Page=" + index + "&items_per_page=" + items_per_page+"&status="+status+"&isLease="+isLease+"&txtKey="+txtKey,

            dataType: "json",

            success: function(data){

                RecordCount = data.RecordCount;//ajax返回的总记录数

                $.each(data.T, function(i, n){

//关键在这里，构建html时候读取总记录数

  isText=n.ISLEASE=="1"?"外派":"内部使用"

                    thml += "<tr class="+cla+"><td>" + n.CARID + "</td><td>" + n.CARBRAND + "</td><td>"+isText+"</td></tr>";

                    if(cla=="b"){cla="c"}else{cla="b"}

                });

                $("#tt>tbody").html(thml);//到这里已经可以显示数据了。

                $("#show").html("[页次:"+index+"/"+data.PageCount+"][共"+RecordCount+"条 "+items_per_page+"页]");

//下面是回调函数，必须设置current_page，不然没有翻页效果

                $("#Pagination").pagination(RecordCount, {

   current_page:index-1,

                    num_edge_entries: 5,

                    num_display_entries: 5,

                    items_per_page: items_per_page,

                    callback: pageselectCallback

                });

            }

        });

    }

</script>

//以下是后台返回的json数据

{"T":[{"CARID":86,"CARBRAND":"京A 02008","ISLEASE":0,"R":2}],"PageCount":3,"RecordCount":28}

//看到很多网友在读取总页数的时候 $("#Pagination").pagination(<%=count()%>, {.......

这样根本不是实时读取的总页数，删除一条记录后总记录数不会发生改变

有疑问可以联系我邮箱 tang718@gmail或联系我qq：170366419