如何用JS实现静态页面html查找和分页问题

如何用js实现查询当前静态列表页(html)
例如:list.htm页面(列表页)有50条记录:
<li>数据1...</li>
<li>数据2...</li>
<li>数据2...</li>
<li>数据1...</li>
<li>数据1...</li>
<li>数据1...</li>
....
查找:<input type="text" value="数据1"> 搜索，将查询到的数据列出并分页：
<li>数据1...</li>
<li>数据1...</li>
<li>数据1...</li>
<li>数据1...</li>上一页 1 2 3 4 5 下一页
---------------------------------------------------------------------------------------------------
我在网上找了一些资料，但效果都不理想。
<input type="text" name="key" class="search" id="txtSearch" onChange="txtSearch()" placeholder="输入关键字..." /><input type="submit" value="搜索"><div class="list" id="divMain">
<ul id="content1">
<li class="data">标题1...</li>
<li class="data">标题2...</li>
<li class="data">标题3...</li>
</ul>
</div>
<div class="page page1"></div>JS
  function txtSearch()
  {
   //遍历移除b标签，防止第二次搜索bug
   $(".changestyle").each(function()
   {
     var xx=$(this).html();
     $(this).replaceWith(xx);
    });
   //整个客户信息div
   var str=$("#divMain").html();
   //文本输入框
   var txt=$("#txtSearch").val();
   //不为空
   if($.trim(txt)!="")
   {
    //定义b标签样式红色加粗
    var re="<b class='changestyle'>"+txt+"</b>";
    //替换搜索相关的所有内容
    var nn=str.replace( new RegExp(txt,"gm"),re);
    //赋值
    // document.getElementById("divMain").innerHTML=nn;
    $("#divMain1").html(nn);
    //显示搜索内容相关的div
   $(".data").hide().filter(":contains('"+txt+"')").show();
   }
   else
   {
   $(".data").show();
   }
  }查询到的结果如果内容太多，分页就无法使用。请高手们指教。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

easyui的datagrid有分页功能，也可以筛选
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <input type="text" value="" onkeyup="filter(this.value);" />
    <ol id="list">
    </ol>
    <div id="pageDiv"></div>
</body>
</html>
<script>
    var datas = [], Filtered = [], page = 1, pagesize = 10, pageData = [];
    //生成模拟数据
    for (var i = 0; i < 1000; i++) {
        datas.push('data_' + i);
    }
    //过滤
    function filter(q) {
        Filtered = [];
        if (q == '') {
            Filtered = datas;
        } else {
            for (var i = 0, n = datas.length; i < n; i++) {
                if (datas[i].toLowerCase().indexOf(q.toLowerCase()) > -1) {
                    Filtered.push(datas[i]);
                }
            }
        }
        render();
    }
    //渲染数据
    function render() {
        document.getElementById('list').innerHTML = getPageData();
        setPageInfo();
    }
    //转到指定页
    function goPage(n) {
        page = n;
        render();
    }
    //取得当前页数据
    function getPageData() {
        if ((page - 1) * pagesize > Filtered.length) {
            page = Math.ceil(Filtered.length / pagesize);
        }
        var n = Math.min(pagesize, Filtered.length - (page - 1) * pagesize);
        pageData = Filtered.slice((page - 1) * pagesize, n + (page - 1) * pagesize);
        var html = [];
        for (var i = 0, n = pageData.length; i < n; i++) {
            html.push('<li>' + pageData[i] + '</li>');
        }
        return html.join("");
    }
    //设置分页条信息
    function setPageInfo() {
        var pageinfo = '';
        var pageCount = Math.ceil(Filtered.length / pagesize);
        if (pageCount <= 1) {
            document.getElementById('pageDiv').innerHTML = '';
            return;
        }
        if (page > 1) {
            pageinfo += '<a href="javascript:void(0);" onclick="goPage(1);">首页</a> ';
        }
        if (page > 10) {
            pageinfo += '<a href="javascript:void(0);" onclick="goPage(' + (page - 10) + ');">前10页</a> ';
        }
        for (var i = Math.max(1, page - 10) ; i < page; i++) {
            pageinfo += '<a href="javascript:void(0);" onclick="goPage(' + i + ');">' + i + '</a> ';
        }
        pageinfo += page + ' ';        for (var i = page + 1 ; i <= Math.min(10 + page, pageCount) ; i++) {
            pageinfo += '<a href="javascript:void(0);" onclick="goPage(' + i + ');">' + i + '</a> ';
        }
        if (page + 10 < pageCount) {
            pageinfo += '<a href="javascript:void(0);" onclick="goPage(' + (page + 10) + ');">后10页</a> ';
        }
        if (page < pageCount) {
            pageinfo += '<a href="javascript:void(0);" onclick="goPage(' + pageCount + ');">末页</a> ';
        }
        document.getElementById('pageDiv').innerHTML = pageinfo;
    }    Filtered = datas;
    render();
</script>
<ol>里面的<li>数据能否自己指定?
请高手指点,我还是弄不了.
我的数据就是静态页面li中,如下:
<div class="list" id="divMain">
<ul id="content1">
<li class="data">标题1...</li>
<li class="data">标题2...</li>
<li class="data">标题3...</li>
</ul>
</div>
<div class="page page1"></div>但是JS里面自动生成模拟数据,我改了好几遍都不成功,我是一个菜鸟.谢谢你帮我改一下.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>分页测试</title>
</head>
<body>
    <input type="text" value="" onkeyup="filter(this.value);" style="width: 120px;" />
    <select onchange="pagesize=this.value;render();">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
    </select>
    <div class="list" id="divMain">
        <ul id="content1">
            <li class="data">标题1...</li>
            <li class="data">标题2...</li>
            <li class="data">标题3...</li>
            <li class="data">标题4...</li>
            <li class="data">标题5...</li>
            <li class="data">标题6...</li>
            <li class="data">标题7...</li>
            <li class="data">标题8...</li>
            <li class="data">标题9...</li>
            <li class="data">标题10...</li>
            <li class="data">标题11...</li>
            <li class="data">标题12...</li>
            <li class="data">标题13...</li>
            <li class="data">标题14...</li>
            <li class="data">标题15...</li>
            <li class="data">标题16...</li>
            <li class="data">标题17...</li>
            <li class="data">标题18...</li>
            <li class="data">标题19...</li>
            <li class="data">标题20...</li>
            <li class="data">标题21...</li>
            <li class="data">标题22...</li>
            <li class="data">标题23...</li>
            <li class="data">标题24...</li>
            <li class="data">标题25...</li>
            <li class="data">标题26...</li>
            <li class="data">标题27...</li>
            <li class="data">标题28...</li>
            <li class="data">标题29...</li>
            <li class="data">标题30...</li>
        </ul>
    </div>
    <div class="page page1"></div>
    <ol id="list">
    </ol>
    <div id="pageDiv"></div>
</body>
</html>
<script>
    var datas = [], Filtered = [], page = 1, pagesize = 10, pageData = [];
    //生成模拟数据
    //for (var i = 0; i < 1000; i++) {
    //    datas.push('data_' + i);
    //}
    var lis = document.getElementById('content1').getElementsByTagName('li');
    for (var i = 0, n = lis.length; i < n; i++) {
        datas.push(lis[i].innerHTML);
    };
    //过滤
    function filter(q) {
        Filtered = [];
        if (q == '') {
            Filtered = datas;
        } else {
            for (var i = 0, n = datas.length; i < n; i++) {
                if (datas[i].toLowerCase().indexOf(q.toLowerCase()) > -1) {
                    Filtered.push(datas[i]);
                }
            }
        }
        render();
    }
    //渲染数据
    function render() {
        document.getElementById('content1').innerHTML = getPageData();
        setPageInfo();
    }
    //转到指定页
    function goPage(n) {
        page = n;
        render();
    }
    //取得当前页数据
    function getPageData() {
        if ((page - 1) * pagesize > Filtered.length) {
            page = Math.ceil(Filtered.length / pagesize);
        }
        var n = Math.min(pagesize, Filtered.length - (page - 1) * pagesize);
        pageData = Filtered.slice((page - 1) * pagesize, n + (page - 1) * pagesize);
        var html = [];
        for (var i = 0, n = pageData.length; i < n; i++) {
            html.push('<li>' + pageData[i] + '</li>');
        }
        return html.join("");
    }
    //设置分页条信息
    function setPageInfo() {
        var pageinfo = '';
        var pageCount = Math.ceil(Filtered.length / pagesize);
        if (pageCount <= 1) {
            document.getElementById('pageDiv').innerHTML = '';
            return;
        }
        if (page > 1) {
            pageinfo += getpagelink(1, '首页');
        }
        if (page > 10) {
            pageinfo += getpagelink(page - 10, '前10页');
        }
        for (var i = Math.max(1, page - 10) ; i < page; i++) {
            pageinfo += getpagelink(i, i);
        }        pageinfo += page + ' ';        for (var i = page + 1 ; i <= Math.min(10 + page, pageCount) ; i++) {
            pageinfo += getpagelink(i, i);
        }
        if (page + 10 < pageCount) {
            pageinfo += getpagelink(page + 10, '后10页');
        }
        if (page < pageCount) {
            pageinfo += getpagelink(pageCount, '末页');
        }
        document.getElementById('pageDiv').innerHTML = pageinfo;
    }    function getpagelink(page, text) {
        return '<a href="javascript:void(0);" onclick="goPage(' + page + ');">' + text + '</a> '
    }    Filtered = datas;
    render();
</script>
真的可以用,谢谢apollokk大侠.
我还想问一下，如何获取搜索的结果值，如：search.html?标题1；我想弄几个标签链接如：[标题2]链接为：search.html?标题2
<form>参数应该怎么写？类似这种的：
<form>
<input type="text" value="" onkeyup="filter(this.value);" style="width: 120px;" />
<input type="button"  id="search" value="搜索" onclick="search()"/>
</form>
我想通过按钮点击后产生结果