超长文章(HTML格式)自动分页,用ASP和JS实现


原文出处: http://blog.mvpcn.net/jaron/archive/2004/07/15/2159.aspx

这两天看到有朋友提出文章自动分页的问题,贴出我原来系统中的一部分代码,供大家参照,看是否有需要改进的地方或有更好的建议,其实偶们公司最近的项目都是用c#,ASP已经很少用了...
这里只贴出了一部分代码,有兴趣的朋友,可以在
http://demo.jaron.cn 测试,管理端 http://demo.jaron.cn/admintools 帐号和密码都是 demo

生成后的页面的演示:
---------------
http://demo.jaron.cn/SiteManager/59/2004-05/20040517001558-101502.html
http://demo.jaron.cn/SiteManager/59/2004-05/20040517001558-101502_2.html
http://demo.jaron.cn/SiteManager/59/2004-05/20040517001558-101502_3.html
http://demo.jaron.cn/SiteManager/59/2004-05/20040517001558-101502_4.html

JavaScript脚本部分
======================
以下是代码片段:
function submitPostIfRame(mode){
 var sMarkup = doc_html.getHTML();  //从html编辑器中取数据
 with(document.forms[0]){
  doc_html.document.open();
  doc_html.document.write(sMarkup);
  doc_html.document.close();
  doc_html.document.body.innerHTML = sMarkup;
  var oBody=doc_html.document.body;
  var oHTML="";
  for(var i=0;i   if(i!=oBody.childNodes.length-1){
    if(oBody.childNodes[i].nodeType==3){
     oHTML+=oBody.childNodes[i].nodeValue+"";
    }else{
     oHTML+=oBody.childNodes[i].outerHTML+"";
    }
   }else{
    if(oBody.childNodes[i].nodeType==3){
     oHTML+=oBody.childNodes[i].nodeValue;
    }else{
     oHTML+=oBody.childNodes[i].outerHTML;
    }
   }
  }
  news_content.value = oHTML
 }
 return true;
}


ASP脚本部分
===============
以下是代码片段:
Function calculate_pagination(strContent, pSize)
    On Error Resume Next
    Dim aCon, intfor, intCount, strTemp, strTemp2
    aCon = Split(strContent, "", -1, 1)
    intCount = UBound(aCon)
    strTemp = ""
    strTemp2 = ""
    Page = 1
    For intfor = 0 To intCount
        strTemp = strTemp & aCon(intfor)
        strTemp2 = strTemp2 & RemoveHTML(aCon(intfor))
        'strTemp2 = strTemp2 & aCon(intFor)
        If Len(strTemp2) >= pSize Then
            Page = Page + 1
            strTemp = ""
            strTemp2 = ""
        End If
    Next
    'If strTemp2 <> "" Then Page = Page - 1
    calculate_pagination = Page
    If Err.Number <> 0 Then
        calculate_pagination = 1
        Err.Clear
    End If
End Function
Function get_page_text(strContent, pagenum, totalpage, pSize)
    aCon = Split(strContent, "", -1, 1)
    intCount = UBound(aCon)
    strTemp = ""
    strTemp2 = ""
    Page = 1
    For intfor = 0 To intCount
        strTemp = strTemp & aCon(intfor)
        strTemp2 = strTemp2 & RemoveHTML(aCon(intfor))
        'strTemp2 = strTemp2 & aCon(intFor)
        If Len(strTemp2) >= pSize Then
            If pagenum = Page Then
                get_page_text = strTemp
                Exit For
            End If
            Page = Page + 1
            strTemp = ""
            strTemp2 = ""
        End If
    Next
    If strTemp2 <> "" And pagenum > Page - 1 Then get_page_text = strTemp
End Function

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Asp+AJAX静态分页 亲测 可用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Asp+AJAX静态分页</title> <style type="text/css"> <!-- body { text-align:center;font:14px Verdana,sans-serif; } a:link,a:visited { color:#00f;text-decoration:none; } a:hover { color:#f00;text-decoration:underline; } #main { width:450px;background:#f2f2f2;border:1px #999 solid;padding:10px;text-align:left;line-height:150%;margin:0 auto; } #title { width:100%;line-height:30px;border-bottom:1px #999 solid;display:table; } #left { float:left;width:50%;text-align:left;font-size:14px;font-weight:bold; } #right { float:left;width:50%;text-align:right; } #content { width:100%;margin:10px 0;clear:both; } #download { width:100%;margin:10px 0;line-height:150%; } --> </style> [removed] <!-- function createAjax() { //该函数将返回XMLHTTP对象实例 var _xmlhttp; try { _xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的创建方式 } catch (e) { try { _xmlhttp=new XMLHttpRequest(); //FF等浏览器的创建方式 } catch (e) { _xmlhttp=false; //如果创建失败,将返回false } } return _xmlhttp; //返回xmlhttp对象实例 } function getweblist(page) { //该函数用来获取分页数据 var xmlhttp=createAjax(); //创建变量xmlhttp,并将createAjax()函数创建的对象实例赋于它 if (xmlhttp) { //如果xmlhttp对象创建成功,则执行条件语句中的程序 var content=document.getElementById('content'); //获取页面中id为content的对象 xmlhttp.open('get','server.asp?page='+page+'&n='+Math.random(),true); //打开与服务器的连接,其中get为连接方式,server.asp为要连接的页面,有两个参数,其中第一个参数page为需要返回数据的页数,第二个参数n为一个随机数,这样每次发送的URL都会不一样,相当于都向服务器发出一个新的请求,避免浏览器缓存数据。 xmlhttp.onreadystatechange=function() { //为xmlhttp对象的readyState属性指定事件,改属性值改变时,则会执行其中的程序 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //如果xmlhttp.readyState==4并且xmlhttp.status==200时,执行条件中的程序,其中readyState有五个值,4为请求完成,是客户端向服务器提交的数据成功到达,status有N多值-_-!!,其中200为OK,是指服务器向客户端完成发送数据。 content[removed]=unescape(xmlhttp.responseText); //将服务器返回的数据解码并写入指定的ID中。 } else { content[removed]='<span>正在从服务器提取数据......</span>'; //如果服务器没有完成传送,则向用户提示正在传输。 } } xmlhttp.send(null); //向服务器发送请求,因为是get请求,会直接附在URL后面,所以这里括号中的数据为null,IE中也可以不写,但FF就必须加上null,否则会发送失败。 } } function edit() { //编辑分页显示条数的函数 var str='<form style="margin:0">每页显示 <input type="text" id="pagesize" size="3"> 条 <input type="button" id="savebtn" value="保存" onclick="save()"> <input type="button" id="cancelbtn" value="取消" onclick="rightinfo()"></form>' //定义html字符串 var right=document.getElementById('right'); //获得页面中的right对象。 right[removed]=str; //将str变量的值写入该对象中。 } function rightinfo() { //right对象中的原始信息,请在页面开始和被显示条数被修改后调用 document.getElementById('right')[removed]='<a href="[removed]void(edit())" title="修改每页显示条数">Edit</a>'; } function save() { //保存修改后的显示条数 var pagesize=document.getElementById('pagesize'); //这个就不写了,跟上面的用法一样。 if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) { //确定用户输入的新数据是不是一个数字 alert("请正确填写每页显示条数! "); return; } var xmlhttp=createAjax(); //创建对象 if (xmlhttp) { xmlhttp.open('get','set.asp?pagesize='+pagesize.value+'&n='+Math.random(),true) //参上同看 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('right')[removed]=unescape(xmlhttp.responseText); //先写入从服务器返回的字符串,如果成功,会写入completed。 getweblist(1); //从新获取新修改后的第一页的数据 setTimeout('rightinfo()',3000); //3秒后将right对象的原始字符串写入。 } else { document.getElementById('pagesize').disabled=true; //将几个FORM表单的元素都设为不可改动 document.getElementById('savebtn').disabled=true; document.getElementById('cancelbtn').disabled=true; } } xmlhttp.send(null); //发送请求。 } } //--> [removed] </head> <body> <div id="main"> <div id="title"> <div id="left">Asp+AJAX静态分页</div> <div id="right"></div> </div> <div id="content"></div> </div> </body> </html>
很高兴为您解答这个问题。以下是一个简单的示例代码,使用Layui和nicePage.js实现JSON自动表格分页: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML表单数据自动分页</title> <link rel="stylesheet" href="//cdn.bootcss.com/layui/2.5.6/css/layui.min.css"> <link rel="stylesheet" href="//cdn.bootcss.com/nicepage/1.2.0/nicepage.css"> </head> <body> <div class="layui-container"> <table id="data_table" class="layui-table"></table> <div id="page"></div> </div> <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.bootcss.com/layui/2.5.6/layui.min.js"></script> <script src="//cdn.bootcss.com/nicepage/1.2.0/jquery.nicepage.js"></script> <script> layui.use('table', function(){ var table = layui.table; // 模拟JSON数据 var data = [ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 22 }, { id: 3, name: '王五', age: 25 }, { id: 4, name: '赵六', age: 28 }, { id: 5, name: '陈七', age: 30 }, { id: 6, name: '周八', age: 35 }, { id: 7, name: '吴九', age: 40 }, { id: 8, name: '郑十', age: 50 } ]; // 渲染表格 table.render({ elem: '#data_table', cols: [[ { field: 'id', title: 'ID', width: 80 }, { field: 'name', title: '姓名', width: 120 }, { field: 'age', title: '年龄', width: 80 } ]], data: data }); // 分页 $('#page').nicePage({ pageNo: 1, pageSize: 3, totalRows: data.length, autoLoad: true, callback: function(pageNo, pageSize){ var start = (pageNo - 1) * pageSize; var end = start + pageSize; table.reload('data_table', { data: data.slice(start, end) }); } }); }); </script> </body> </html> ``` 在这个示例中,我们使用Layui的table模块来渲染表格,然后使用nicePage.js实现自动分页。我们首先定义了一个模拟的JSON数据数组,然后使用`table.render()`方法将数据渲染到表格中。接下来,我们使用nicePage.js来创建一个分页控件,并在`callback`回调函数中使用`table.reload()`方法动态加载表格数据。在这个回调函数中,我们根据当前页码和每页显示的行数来计算出要显示的数据的起始和结束位置,然后使用`slice()`方法从原始数据数组中获取相应的数据,并使用`reload()`方法重新加载表格。这样,我们就可以实现自动分页的表格了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值