jquery +json +html 如何做分页

Question

list.ashx  文件返回json 通过jquery在页面加载时调用list.ashx 遍历json  形成table
部分代码如下$(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页面

Answer 1

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

Answer 2

处理返回后json，这个肯定可以得到总记录数了。然后再自己设定每页显示的记录数 

Answer 3

你需要传递的参数  当前页 current_page  每页显示数目 page_count查询语句就是  select top page_count * from table where id not in(select top current_page*page_count * from table)当前页应该是传来的值，默认应该是第一页
每页多少条应该是配置文件里面规定的
共多少页直接查询一下就行
然后拼成JSON同时返回http://www.strongcms.net/JQuery/course/2011/1021/174.html

Answer 4

HTML<div id="tableList">
            </div>
            <div id="pagerParent" class="pager">
                <ul>
                    <li>共<span id="totalNum"></span>条</li>
                    <li><span id="currentPager"></span>/<span id="totalPagerNum"></span>页</li>
                    <li><a onclick='ClickPager(-4)'>首页</a></li>
                    <li><a onclick='ClickPager(-3)'>上一页</a></li>
                    <li><span id="pagerNumber"></span></li>
                    <li><a onclick='ClickPager(-2)'>下一页</a> </li>
                    <li><a onclick='ClickPager(-1)'>末页</a></li>
                    <li>
                        <input type="text" id="txtPager" class="txtPager" value="1" />
                    </li>
                    <li>
                        <input type="button" id="btnPager" value="跳转" class="btn" style="width: 40px;" onclick="ClickPager(-5)" />
                    </li>
                </ul>
            </div>
JS//初始化列表InitList
$.ajax({ data: { action: "InitList", recordParam: $.query.get("recordParam") }, success: function (value) {
BindData(value);
}, dataType: "json"
});//点击分页和点击跳转
function ClickPager(flag) {
var currentPager = 1;
var currPager = parseInt($("#currentPager").text());

if (flag == -5) {
//点击跳转
var p = $("#txtPager").val();
if (!(p >= 1 && p <= parseInt($("#totalPagerNum").text()))) {
$.dialog({ icon: "error", content: "输入页数超出范围！", time: 1 });
return;
}
currentPager = p;
} else if (flag == -4) {
//首页
currentPager = 1;
} else if (flag == -3) {
//上一页
if (currPager == 1) {
currentPager = 1;
} else {
currentPager = currPager - 1;
}
} else if (flag == -2) {
//下一页
if (currPager == $("#totalPagerNum").text()) {
currentPager = $("#totalPagerNum").text();
} else {
currentPager = currPager + 1;
}
} else if (flag == -1) {
//末页
currentPager = $("#totalPagerNum").text();
}

$.ajax({ data: "action=ClickPager&currentPager=" + currentPager + "&" + $("#form1").serialize(), success: function (value) {
BindData(value);
}, dataType: "json"
});
}//绑定数据源和分页
function BindData(value) {
if (value.table == "") {
if (value.is_eva_param == "ok") {
$("#currentPager").text(value.currentPager);
$("#ddlProvince").val(value.ProvinceAutoId);
$("#txtName").val(value.Name);
$("#txtName_py").val(value.Name_py);
$("#txtZipCode").val(value.ZipCode);
ClickPager(-3);
} else {
$("#tableList").html("<div class='sorry'>对不起，没有查找到数据！<a style='color:#ff6600;font-width:bold;' href='frm_S_City_AE.aspx?oper=add'>点击这里进行添加</a><div>");
$("#pagerParent").hide();
}
}
else {
$("#tableList").html(unescape(value.table));
$("#totalNum").text(value.totalNum);
$("#totalPagerNum").text(value.totalPagerNum);
$("#currentPager").text(value.currentPager);
$("#txtPager").val(value.currentPager);
$("#pagerNumber").html(value.pagerNumber);
$("#pagerParent").show();
if (value.is_eva_param == "ok") {
$("#ddlProvince").val(value.ProvinceAutoId);
$("#txtName").val(value.Name);
$("#txtName_py").val(value.Name_py);
$("#txtZipCode").val(value.ZipCode);
}
}
}

Answer 5

#region InitList
        private void InitList(HttpContext context)
        {
            string result = "";
            if (CC.IsEmpty(context.Request["recordParam"]))
            {
                result = Create(1, context, null);
                context.Response.Write(result);
            }
            else
            {
                try
                {
                    string[] listParam = CC.Decode(context.Request["recordParam"], Common._KEY).Split('|');
                    result = Create(CC.Str2Int(listParam[0]), context, listParam);                    string param = "{";
                    param += "\"is_eva_param\":\"ok\",";
                    param += "\"ProvinceAutoId\":\"" + listParam[1] + "\",";
                    param += "\"Name\":\"" + listParam[2] + "\",";
                    param += "\"Name_py\":\"" + listParam[3] + "\",";
                    param += "\"ZipCode\":\"" + listParam[4] + "\",";
                    result = result.Substring(1);
                    result = param + result;
                    context.Response.Write(result);
                }
                catch (Exception)
                {
                    result = Create(1, context, null);
                    context.Response.Write(result);
                }
            }
        }
        #endregion
#region ClickPager
        private void ClickPager(HttpContext context)
        {
            int currentPager = CC.Str2Int(context.Request["currentPager"].ToString());
            string result = Create(currentPager, context, null);
            context.Response.Write(result);
        }
        #endregion        #region Create
        private string Create(int currentPager, HttpContext context, string[] listParam)
        {
            int pageIndex = currentPager - 1;
            int pageSize = Common._PAGESIZE;            //dictSql是得到关于sql语句和参数值的集合
            Dictionary<string, Dictionary<string, string>> dictSql = GetParam(context, listParam);
            //dictList是得到总数量和分页数据的集合
            Dictionary<long, List<S_City>> dictList = null;            foreach (var item in dictSql)
            {
                //得到总数量和分页数据
                dictList = S_City_Manager.Auto_GetPage(item.Key, item.Value, pageIndex, pageSize, null);
            }            List<S_City> list = null;
            long count = -1;
            foreach (var item in dictList)
            {
                count = item.Key;
                list = item.Value;
            }            //得到总页数
            long totalPagerNum = GetPagerNum(count, pageSize);            //以json的方式，把总记录数和总页数也一起传到页面
            string result = "{";
            result += "\"totalNum\":" + "\"" + count + "\",";
            result += "\"totalPagerNum\":" + "\"" + totalPagerNum + "\",";
            result += "\"currentPager\":" + "\"" + currentPager + "\",";
            result += "\"pagerNumber\":" + "\"" + GetPagerNumber(totalPagerNum, currentPager) + "\",";
            result += "\"table\":" + "\"" + GlobalObject.escape(CreateTable(list, context)) + "\"";
            result += "}";            return result;
        }
        #endregion        #region CreateTable
        private string CreateTable(List<S_City> list, HttpContext context)
        {
            string result_table = "";
            //创建表格
            if (list.Count > 0)
            {
                result_table += "<table class='table_list'>";
                result_table += "<tr>";
                result_table += "<td class='th'>市名称</td>";
                result_table += "<td class='th'>省</td>";
                result_table += "<td class='th'>市拼音</td>";
                result_table += "<td class='th'>邮编</td>";
                result_table += "<td class='th_2'>查看</td>";
                result_table += "<td class='th_2'>修改</td>";
                result_table += "<td class='th_2'>删除</td>";
                result_table += "</tr>";
                foreach (S_City item in list)
                {
                    result_table += "<tr class='data_tr'>";
                    result_table += "<td class='td'>" + item.Name + "</td>";
                    result_table += "<td class='td'>" + item.Province.Name + "</td>";
                    result_table += "<td class='td'>" + item.Name_py + "</td>";
                    result_table += "<td class='td'>" + item.ZipCode + "</td>";
                    result_table += "<td class='td_2'><a autoId='" + item.AutoId + "' oper='See'>查看</a></td>";
                    result_table += "<td class='td_2'><a autoId='" + item.AutoId + "' oper='Edit'>修改</a></td>";
                    result_table += "<td class='td_2'><a autoId='" + item.AutoId + "' oper='Del'>删除</a></td>";
                    result_table += "</tr>";
                }
                result_table += "</table>";
            }
            return result_table;
        }
        #endregion        #region GetPagerNumber
        private string GetPagerNumber(long totalPagerNum, int currentPager)
        {
            string result = "";
            IDictionary<int, IList<int>> list_allPager = new Dictionary<int, IList<int>>();//用来存放大分页与小分页的值            //把所有的页码放到list_pagerNumber里
            IList<long> list_pagerNumber = new List<long>();
            for (long i = 0; i < totalPagerNum; i++)
            {
                list_pagerNumber.Add(i + 1);
            }            int key = 1;//当前的键
            int key_max = 0;//最大的键            //把所有的页码放到键值对里
            IList<int> value = new List<int>();
            foreach (int item in list_pagerNumber)
            {
                value.Add(item);
                if (item % Common._BIG_PAGESIZE == 0)
                {
                    list_allPager.Add(key, value);
                    key++;
                    value = new List<int>();
                }
            }
            list_allPager.Add(key, value);
            key_max = key;
            if (list_allPager[key_max].Count == 0)
            {
                key_max--;
            }            //根据当前页找到应该显示的是哪一个大分页的键
            foreach (KeyValuePair<int, IList<int>> item1 in list_allPager)
            {
                bool flag = false;
                foreach (int item2 in item1.Value)
                {
                    if (item2 == currentPager)
                    {
                        key = item1.Key;
                        flag = true;
                        break;
                    }
                }
                if (flag)
                {
                    break;
                }
            }            //根据当前的大分页去构建分页数据
            foreach (int item in list_allPager[key])
            {
                if (item == currentPager)
                {
                    result += "<a class='sel_num'>[" + item + "]</a>&nbsp;";
                }
                else
                {
                    result += "<a class='num' value='" + item + "'>" + item + "</a>&nbsp;";
                }
            }
            //如果不是最后一个大分页的话，要显示出来三个点
            if (key < key_max)
            {
                result += "<a class='num' value='" + list_allPager[key + 1][0] + "'>...</a>&nbsp;";
            }
            if (key != 1)
            {
                result = "<a class='num' value='" + list_allPager[key - 1][0] + "'>...</a>&nbsp;" + result;
            }
            return result;
        }
        #endregion        #region GetPagerNum
        private long GetPagerNum(long totalRecordNum, int pageSize)
        {
            long totalPagerNum = -1;//总页数
            if (totalRecordNum % pageSize == 0)
            {
                totalPagerNum = totalRecordNum / pageSize;
            }
            else
            {
                totalPagerNum = totalRecordNum / pageSize + 1;
            }
            return totalPagerNum;
        }
        #endregion这是市的列表，只是关键代码。。

Answer 6

jquery 如何获取div 的currentPage 的值 <div id="divPager" class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div>

Answer 7

....其实最常见的处理方案是：根据分页 获取数据源 得到JSON数据 然后前台遍历JSON数据 显示出来。
打个比方：
jquery ajax 返回JSON数据 
分页用 jquery.pagination.js

Answer 8

JS代码 传递PageSize每页显示条数 和PageIndex当前页码 2个值 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("读取图片失败！");
            }
        });
    }后台代码动态拼接html将当前页码pangeIndexstrIconJSON.Append("<a href='javascript:void(0);' onclick='javascript:DeskTop.getSysIcon({pageIndex:1})'>首页</a>&nbsp;&nbsp;");
            strIconJSON.Append("<a href='javascript:void(0);' onclick='javascript:DeskTop.getSysIcon({pageIndex: " + preIndex + "})'>上一页</a>&nbsp;&nbsp;");
            strIconJSON.Append("<a href='javascript:void(0);' onclick='javascript:DeskTop.getSysIcon({pageIndex: " + nextIndex + "})'>下一页</a>&nbsp;&nbsp;");
            strIconJSON.Append("<a href='javascript:void(0);' onclick='javascript:DeskTop.getSysIcon({pageIndex:" + pageCount + "})'>尾页</a>&nbsp;&nbsp;");
SQL做相应的筛选就OK了，我这里因为是读文件夹里文件的所有没有SQL
SQL实现 类似select temp.* from (
        select ROW_NUMBER() OVER(ORDER BY orderid ) AS RowNum,* TABLENAME) temp where RowNum between #PageSize#*(#PageIndex#-1)+1 and #PageSize#*#PageIndex#

Answer 9

<form id="pagerForm" method="post" action="page()">
<input id="pageNum" type="hidden" name="pageNum" value="2" />
<input type="hidden" name="numPerPage" value="20" />
<input type="hidden" name="orderField" value="name" />
<input type="hidden" name="orderDirection" value="desc" />
</form>如何在form 表action时调用   function page() {
            alert("11111");
            var pageIndex = $("#pageNum").val();
            $.getJSON("Teachers/Handler1.ashx", { pageIndex: pageIndex, totalCount: '1' }, function (data) {
                //                $.each(data.listinfo, function (i, item) {
                //                    $("#tbody").append("<tr target=\"sid_user\" rel=" + item.title + "><td><input name=\"ids\" value=" + item.title + " type=\"checkbox\"></td><td>" + item.title + "</td><td>" + item.title + "</td></tr>");
                //                });
                $.each(data, function (index, value) {
                    $.each(value, function (index2, item) {
                        $("#tbody").append("<tr target=\"sid_user\" rel=" + item.title + "><td><input name=\"ids\" value=" + item.title + " type=\"checkbox\"></td><td>" + item.title + "</td><td>" + item.title + "</td></tr>")
                    });
                });
            });        }

Answer 10

我才写的我用了一个jquery的控件SmartPaginator
1：先得到你数据库内数据总的条数然后根据你的美页显示多少数目计算出页数
2：你后台数据库要用分页的存储过程
3：分页控件有一个点击页数的回调函数这个回到函数里写出你获取数据的ajax方法
这个控件还是比较较淡的去网上百度一下就有相关的使用方法