基于Jquery+Ajax+Json的高效分页实现代码
字体：[ ] 类型：转载 时间：
分页我相信大家存储过程分页已经很熟悉了，ajax更是耳熟能详了，更别说我们的json，等等
如果说您没用过这些东东的话，我相信看完这篇博文会对您有帮助的，，如果有任何问题不懂或者有bug没问题，欢迎随时联系我， 同时也欢迎高手多给点意见，我不建议在喷子中成长。 本人QQ: 前言 相信很多朋友都用过，Jquery的分页插件，我之前就用的jquery.paper这个,如果有兴趣可以留下QQ，我发份简单的实例源码给您。 该代码是晚上匆忙中完成的，所以没怎么优化，但是主要作为实例来结合这些知识的一个综合运用。好了废话不多说，直接上代码。 vs2010+sql2005express 正文 首先我们创建一般处理程序，来读取数据库中内容，得到返回值. 创建文件，GetData.ashx. 我这里是用的存储过程，存储过程会再下面粘出来，至于数据只是实例，你们可根据需求自行读取数据 代码如下：
代码如下: &%@ WebHandler Language="C#" Class="GetData" %& using S using System.W using System.Data.SqlC using System.D using System.Collections.G using System.Web.script.S public class GetData : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; var pageIndex = context.Request["PageIndex"]; string connectionString = @"Data Source=KUSE\SQLEXPRESS;Initial Catalog=Integrated Security=True"; //判断当前索引存不存在，如果不存在则获取记录的总数。 if (string.IsNullOrEmpty(pageIndex)) { //获取查询记录总数的sql语句 string sql = "select count(-1) from books"; int count = 0; int.TryParse(SqlHelper.ExecuteScalar(connectionString, mandType.Text, sql, null).ToString(), out count); context.Response.Write(count); context.Response.End(); } //当根据索引获取数据 else { int currentPageIndex = 1; int.TryParse(pageIndex, out currentPageIndex); SqlParameter[] parms = new SqlParameter[] { new SqlParameter("@FEILDS",SqlDbType.NVarChar,1000), new SqlParameter("@PAGE_INDEX",SqlDbType.Int,10), new SqlParameter("@PAGE_SIZE",SqlDbType.Int,10), new SqlParameter("@ORDERTYPE",SqlDbType.Int,2), new SqlParameter("@ANDWHERE",SqlDbType.VarChar,1000), new SqlParameter("@ORDERFEILD",SqlDbType.VarChar,100) }; parms[0].Value = "*";//获取所有的字段 parms[1].Value = pageI//当前页面索引 parms[2].Value = 10;//页面大小 parms[3].Value = 0;//升序排列 parms[4].Value = "";//条件语句 parms[5].Value = "ID";//排序字段 List&Book& list = new List&Book&(); using (SqlDataReader sdr = SqlHelper.ExecuteReader(connectionString, CommandType.StoredProcedure, "PAGINATION", parms)) { while (sdr.Read()) { list.Add(new Book { Title = sdr[2].ToString(), Auhor = sdr[2].ToString(), PublishDate = sdr[4].ToString(), ISBN = sdr[5].ToString() }); } } context.Response.Write(new JavascriptSerializer().Serialize(list).ToString());//转为Json格式 } } public bool IsReusable { get {
} } } public class Book { public string Title { } public string Auhor { } public string PublishDate { } public string ISBN { } } 　　
显示数据页面----异步请求获取数据，基于jquery 创建页面Show.htm
代码如下: &body& &div & &table id="content"&/*显示数据内容*/ &/table& &div id="pager" class="yahoo2"&&/div&/*显示分页条*/ &/div& &/body&
代码如下: $(function () { $.post("GetData.ashx", null, function (data) { var total = PageClick(1, total, 3); }); PageClick = function (pageIndex, total, spanInterval) { $.ajax({ url: "GetData.ashx", data: { "PageIndex": pageIndex }, type: "post", dataType: "json", success: function (data) { //索引从1开始 //将当前页索引转为int类型 var intPageIndex = parseInt(pageIndex); //获取显示数据的表格 var table = $("#content"); //清楚表格中内容 $("#content tr").remove(); //向表格中添加内容 for (var i = 0; i & data. i++) { table.append( $("&tr&&td&" + data[i].Title + "&/td&&td&" + data[i].Auhor + "&/td&&td&" + data[i].PublishDate + "&/td&&td&" + data[i].ISBN + "&/td&&/tr&") ); } //for //创建分页 //将总记录数结果 得到 总页码数 var pageS = total if (pageS % 10 == 0) pageS = pageS / 10; else pageS = parseInt(total / 10) + 1; var $pager = $("#pager"); //清楚分页div中的内容 $("#pager span").remove(); $("#pager a").remove(); //添加第一页 if (intPageIndex == 1) $pager.append("&span class='disabled'&第一页&/span&"); else { var first = $("&a href='javascript:void(0)' first='" + 1 + "'&第一页&/a&").click(function () { PageClick($(this).attr('first'), total, spanInterval);
}); $pager.append(first); } //添加上一页 if (intPageIndex == 1) $pager.append("&span class='disabled'&上一页&/span&"); else { var pre = $("&a href='javascript:void(0)' pre='" + (intPageIndex - 1) + "'&上一页&/a&").click(function () { PageClick($(this).attr('pre'), total, spanInterval);
}); $pager.append(pre); } //设置分页的格式 这里可以根据需求完成自己想要的结果 var interval = parseInt(spanInterval); //设置间隔 var start = Math.max(1, intPageIndex - interval); //设置起始页 var end = Math.min(intPageIndex + interval, pageS)//设置末页 if (intPageIndex & interval + 1) { end = (2 * interval + 1) & pageS ? pageS : (2 * interval + 1); } if ((intPageIndex + interval) & pageS) { start = (pageS - 2 * interval) & 1 ? 1 : (pageS - 2 * interval); } //生成页码 for (var j = j & end + 1; j++) { if (j == intPageIndex) { var spanSelectd = $("&span class='current'&" + j + "&/span&"); $pager.append(spanSelectd); } //if else { var a = $("&a href='javascript:void(0)'&" + j + "&/a&").click(function () { PageClick($(this).text(), total, spanInterval);
}); $pager.append(a); } //else } //for //上一页 if (intPageIndex == total) { $pager.append("&span class='disabled'&下一页&/span&"); } else { var next = $("&a href='javascript:void(0)' next='" + (intPageIndex + 1) + "'&下一页&/a&").click(function () { PageClick($(this).attr("next"), total, spanInterval);
}); $pager.append(next); } //最后一页 if (intPageIndex == pageS) { $pager.append("&span class='disabled'&最后一页&/span&"); } else { var last = $("&a href='javascript:void(0)' last='" + pageS + "'&最后一页&/a&").click(function () { PageClick($(this).attr("last"), total, spanInterval);
}); $pager.append(last); } } //sucess }); //ajax }; //function }); //ready
分页样式----如果有感兴趣的，我这里还有20几套分页样式，可以留下QQ
代码如下: &style type="text/css"& DIV.yahoo2 { PADDING-RIGHT: 3 PADDING-LEFT: 3 FONT-SIZE: 0.85 PADDING-BOTTOM: 3 MARGIN: 3 PADDING-TOP: 3 FONT-FAMILY: Tahoma,Helvetica,sans- TEXT-ALIGN: center } DIV.yahoo2 A { BORDER-RIGHT: #ccdbe4 1 PADDING-RIGHT: 8 BACKGROUND-POSITION: 50% BORDER-TOP: #ccdbe4 1 PADDING-LEFT: 8 PADDING-BOTTOM: 2 BORDER-LEFT: #ccdbe4 1 COLOR: #0061 MARGIN-RIGHT: 3 PADDING-TOP: 2 BORDER-BOTTOM: #ccdbe4 1 TEXT-DECORATION: none } DIV.yahoo2 A:hover { BORDER-RIGHT: #2b55af 1 BORDER-TOP: #2b55af 1 BACKGROUND-IMAGE: BORDER-LEFT: #2b55af 1 COLOR: # BORDER-BOTTOM: #2b55af 1 BACKGROUND-COLOR: #3666d4 } DIV.yahoo2 A:active { BORDER-RIGHT: #2b55af 1 BORDER-TOP: #2b55af 1 BACKGROUND-IMAGE: BORDER-LEFT: #2b55af 1 COLOR: # BORDER-BOTTOM: #2b55af 1 BACKGROUND-COLOR: #3666d4 } DIV.yahoo2 SPAN.current { PADDING-RIGHT: 6 PADDING-LEFT: 6 FONT-WEIGHT: PADDING-BOTTOM: 2 COLOR: #000; MARGIN-RIGHT: 3 PADDING-TOP: 2px } DIV.yahoo2 SPAN.disabled { DISPLAY: none } DIV.yahoo2 A.next { BORDER-RIGHT: #ccdbe4 2 BORDER-TOP: #ccdbe4 2 MARGIN: 0px 0px 0px 10 BORDER-LEFT: #ccdbe4 2 BORDER-BOTTOM: #ccdbe4 2px solid } DIV.yahoo2 A.next:hover { BORDER-RIGHT: #2b55af 2 BORDER-TOP: #2b55af 2 BORDER-LEFT: #2b55af 2 BORDER-BOTTOM: #2b55af 2px solid } DIV.yahoo2 A.prev { BORDER-RIGHT: #ccdbe4 2 BORDER-TOP: #ccdbe4 2 MARGIN: 0px 10px 0px 0 BORDER-LEFT: #ccdbe4 2 BORDER-BOTTOM: #ccdbe4 2px solid } DIV.yahoo2 A.prev:hover { BORDER-RIGHT: #2b55af 2 BORDER-TOP: #2b55af 2 BORDER-LEFT: #2b55af 2 BORDER-BOTTOM: #2b55af 2px solid } &/style&
　分页存储过程---PAGINATION
代码如下: CREATE PROCEDURE [dbo].[PAGINATION] @FEILDS VARCHAR(1000),--要显示的字段 @PAGE_INDEX INT,--当前页码 @PAGE_SIZE INT,--页面大小 @ORDERTYPE BIT,--当为0时 则为 desc 当为1 时 asc @ANDWHERE VARCHAR(1000)='',--where语句 不用加where @ORDERFEILD VARCHAR(100) --排序的字段 as DECLARE @EXECSQL VARCHAR(2000) DECLARE @ORDERSTR VARCHAR(100) DECLARE @ORDERBY VARCHAR(100) BEGIN set NOCOUNT on IF @ORDERTYPE = 1 BEGIN SET @ORDERSTR = ' & ( SELECT MAX(['+@ORDERFEILD+'])' SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' ASC' END ELSE BEGIN SET @ORDERSTR = ' & ( SELECT MIN(['+@ORDERFEILD+'])' SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' DESC' END IF @PAGE_INDEX = 1 --当页码是第一页时直接运行，提高速度 BEGIN IF @ANDWHERE='' SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM [books] '+@ORDERBY ELSE SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM [books] WHERE '+@ANDWHERE+' '+ @ORDERBY END ELSE BEGIN IF @ANDWHERE='' BEGIN --以子查询结果当做新表时 要给表名别名才能用 SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM [books] WHERE '+@ORDERFEILD+ @ORDERSTR+' FROM (SELECT TOP '+STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+ ' FROM [books] '+@ORDERBY+') AS TEMP) '+ @ORDERBY END ELSE BEGIN SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM [books] WHERE '+@ORDERFEILD+ @ORDERSTR+' FROM (SELECT TOP '+ STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+ ' FROM [books] WHERE '+@ANDWHERE+' '+@ORDERBY+') AS TEMP) AND '+@ANDWHERE+' '+ @ORDERBY END END EXEC (@EXECSQL)--这里要加括号 END
运行效果图
终于，大功告成，不容易啊！有几个地方忘记给注释说明了，大家可能不理解。
PageClick(1, total, 3); 这个函数，第一个参数是当前页码，第一调用为第一页，这个不用管，total：表示总记录数,第三个参数表示：当前索引和旁边个间隔几页
OK,今天到此为止，第一次写东东，写的不好，技术含量也有限，忘读此博文者见谅。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具纯javascript实现分页(两种方法)
作者：weiloong
字体：[ ] 类型：转载 时间：
有的时候页面需要很多不同的表组成的数据，该怎么分页呢？使用数据库分页很简单，那么如何使用js实现分页呢？接下来，小编帮大家解决这个问题，需要的朋友一起来学习吧
先给大家贴效果图：
&&&& 网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用limit进行分页。
&&&& 因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用
这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问题的
纯js实现分页方法一：
废话不多说，直接上代码了！&&&&&
注：本项目是全程使用js来写的，前台的数据通过ajax进行获取，然后再进行拼装，动态加载到页面。
1.先把上一页，下一页等的代码附上(里面的值都是伪值，下面会在js里进行重新赋值的！)
&ul class="page" id="page"&
&li id="shouye" class="p-prev disabled"&
&a href='javascript:indexpage(1);'&首 页&/a&
&li id="shangyiye" class="p-prev disabled" &
&a href='javascript:indexpage(-1);'&&i&&/i&上一页&/a&
&li &&a id="one" href="javascript:void(0);" &1&/a&&/li&
&li&&a id="two" href="javascript:void(0);" &2&/a&&/li&
&li&&a id="three" href="javascript:void(0);" &3&/a&&/li&
&li class="more"&&a id="five" href="javascript:void(0);" &...&/a&&/li&
&li&&a id="fore" href="javascript:void(0);" &13855&/a&&/li&
&li class='p-next'&
&a href='javascript:indexpage(-3);' onclick="jumpToPage('2','/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);"&下一页&i&&/i&&/a&
&li id="weiye" class='p-next'&
&a href='javascript:void(0);' onclick="indexpage(0);"&尾 页&/a&
&li class="total"&
&span id="span_number"&共13855页 到第&input type="text" id="input_number" class="page-txtbox" /&页
&input name="" value="确定" type="button" onclick="jumpToPage(jQuery('#input_number').val(),'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);" class="page-btn"/&
2.首先在页面放两个隐藏域，一个是当前页码，一个是总页码，总页码是页面加载完，从后台查询出来后直接附上值的，当前页码是没操作一个，就要对当前页码赋值
&input id="jiazai" type="hidden" &&/input&&!-- 当前页码 --&
&input id="totalpage" type="hidden" &&/input&&!-- 总页码 --&
3.写一个页面加载完的function，给总页码和当前页码赋值
$(function(){
$('#jiazai').val(1);//给当前页码进行赋值，默认为第一页
ajaxfunction(page,arg,chipssort,'');//这个方法是抽取的ajax后台访问的方法
&4.抽取的ajax方法，此页面会用到好几次这个方法，所有把它收取了出来，因为页面的数据时通过ajax从后台获取到的，后台返回的是一个List集合
//抽取ajax的方法
function ajaxfunction(page,arg,chipssort,fontval){
type:'POST',
url:'/admin/receptionchips/showlist',//请求的url地址
page:page,
chipssort:chipssort,
fontval:fontval
dataType:'json',
contentType:'application/x-www-form- charset=utf-8',
success:function(data){
//返回值在进行访问抽取的方法，从后台返回
commonfunction(data);
&5.代码看到这也不是很多，最后一个了
//抽取拼串的方法
function commonfunction(data){
$('#projectlist').find("li").remove();
for (var i=0;i&data.i++ )
/*****因为此页面是动态加载的，这里主要就是进行拼串，代码也不少，就不漏出来占空间了*****/&br&　　　　　　　　　　
}&br&　　　　　　//开始是分页的核心了
if(data.length&0){
//设置页码
var pading = data[0].//总页码
$('#totalpage').val(pading);
var page = $('#jiazai').val();//当前页
$('#countpage').html("&b id='currentPageNo'&"+page+"&/b&/"+pading+"");
$('#span_number').html("共"+pading+"页 到第&input type='text' id='input_number' class='page-txtbox' /&页&input name='' value='确定' type='button' onclick='indexpage(-2)'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','"+pading+"', listPageCallback);' class='page-btn'/&")
$('#countpage').html("&b id='currentPageNo'&"+0+"&/b&/"+0+"");
//设置分页的底部 就是 首页 1 2 3 4 5 6 尾页
var pading = data[0].//总页码href="javascript:void(0);"
var nowpage = $('#jiazai').val();//当前页
//one two three five fore&br&　　　　　　//下面代码看着是比较麻烦，但是也不难理解 全是一样的代码，只不过是加了些判断
if(nowpage&5 ){
$('#one').text(1);
$('#one').attr('href','javascript:pagenum("'+1+'");');
$('#two').text(2);
$('#two').attr('href','javascript:pagenum("'+(2)+'");');
$('#three').text(3);
$('#three').attr('href','javascript:pagenum("'+(3)+'");');
$('#five').text(4);
$('#five').attr('href','javascript:pagenum("'+(4)+'");');
$('#fore').text(5);
$('#fore').attr('href','javascript:pagenum("'+(5)+'");');
$('#five').parent().show();
$('#fore').parent().show();
//alert("已经不是第五页了");
//设置中间的为当前页
$('#one').text(Number(nowpage)-2);
$('#one').attr('href','javascript:indexpage("'+(Number(nowpage)-2)+'");');
$('#two').text(Number(nowpage)-1);
$('#two').attr('href','javascript:indexpage("'+(Number(nowpage)-1)+'");');
$('#three').text(nowpage);
$('#three').attr('href','javascript:indexpage("'+(nowpage)+'");');
$('#five').parent().show();
$('#fore').parent().show();
//判断下一页是否超过了总页数
if(Number(nowpage)+1&pading){
$('#five').parent().hide();
$('#fore').parent().hide();
$('#five').parent().show();
$('#five').text(Number(nowpage)+1);
$('#five').attr('href','javascript:indexpage("'+(Number(nowpage)+1)+'");');
//判断下一页的第二页是否超过了总页数
if(Number(nowpage)+2&pading){
$('#fore').parent().hide();
$('#fore').parent().show();
$('#fore').text(Number(nowpage)+2);
$('#fore').attr('href','javascript:indexpage("'+(Number(nowpage)+2)+'");');
//如果总页数小于5，这块代码主要就是设置 1 2 3 4 5 这些的显示和隐藏的
if(pading==0){
$('#one').parent().hide();
$('#two').parent().hide();
$('#three').parent().hide();
$('#five').parent().hide();
$('#fore').parent().hide();
}else if(pading==1){
$('#shouye').hide();
$('#weiye').hide();
$('#one').parent().hide();
$('#two').parent().hide();
$('#three').parent().hide();
$('#five').parent().hide();
$('#fore').parent().hide();
}else if(pading==2){
$('#one').parent().show();
$('#two').parent().show();
$('#three').parent().hide();
$('#five').parent().hide();
$('#fore').parent().hide();
}else if(pading==3){
$('#one').parent().show();
$('#two').parent().show();
$('#three').parent().show();
$('#five').parent().hide();
$('#fore').parent().hide();
}else if(pading==4){
$('#one').parent().show();
$('#two').parent().show();
$('#three').parent().show();
$('#five').parent().show();
$('#fore').parent().hide();
$('#one').parent().show();
$('#two').parent().show();
$('#three').parent().show();
$('#five').parent().show();
$('#fore').parent().show();
//设置高亮显示的，就是是第一页时，1亮，第二页时 2亮
$('#page a').each(function() {
$(this).parent().removeClass("current");
if($(this).text()==nowpage){
$(this).parent().addClass("current");
//分页完返回页面顶端
$("html,body").animate({scrollTop:0}, 500);
//最后，给当前页码加1
$('#jiazai').val(Number(bianlaing)+Number(1));
纯js实现分页方法二：
function goPage(pno,psize){
var itable = document.getElementById("idData");
var num = itable.rows.//表格行数
var totalPage = 0;//总页数
var pageSize =//每页显示行数
if((num-1)/pageSize & parseInt((num-1)/pageSize)){
totalPage=parseInt((num-1)/pageSize)+1;
totalPage=parseInt((num-1)/pageSize);
var currentPage =//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行
var endRow = currentPage * pageSize+1;//结束显示的行
endRow = (endRow & num)? num : endR
//前三行始终显示
for(i=0;i&1;i++){
var irow = itable.rows[i];
irow.style.display = "block";
for(var i=1;i&i++){
var irow = itable.rows[i];
if(i&=startRow&&i&endRow){
irow.style.display = "block";
irow.style.display = "none";
var pageEnd = document.getElementById("pageEnd");
var tempStr = "";
if(currentPage&1){
tempStr += "&a href="/" mce_href="/""#/" onmouseout='MM_swapImgRestore()' onmouseover=/"MM_swapImage('Image69','','images/back_buttom01_dowm.jpg',1)/" onClick=/"goPage("+(currentPage-1)+","+psize+")/"&&img src="/" mce_src="/""images/back_buttom01.jpg/" name='Image69' width='38' height='15' border='0' id='Image69' /&&/a& "
tempStr += "&a href="/" mce_href="/""#/" onmouseout='MM_swapImgRestore()' onmouseover=/"MM_swapImage('Image69','','images/back_buttom01_dowm.jpg',1)/"&&img src="/" mce_src="/""images/back_buttom01.jpg/" name='Image69' width='38' height='15' border='0' id='Image69' /&&/a& ";
for (var i = 1; i &= totalP i++) {
if (i == currentPage) {
tempStr += i+" ";
tempStr += "&a href="/" mce_href="/""#/" onClick=/"goPage("+(i)+","+psize+")/"&"+i+"&/a& "
if(currentPage&totalPage){
tempStr += "&a href="/" mce_href="/""#/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image68','','images/next_buttom01_dowm.jpg',1)/" onClick=/"goPage("+(currentPage+1)+","+psize+")/"&&img src="/" mce_src="/""images/next_buttom01.jpg/" name='Image68' width='38' height='15' border='0' id='Image68' /&&/a& ";
tempStr += "&a href="/" mce_href="/""#/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image68','','images/next_buttom01_dowm.jpg',1)/"&&img src="/" mce_src="/""images/next_buttom01.jpg/" name='Image68' width='38' height='15' border='0' id='Image68' /&&/a& ";
tempStr +="&a href="/" mce_href="/""#top/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image20','','images/top_buttom01_dowm.jpg',1)/"&&img src="/" mce_src="/""images/top_buttom01.jpg/" name='Image20' width='38' height='15' border='0' id='Image20' /&&/a&";
document.getElementById("barcon").innerHTML = tempS
var base='&%=base%&';
window.onload = function(){
goPage(1,10);
&div id="barcon" name="barcon"&&/div&
温馨提示：js代码中上一页 下一页定义的图片根据自己需求可以改的
好了，到这里分页就完成了，如果你们需要使用的话，可能会话费一会去理解我的代码，其实代码不难，我是使用了两个小时把它写完的，只要一行一行代码看，并且自己再加注释，把这块弄过去，不出半小时绝对搞定！
好了，到此为止用两种方法给大家介绍纯js实现分页就结束了，有不明白的地方，欢迎提出，交流，共同学习进步，谢谢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具2281人阅读
&& & & & 自己写了一个JS的分写代码工具，一般如果提到JS分页，我首先想到的是EXT的分页，但是为了使用一个分写就把EXT引入进来似乎有点杀鸡用牛刀的感觉，而且也懒得去网上找别人的代码，就自己根据自己的需求写了个，也可以说是EXT表格分页代码的一个简单版。&& & & &&&/**&* JS 表格分页工具&*&&* 作者：ben &时间:&*&&* 功能有限，仅限于对table进行分页，只支持后台json格式传递过来的值&*&&* 使用案例:&* //定义头部的二维数组如下格式：&* var header = new Array();&* header[0]=[&头部1&,&对应数据名或者索引0&,&td宽度0&,&最大字符数&];&* header[1]=[&头部1&,&对应数据名或者索引1&,&td宽度1&,&最大字符数&];&* header[2]=[&头部2&,&对应数据名或者索引2&,&td宽度2&,&最大字符数&];&* ......&* header[n]=[&头部n&,&对应数据名或者索引n&,&td宽度3&,&最大字符数&];&*&&* //其中对应数据名或者索引名可以自己构造输出的格式对象，比如我要输出一个超链接，这个超链接里面有个动态的参数是需要从JSON数据里面解析的，就可以使用&* //类似以下数据方式使用：&a class='hs' href='${base}/service/def/left.html?wt_esb_service_defDomain.id=%{service_def_id}%'&%{service_def_id}%&/a&&* //其中%{对应数据名或者索引n}%直接会替换掉JSON里面的数据然后替换到上面的字符格式去。&*&&* //定义对象，将对象设置为window的一个属性，便与在换页展示的时候回调自己.&* //参数说明&* //start:从数据的第几个索引开始，默认为0&* //limit:每一页展示的数据数量，默认为10&* //cellStep:没一行展示的数据条数，默认为1&* //tableId:需要分页的表格ID编号，必须传&* //headTrClassName:头部样式名，可为空&* //trClassName:普通行的样式名，可为空&* //header:头部定义的二唯数组，不能为空.&* window.pagging = new table_pagging({limit:2,tableId:'testTable',header:header,headTrClassName:'lmheadbg2',trClassName:'bgbg2'});&* //最后一步就是分页输出&* pagging.pagging(JSON的数据);&*/&& & & &1. 这里有几个地方要说明下，第一版本只支持JSON的数据格式，但是有需要通过更改pagging这个方法解析数据的方式即可，在第一版暂时不实现，因为我也不清楚实际中使用那些格式较多，希望有人能给出好的建议，我去扩充，可以在下个版本实现。&& & & &2.使用window.pagging的原因是因为我需要获取当前对象的名称，这个实现方案有两种，一种是自己设置对象名，还有就是现在这种方式，将对象设置成window对象的一个属性，然后再对象内去遍历window的属性是否与自己相等来获取对象名称，对象名称主要在页面上用于构建多个分页表格，我在创建表格分页哪一行的时候内嵌了一个表格（见createPageTr方法），这个表格的名字是根据objectName+&assrotCurrentIndexTable&来生成的(不过后面我考虑其实也可以使用需要分页的表格名字来代替对象名也是一样的，当初脑子秀逗了下使用了这种方式).&& & & &3.header[0]=[&头部1&,&对应数据名或者索引0&,&td宽度0&,&最大字符数&];的第二个数据也就是&对应数据名或者索引0&可以自定义数据显示名称，比如&a href=&&&%{对应数据名或者索引}%&/a&,%{}%是替代模板符.&& & & &PS:让我写代码可以，让我来描述功能有时候就描述不清楚，具体见本文附件的示例test.html，资源文件在可以下载到，资源分是0分，欢迎拍砖。&& &
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：111443次
积分：1375
积分：1375
排名：千里之外
原创：28篇
评论：18条
(1)(1)(1)(1)(1)(2)(4)(3)(3)(5)(6)(2)(1)(2)(3)(1)