jquery +json +html 如何做分页

暗尘掩月 2012-06-08 01:51:02
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页面

...全文
485 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
sh_suyuelin 2012-06-09
  • 打赏
  • 举报
 回复
留名。。上面都很详细啊
mrdexs 2012-06-08
  • 打赏
  • 举报
 回复
我才写的我用了一个jquery的控件SmartPaginator
1：先得到你数据库内数据总的条数然后根据你的美页显示多少数目计算出页数
2：你后台数据库要用分页的存储过程
3：分页控件有一个点击页数的回调函数这个回到函数里写出你获取数据的ajax方法
这个控件还是比较较淡的去网上百度一下就有相关的使用方法
暗尘掩月 2012-06-08
  • 打赏
  • 举报
 回复
<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>")
});
});
});

}
huanghan1988 2012-06-08
  • 打赏
  • 举报
 回复
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将当前页码pangeIndex


strIconJSON.Append("<a href='javascript:void(0);' onclick='javascript:DeskTop.getSysIcon({pageIndex:1})'>首页</a>  ");

            strIconJSON.Append("<a href='javascript:void(0);' onclick='javascript:DeskTop.getSysIcon({pageIndex: " + preIndex + "})'>上一页</a>  ");

            strIconJSON.Append("<a href='javascript:void(0);' onclick='javascript:DeskTop.getSysIcon({pageIndex: " + nextIndex + "})'>下一页</a>  ");

            strIconJSON.Append("<a href='javascript:void(0);' onclick='javascript:DeskTop.getSysIcon({pageIndex:" + pageCount + "})'>尾页</a>  ");


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#
天下如山 2012-06-08
  • 打赏
  • 举报
 回复
....其实最常见的处理方案是：根据分页 获取数据源 得到JSON数据 然后前台遍历JSON数据 显示出来。
打个比方：
jquery ajax 返回JSON数据
分页用 jquery.pagination.js
暗尘掩月 2012-06-08
  • 打赏
  • 举报
 回复
jquery 如何获取div 的currentPage 的值 


<div id="divPager" class="pagination" targetType="navTab" totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"></div>

lqkankan 2012-06-08
  • 打赏
  • 举报
 回复
jqGrid
evasunny2008 2012-06-08
  • 打赏
  • 举报
 回复 


#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> ";

                }

                else

                {

                    result += "<a class='num' value='" + item + "'>" + item + "</a> ";

                }

            }

            //如果不是最后一个大分页的话，要显示出来三个点

            if (key < key_max)

            {

                result += "<a class='num' value='" + list_allPager[key + 1][0] + "'>...</a> ";

            }

            if (key != 1)

            {

                result = "<a class='num' value='" + list_allPager[key - 1][0] + "'>...</a> " + 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



这是市的列表，只是关键代码。。
evasunny2008 2012-06-08
  • 打赏
  • 举报
 回复
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¤tPager=" + 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);

		}

	}

}
人生难得一只鸡 2012-06-08
  • 打赏
  • 举报
 回复
你需要传递的参数 当前页 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
紫魂一号 2012-06-08
  • 打赏
  • 举报
 回复
处理返回后json，这个肯定可以得到总记录数了。然后再自己设定每页显示的记录数
Chyan 2012-06-08
  • 打赏
  • 举报
 回复
给分页的信息定义一个实体类
然后再list.ashx里面一起返回到前台。{Json:[{TableInfo}, {PageInfo}]}
jquery+json的无刷新分页
jquery+json的无刷新分页 jquery+json的无刷新分页 jquery+json的无刷新分页 jquery+json的无刷新分页
Jquery + Json 无刷新分页
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回两个值给用户进行自定义操作) 删除,自定义列(反回两个值给用户进行自定义操作) 样式变代(也就是写了两个样式表而以) 转换列(也就是你数据库里是1,0什么的,转成对应的男女的中文) 每页显示的记录条数在config里面设置（转载人标注：config里配置只是为了方面，也可在后台设置） 作者：刘巨
JavaScript+jQuery+项目实战系列视频教程
JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能，能完成基本的网页特效！
基于Jquery+Ajax+Json实现分页显示附效果图
基于Jquery+Ajax+Json实现分页显示附效果图
Ajax分页 C# +jquery +json
Ajax分页 C# +jquery +jsonAjax分页 C# +jquery +json
.NET社区

62,051

社区成员

669,050

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章