js实现翻页保持checkbox勾选状态的实现
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 一般情况下js点击选中的内容如果页面刷新或翻页都会消失了，下面我来介绍一个实现翻页保持checkbox勾选状态，各位朋友可参考。...
|
实现原理：
每一个分页都包含在一个id为page+页码的div中，翻到其他页时，隐藏当前页，首先判断目标页是否已经加载过，如果没有就通过ajax去获取页面，同样包含在一个page+页面的div中，等于说所有的分页都在页面中，只不过非当前页的div都设为display=none了，所以细心的你可能会发现加载过的页面再加载怎么会那么快啊。
核心的部分就是这个javascript函数：
| 代码如下 |
复制代码 |
// 显示分页，传进去分页页码
function show_search_page(page_num)
{
// 首先判断目标页是否已经加载过，加载过的话就把其他页都设定隐藏再把当前页显示，然后结束返回
if ($chk($('page'+page_num)))
{
$('song_div').getElements('div[id^=page]').each(function(item,index){$(item).setStyle('display','none');});
$('page'+page_num).setStyle('display','block');
return;
}
// 如果没有加载过，就通过ajax去获取页面数据，然后生成一个page+页面的div，并显示出来
var search_song_with_ajax = new Ajax('./getsearchdata.php?cur_page=' + page_num + '&key={_$search_key_}',
{method: 'get',
onComplete: function(){
$('song_div').getElements('div[id^=page]').each(function(item,index){$(item).setStyle('display','none');});
var new_div = new Element('div',{
'id':'page'+page_num
});
$(new_div).setHTML(this.response.text);
$(new_div).injectInside('song_div');
}
}).request();
}
|
javascript的代码可以到页面去查看，hope it usefull for you |
