js 分页问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>页面分页</title>

    <style type="text/css">

        *

        {

            font-size: 10.2pt;

            font-family: tahoma;

            line-height: 150%;

        }

        .divContent

        {

            border: 1px solid red;

            background-color: #FFD2D3;

            width: 500px;

            word-break: break-all;

            margin: 10px 0px 10px;

            padding: 10px;

        }

    </style>

</head>

<body>

    <h1>标题</h1>

    <div id="divContent">

    </div>

    <script type="text/javascript">

          // input里面不允许包含：初中、中学、初级中学这三个词语

         s="<p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><img src='/login/image/password.png' /><p><table border='1'><tr><td>111</td><td>user</td></tr><tr><td>111</td><td>username</td></tr><tr><td>111</td><td>username</td></tr></table>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，<img src='/login/image/password3.png' />有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p><table border='1'><tr><td>111</td><td>username</td></tr><tr><td>111</td><td>username</td></tr><tr><td>111</td><td>username</td></tr></table>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p>";

         mainContent = s;

         var tabReg = /(<table[^>]*>((?!table).)*<\/table>)+/gi;

         var tabMatch = tabReg.test(s);

         var tabMatchContentArray = [];

         tabMatchContentArray = s.match(tabReg);

         if(tabMatch)

         {

            mainContent = s.replace(tabReg,"#");

         }

         //alert(mainContent); 

         //对img标签进行匹配

         var imgReg = /(<img\s+src='\S+'\s*(\/)?>)/gi;

         imgMatchContentArray = s.match(imgReg);

         if(imgReg.test(s))

         {

            //将img标签替换为*

            mainContent = mainContent.replace(imgReg,"*");

         }

        var pageIndex = 4;

        var size = 100;

        var tableContentArray = mainContent.split("#");

        var array = [];

        var arrayIndex = [];

        var len =0;

        for(var i=0;i<tableContentArray.length;i++)

        {

            var con = tableContentArray[i];

            len += con.length;

            arrayIndex[i] = len;

            array[i] = Math.ceil(con.length /size);

        }

        var tableIndexArray = [];

        var sum = 1;

        for(var j=0;j<array.length-1;j++)

        {

            sum += array[j];

            tableIndexArray[j] = sum;

        }

        //alert(tableIndexArray);

        //alert(tableIndexArray.indexOf(pageIndex) );

        var currentPageContent = mainContent.substr((pageIndex-1)*size,size);

        alert(currentPageContent);

        if(tableIndexArray.indexOf(pageIndex) >= 0)

        {

            alert(1111);

            currentPageContent = tabMatchContentArray[tableIndexArray.indexOf(pageIndex)];

            //alert(currentPageContent);

        }

        if(currentPageContent.indexOf("#")!= -1)

        {

            alert(222);

            var beginToCurrentPageContent = mainContent.substr(0,pageIndex*size);

            var tabLastIndex = beginToCurrentPageContent.lastIndexOf("#");

            alert(tabLastIndex);

            currentPageContent = currentPageContent.substr(0,tabLastIndex-(pageIndex-1)*size);

            alert(currentPageContent);

            //当前页是否有 * 获取最后一个 * 的位置

            var indexOf = currentPageContent.indexOf("*");

            if(indexOf >= 0)

            {

                  //获取开始到当前页位置的内容 中的 * 的最后的下标

                  var reCount = beginToCurrentPageContent.split("*").length - 1;

                  var contentArray = currentPageContent.split("*");

                  currentPageContent = replaceImgContent(contentArray,reCount,imgMatchContentArray);

            }

        }

        else

        {

            alert(22222);

            //当前页是否有 * 获取最后一个 * 的位置

            var indexOf = currentPageContent.indexOf("*");

            if(indexOf >= 0)

            {

                  //获取从开始位置到当前页位置的内容

                  var beginToCurrentPageContent = mainContent.substr(0,pageIndex*size);

                  //获取开始到当前页位置的内容 中的 * 的最后的下标

                  var reCount = beginToCurrentPageContent.split("*").length - 1;

                  var contentArray = currentPageContent.split("*");

                  currentPageContent = replaceImgContent(contentArray,reCount,imgMatchContentArray);

            }

        }

       document.getElementById("divContent").innerHTML= currentPageContent;

        /*  currentArray:当前页以 * 分割后的数组

            replaceCount:从开始内容到当前页的内容 * 的个数

            matchArray ： img标签的匹配的内容

        */

        function replaceImgContent(currentArray,replaceCount,matchArray)

        {

            var result = "";

            for(var i=currentArray.length -1,j = replaceCount-1 ;i>=1; i--)

            {   

               var temp = (matchArray[j] + currentArray[i]);

               result = temp + result;

               j--;

            }

            result = currentArray[0] + result ;

            return result;

        }

    </script>

</body>

</html>

js 分页问题的更多相关文章

js分页小结
今天解决了JS分页的问题1 页码给每页的内容套一个相同的类名通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...
自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
jsp、js分页功能的简单总结
一.概述首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...
一个重构的js分页类
// JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...
面向对象版js分页
基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...
纯js分页代码(简洁实用)
纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...
JS分页 + 获取MVC地址栏URL路径的最后参数
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
浅谈js分页的几种方法
一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页更深入的去理解分页的意 ...
JS分页条插件
目标制作js分页导航jq插件,用于无刷新分页或者刷新分页实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照 ...
js分页实例
js分页实例案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...

随机推荐

详解Windows不重启使环境变量修改生效(经典)
在“我的电脑”->“属性”->“高级”->“环境变量”中增加或修改环境变量后,需重启系统才能使之生效.有没有什么方法可让它即时生效呢?下面介绍一种方法: 以修改环境变量“PATH”为 ...
python threading模块使用以及python多线程操作的实践(使用Queue队列模块)
今天花了近乎一天的时间研究python关于多线程的问题,查看了大量源码自己也实践了一个生产消费者模型,所以把一天的收获总结一下. 由于GIL(Global Interpreter Lock)锁的关系 ...
atan和unwrap解卷绕
要计算一个系统相频特性,就要用到反正切函数,计算机中反正切函数规定,在一.二象限中的角度为0-pi,三四象限的角度为0--pi. 若一个角度从0变到2pi,但实际得到的结果是0-pi,再由-pi-0, ...
BBS论坛项目
一.表结构设计: 1.帖子: class Article(models.Model): title = models.CharField(max_length=255,unique=True) cat ...
小程序源码下载[demo整理自github]
微信小程序的火热程度大家都有所了解,也有很多牛人写了不错的小程序,今天ytkah就整理一些github上的小程序开源项目,源码可以直接下载来用,感兴趣的朋友赶紧去看看吧!以下小程序排名按star的数量 ...
Mvc 前台匿名对象
View无法使用 dynamic 报错: object 未包含....的属性这里需要区别一下:如果dynamic只是简单模型,那么还是可以使用的.例如 dynamic v = new Expando ...
JVM 内存区域 (运行时数据区域)
JVM 内存区域 (运行时数据区域) 链接:https://www.jianshu.com/p/ec479baf4d06 运行时数据区域 Java 虚拟机在执行 Java 程序的过程中会把它所管理的内 ...
MT【211】保序同构
设$S,T$是$R$的两个非空子集,如果存在一个从$S$到$T$的函数$y=f(x)$满足:$1)T=\{f(x)|x\in S\};$2)对任意$x_1,x_2\in S$,当$x_1<x_2 ...
NOI2018退役记
NOI2018退役记终于我也退役了-- Day0 高中毕业前最后一次坐飞机了--在机场干什么呢?当然是打元气打元气打元气.下飞机干什么呢?当然是打元气打元气打元气. 有接机服务,大巴上有个导游,又向 ...
bzoj4504 K个串 (优先队列+主席树)
首先如果没有出现次数的限制的话,这题就是超级钢琴但由于有了这个限制,不能简单地用前缀和考虑顺着做的时候每个点的贡献,如果a[i]=x,x上次出现位置是lst[x](可以用一个map来记),那它会给 ...

js 分页问题

js 分页问题的更多相关文章

随机推荐

热门专题