简单ajax分页 jQuery实现动态创建Dom

//前台aspx代码：

 <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript">

        var $table = $("<table border='1px' width='1000px'></table>");

        $(function () {

            var pageIndex = 1;
            changeImg(pageIndex);
        })

        function changeImg(pageIndex) {
            //调用前对其内容进行清空
            $table.text("");
            //getJSON 实现 
            $.getJSON("Wolf.ashx?pageIndex=" + pageIndex, function (data) {
                
                  //获得数据总数 来判断  是否 上一页  下一页
                var pageCount = parseInt(data[data.length - 1]);

                //在div下进行附加 动态创建table
                $("#d").append($table);
                var $tr = $("<tr></tr>");
                for (var i = 0; i < data.length - 1; i++) {

                    var $td = $("<td><img width='300px' height='300px' src='" + data[i] + "'/></td>");
                    $tr.append($td);
                    $table.append($tr);
                }
                var $page = $("<tr></tr>");
                $td = $("<td><a id ='up' href='#'>上一页</a></td>");
                $page.append($td);
                $td = $("<td></td>");
                $page.append($td);
                $td = $("<td><a id='down' href='#'>下一页</a></td>");
                $page.append($td);
                $table.append($page);



                $("#down").click(function () {
                    //判断是否越界 对其禁用
                    if (pageIndex + 1 >= 10) {
                        $(this).attr("disabled", true);
                    }
                    else {
                        pageIndex++;
                        changeImg(pageIndex);
                    }

                })
                $("#up").click(function () {
                    //判断是否越界 对其禁用
                    if (pageIndex - 1 <= 0) {
                        $(this).attr("disabled", true);
                    } else {
                        pageIndex--;
                        changeImg(pageIndex);
                    }

                });
            })


        }

 //后台ashx代码：      
    
    </script>

 public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        
        //获取wolf文件夹的绝对路径
        string path = context.Request.MapPath("Wolf");

        //获取所有图片
        string[] files = System.IO.Directory.GetFiles(path, "*.jpg", System.IO.SearchOption.AllDirectories);

        //获取发送过来的请求  页面索引
        string pageIndex = context.Request.QueryString["pageIndex"];
        //每页显示的图片个数
        int size = 3;
        //默认 页面的显示索引 为 第一页
        int index = 1;
        //对其 索引转换，若转换失败，则为默认 页面1
        if (int.TryParse(pageIndex,out index))
        {
            
        }
        //用来响应  存储 数据 
        List<string> filepath = new List<string>();

        
        
        //1   3*1     1   2    3
        //2   3*2     4   5    6
        for (int i = 0; i < files.Length; i++)
        {
            //这里需要判断每次是发送不同的 3条数据
            if (i < index * size&&i>=(index-1)*size)
            {
                filepath.Add(files[i]);
            }

        }
        //规律：	0，1，2，	3，4，5，	6，7，8，	9，10，11；

	
        //        Index		1	i<(1*3)		0,1,2
        //        Index		2	i<(2*3)	 	3,4,5
        //    思路：
        //    1>要想每次都显示3个，在之间还需要加上if过滤条件，因为i的值是"<"而产生不需要的值，
        //    那么需要在进行过滤的i一定是">"某个值；
        //    2>每次相差的数是size,那可能就是size乘以某个数；size又是不变的，
        //    所以size与某个数相乘 则决定了最终值；那个数起决定性作用，刚好乘以 （index-1）则刚好就是慢一拍的那个数。

        //求出总共页面数，用来返值 ，对 请求超出页面索引 判断使用
        int pageCount=  files.Length / 3 + 1;

        //对泛型 进行序列化 json对象
        JavaScriptSerializer ser = new JavaScriptSerializer();
        string strfile = ser.Serialize(filepath);

        //替换 ]  存储 总页面数
        strfile = strfile.Replace("]",","+ pageCount.ToString()+"]");
        //响应
        context.Response.Write(strfile);
    }