本文实例为大家分享了ajax无刷新分页的具体代码，供大家参考，具体内容如下
html页
<html><head> <title></title> <style type="text/css"> table{ border:solid 1px #444; background-color:Aqua;} table td{border:solid 1px #444;} </style> <script src="js/Jquery1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var pageindex = 1; var pagesize = 10; /*如果将代码封装成一个函数，那么除非显示调用(loaddata())，否则函数中的代码不会执行 根据传递的页码和每页显示的记录数量获取数据 */ function loaddata() { $.ajax({ type: "post", contentType: "application/json", url: "WebService1.asmx/GetListAjax", data: "{pagesize:" + pagesize + ",pageindex:" + pageindex + "}", success: function (result) { //处理返回来的数据 var strtable = '<table>'; strtable += '<tr><td>编号</td><td>标题</td><td>内容</td><td>创建时间</td></tr>'; for (var i = 0; i < result.d.length; i++) { strtable += '<tr>'; strtable += '<td>' + result.d[i].Id + '</td>'; strtable += '<td>' + result.d[i].NewsTitle + '</td>'; strtable += '<td>' + result.d[i].NewsContent + '</td>' strtable += '<td>' + result.d[i].CreateTime + '</td>'; strtable += '</tr>'; } strtable += '</table>'; $('#mydiv').html(strtable); } }) } //根据传递到后台的每页显示的记录数量来获取最大的页码(就是一共有多少页) $.ajax({ type: "post", contentType: "application/json", url: "WebService1.asmx/GetLastPageindex", data: "{pagesize:" + pagesize + "}", success: function (result) { lastpageindex = result.d; } }) //显式调用函数，在页面初次加载时加载第一页数据 loaddata(); //下一页 $('a:eq(2)').click(function () { if (pageindex < lastpageindex) { pageindex++; loaddata(); } }) //上一页 $('a:eq(1)').click(function () { if (pageindex > 1) { pageindex--; loaddata(); } }) //第一页 $('a:first').click(function () { pageindex = 1; loaddata(); }) //最后一页 $('a:eq(3)').click(function () { pageindex = lastpageindex; loaddata(); }) $('a:last').click(function () { pageindex = $('#txtPageindex').val(); loaddata(); }) }) </script></head><body><div id="mydiv"></div><div><a href="#">第一页</a><a href="#">上一页</a><a href="#">下一页</a><a href="#">最后一页</a><input id="txtPageindex" type="text" /><a href="#">Go</a></div></body></html>
新闻热点
疑难解答
图片精选
