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

时间： 2024-09-22 00:26:56

js实现翻页保持checkbox勾选状态的实现的相关文章

js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析

以下是对js限制checkbox勾选的个数以及php获取多个checkbbox的方法进行了详细的分析介绍,需要的朋友可以参考下   首先是js限制checkbbox勾选个数的代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>

wpf mvvm 模式的datagrid控件模板列的列头里的checkbox怎么在viewmodel里撤销勾选状态

问题描述 wpfmvvm模式的datagrid控件模板列的列头里的checkbox怎么在viewmodel里撤销勾选状态点击全选,点击下一页分以后全选框还是勾选状态,希望datagrid重新加载数据后模板的全选状态为未勾选, 解决方案 解决方案二:你需要编写勾选的点击事件,绑定只是用来显示而不是做动作处理,mvvm模式也需要后台事件处理的支持的.

图片-设置树节点为勾选状态，求快速解答

问题描述 设置树节点为勾选状态,求快速解答 解决方案 treeObj是什么类型? 参考http://blog.csdn.net/wangpingfang/article/details/7174540 解决方案二: 你用的树形js控件是什么呢?到官网找Ddemo或者API,一般的树形展示控件都是简单易学.易用的. 解决方案三: 再仔细看看自己所用的树形控件 解决方案四: ztree树节点有一个checked属性 解决方案五: 请参考官方API:http://www.ztree.me/v3/api

easyUI中设置了idField:&amp;amp;#x27;userid&amp;amp;#x27;, 但翻页还是没有保留选中状态，求解，在线等

问题描述 easyUI中设置了idField:'userid',但翻页还是没有保留选中状态,求解,在线等代码如下:$('#alluncheckusers').datagrid({fitColumns:true,singleSelect:false,//单选项pagination:true,//分页控件selectOnCheck:true,checkOnSelect:true,loadMsg:'正在加载,请稍后...',rownumbers:true,idField:'userid',frozen

jsp框架中如何在翻页后保持复选框的选取状态？

问题描述 如题:选择数据量巨大 多次选取 在翻页后也应该保持选取状态 最后提交给数据库给个思路即可 不用代码 问题补充:Copperfield 写道 解决方案 数据量大的话用:一,把选择记录写入cookie保存下来,然后在获取二,把选择记录保存在session中,在翻页后可以将其写入到隐藏表单中数据量小的话:用Copperfield提供的方法会更方便其实只需要想办法获取前面选择复选框值就可以了解决方案二:在当前页使用隐藏域记录选取的值,翻页后再返回时,根据隐藏域是否有值设置复选框状态.解决方案三

checkbox勾选判断代码分析_javascript技巧

复制代码 代码如下: var xieYi=document.getElementById("xieYi");if(!xieYi.checked){    alert("请先阅读并勾选注册协议!");    return;     } 最开始这样写,不过并不是所有的情况都需要勾选这个协议,协议有时不会在前台页面显示,所以改了第二种 复制代码 代码如下: var xieYi=document.getElementById("xieYi");    i

jquery checkbox 勾选的bug问题解决方案与分析

 在做项目的时候遇到个jQuery checkbok复选框的选中取消的BUG,咨询了大神,才闹明白怎么回事,这里记录下来,分析给大家. 先上代码:   代码如下: <form>         你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br />         <input type="checkbox" name="ite

Extjs改变树节点的勾选状态点击按钮将复选框去掉_extjs

今天系统中有处地方需要一个功能点击一个按钮后将树节点前的复选框去掉,变成没有选择的状态.网上搜索了半天,然后自己查查API,终于找到解决办法了,下面把方法贴出来. 在Extjs3.x和4.x版本中的处理方法是不一样的, 3.x版本中可以这样操作: 复制代码 代码如下: node.attributes.checked=false; node.getUI().toggleCheck(false); 这样就可以取消节点的check状态并且将页面上的勾去掉. 在ExtJs4中的方法如下: 复制代码 代码

报表 批量打印-通过勾选一次打印多页报表

问题描述 通过勾选一次打印多页报表 通过勾选按钮在datagridview中多选记录,在报表模板中进行多页打印,怎么做?求大神 解决方案 Sub 手动双面打印() Dim Pages As Long Dim myBottonNum As Integer Dim myPrompt1 As String Dim myPrompt2 As String myPrompt1 = ""在打印时发生错误,请检查你的打印机设置"" myPrompt2 = ""