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>
时间: 2024-12-27 23:30:46

js 分页问题的相关文章

jsp、js分页功能的简单总结

一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分页技术,有选择的加载某部分数据,在数据量较大的时候,分部分加载数据.显示数据,可以有效提高程序的性能,当然,单纯的js的分页技术并没有这种效果. 所以,分页技术是web技术中比较常用的技术,而下面讨论的主要是两种分页技术:一种是jsp的分页技术,其读取数据分批次读取,操作页数跳转的时候才加载相应页面

js分页

<!DOCTYPE html> <html> <head> <title>js分页</title> <style type="text/css"> /*表格样式*/ .tbData { border-collapse:collapse; border-spacing:0px; border:solid 3px #ddd; font-size:14px; font-family:Consolas; color:#33

js分页页码算法

function get_hs_page(cur_page, total_page) { var result = ""; for(var i = 1; i <= total_page; i++) { if(i == 2 && cur_page - 6 > 1) { i = cur_page - 6; }else if(i == cur_page + 6 && cur_page + 6 < total_page) { i = total

js 分页

分页JS代码 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>分页JS代码</title><style type="text/css">.page{margin:2em;}.page a{text-decor

JS分页 + 获取MVC地址栏URL路径的最后参数

1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>AjaxPage</title> 11 <script src="/Scripts/jquery-1.7.1.js&q

一个重构的js分页类

// JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为String * @param sTBodyId 分页表格TBODY的属性ID值,为String,此项为要分页的主体内容 * @Version 1.0.0 * @author 辛现宝 2007-01-15 created * var __variable__; private * function __met

js分页小结

今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss){ $(this)})便利元素的方式添加当前页码3 特殊情况分页 用JS复制要分页的内容 通过灵活使用选择器删除多余内容 追加一个页面.after() 删除上一页显示的内容.remove()4有个.clone()直接复制当前元素并返回好像比赋值给一个变量的方法简单不少

js分页实例

js分页实例 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageusers.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description"

bootstrap在使用中的样式问题(自带的前台js分页和自己编写的后台分页方法)

使用bootstrap中的table样式时,table中,自动带有前台的js分页,如果不想用前台的js分页方法,就要把table中的初始化样式去掉,就会没有前台分页的样式了 代码: jQuery(document).ready(function() { App.init(); //TableEditable.init();  //将前台的table初始化样式去掉});

js分页、表格

js分页代码: //js分页 //el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数 var jsPage = function(el, count, pageStep, pageNum, fnGo) { this.getLink = function(fnGo, index, pageNum, text) { var s = '<a href="#p' + index + '" onclick="'