日期:2014-05-17  浏览次数:20409 次

jquery +json +html 如何做分页
list.ashx 文件返回json 

通过jquery在页面加载时调用list.ashx 遍历json 形成table
部分代码如下
HTML code

$(document).ready(function () {
                $.getJSON("list.ashx", function (data) {
                    $.each(data.TableInfo, function (i, item) {
                        $("#tbody").append("<tr target=\"sid_user\" rel=" + item.id + "><td><input name=\"ids\" value=" + item.id + " type=\"checkbox\"></td><td>" + item.id + "</td><td>" + item.name + "</td></tr>");
                    });
                });

            });

<table class="table" width="1200" layoutH="138">
        <thead>
            <tr>
                <th width="22"><input type="checkbox" group="ids" class="checkboxCtrl"></th>
                <th width="120" orderField="accountNo" class="asc">客户号</th>
                <th orderField="accountName">客户名称</th>
                
            </tr>
        </thead>
        <tbody id="tbody">
</tbody>
    </table>


在此同时如何通过将当前页 每页多少条 共多少页 同时返回html页面



------解决方案--------------------
给分页的信息定义一个实体类
然后再list.ashx里面一起返回到前台。{Json:[{TableInfo}, {PageInfo}]}

------解决方案--------------------
JS代码 传递PageSize每页显示条数 和PageIndex当前页码 2个值
JScript code

 getSysIcon: function(options) {//获取系统图片(添加自定义快捷方式用)
        var defaults = { optype: 1, pageSize: 15, pageIndex: 1 };
        var options = $.extend(defaults, options);
        var optype = options["optype"] == 1 ? "getSysIcon" : "getUserIcon";
        $.ajax({
            url: "AjaxHandler/LoadIconHandler.ashx?optype=" + optype + "&r=" + Math.random() + "&pageSize=" + options["pageSize"] + "&pageIndex=" + options["pageIndex"],
            type: "get",
            success: function(data) {
                $("#custom_album").html(data);
            },
            error: function() {
                alert("读取图片失败!");
            }
        });
    }