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 ...

随机推荐

python数据统计量分析
#-*- coding: utf-8 -*- #餐饮销量数据统计量分析 from __future__ import print_function import pandas as pd cateri ...
PostgreSQL字段类型说明
BIGSERIALSERIAL8 存储自动递增的惟一整数,最多 8 字节. BIT 固定长度的位串. BIT VARYING(n)VARBIT(n) 可变长度的位串,长度为 n 位. BOOLEAN ...
python之tkinter使用-文件系统遍历
# tkinter:文件系统遍历 import tkinter as tk, os from time import sleep class DirList(object): def __init__ ...
UOJ #76 【UR #6】懒癌
确实是一道很不错的题啊. 题目链接题意感觉也没什么特别简洁的版本,大家直接看题面吧. 题解我第一次看到这个类似问题的背景是疯狗,因此下面的题解不自觉的代入了...大家明白意思就好. 我们考虑对于 ...
腾讯云 Ubuntu16.04 搭建Git 服务
一．安装Git服务器所需软件 1.安装git-core, openssh-server, openssh-client三个软件.git-core是git的核心软件: openssh-server.op ...
删除linux下的指定文件
要求:删除linux下2天前的指定文件 find 文件问题:在 tmp 目录下有大量包含 picture_* 的临时文件,每天晚上 2:00 对一天前的文件进行清理.之前在 crontab 下跑如下脚 ...
Spark RDD操作之Map系算子
在linux系统上安装solrCloud 1.依赖: JRE solr7.3 需要 java1.8 独立的zookeeper服务 ,zookeeper安装请参考: http://zookeeper.a ...
BZOJ 2929: [Poi1999]洞穴攀行
2929: [Poi1999]洞穴攀行 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 351 Solved: 195[Submit][Status][ ...
【洛谷P3600】随机数生成器
https://www.luogu.org/problem/show?pid=3600#sub (题目链接) 题意一个$n$个数的序列,里面每个数值域为$[1,X]$.给$q$个区间,每个区间的权值 ...
SpringBoot集成RocketMQ
实战,用案例来说话前面已经说了JMS和RocketMQ一些概念和安装,下面使用SpringBoot来亲身操作一下. 生产者的操作 SpringBoot项目创建完成,引入依赖是第一步: <dep ...

js 分页问题

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

随机推荐

热门专题