如何用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();
}
}查询到的结果如果内容太多,分页就无法使用。请高手们指教。
例如: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();
}
}查询到的结果如果内容太多,分页就无法使用。请高手们指教。
<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>
请高手指点,我还是弄不了.
<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里面自动生成模拟数据,我改了好几遍都不成功,我是一个菜鸟.谢谢你帮我改一下.
<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>
我还想问一下,如何获取搜索的结果值,如:search.html?标题1;我想弄几个标签链接如:[标题2]链接为:search.html?标题2
<form>
<input type="text" value="" onkeyup="filter(this.value);" style="width: 120px;" />
<input type="button" id="search" value="搜索" onclick="search()"/>
</form>
我想通过按钮点击后产生结果