当前位置:Gxlcms > PHP教程 > jquery-ajax-php+ajax分页时,checkbox复选框选中的问题

jquery-ajax-php+ajax分页时,checkbox复选框选中的问题

时间:2021-07-01 10:21:17 帮助过:2人阅读

目的:所有的数据实现分页显示,不是查询所有的数据,而是每次取固定的条数。而且在每页选中的数据ID都可以保存,一起提交选中的数据,做相应的操作。比如第一页选中2条,第二页选中3条,提交时是5条,如果返回第一页,这也显示选中的数据,回到第二页,也会显示选中的数据,以此类推,取消选中,翻页几次,无任何问题;总之,无论选中还是取消,翻页都没有bug
这个该如何实现呢?..分页这个我没问题,但是这个复选框一点下一页,就会给刷新掉

回复内容:

目的:所有的数据实现分页显示,不是查询所有的数据,而是每次取固定的条数。而且在每页选中的数据ID都可以保存,一起提交选中的数据,做相应的操作。比如第一页选中2条,第二页选中3条,提交时是5条,如果返回第一页,这也显示选中的数据,回到第二页,也会显示选中的数据,以此类推,取消选中,翻页几次,无任何问题;总之,无论选中还是取消,翻页都没有bug
这个该如何实现呢?..分页这个我没问题,但是这个复选框一点下一页,就会给刷新掉

两种方案

方案1
- - -
1. 每一个页面一个单独的容器(div)。

    
        ...
    

2. 加载新页面时,首先检查该页面是否已经加载过了,例如加载页面4

// 代码仅为示意
if($('.page-4', '.content').length > 0) {
    $('.page', '.content').hide();
    $('.page-4', '.content').show();
} else {
    page4 = render_page(load_page(4)); //得到page4的结构
    $('.page', '.content').hide();
    $('.content').append(page4);
}

这样在切换页面的时候就可以保存页面信息了。

方案2
- - -
创建一个对象来存放页面数据,并且让它支持自定义事件。当PAGE内容发生改变时,重新按照PAGE进行渲染。这实际上是一个MVC的方案。

下面的代码随手写的,只是为了示意。请勿直接使用。

// 可以用EventEmitter等等事件库来支持,我这里为了简单就用jQuery啦
var PAGE = $({
    current: -1,
    data: {}
});
PAGE.extend({
    fetch: function() {
        $.get('url', function(data) {
            this.data[current_page] = data
            this.trigger('value_change');
        })
    },
    show: function(page) {
        PAGE.current = page;
        if(this.data[page]) {
            this.trigger('value_change');
        } else {

            this.fetch(page);
        }
    },
});
PAGE.bind('value_change', function() {
    render_page();
});

var render_page = function() {
        if(PAGE[PAGE.current]) {
            //按照PAGE[PAGE.current]的内容渲染 div#page的内容
        } else {
            throw('error');
        }
    };


$('input[type="checkbox"]', '#page').change(function() {
    // 更新PAGE内容
    PAGE.data[current_page][item] = value

    PAGE.trigger(value_change);
});

选中后用一个数组变量a[]来保存选中的id;

分页时上一页数据的那部分html是删掉的还是隐藏的?删掉了肯定就肯定也没有了呀。

这样的情况就像购物车一样对吧?每一页选中的商品都扔进购物车,再批量处理。

我用CodeIgniter的时候用里面的购物车类处理过这种情况。原理就是用session存储选中的ID,每个ID会生成一个唯一的rowid,渲染页面的时候根据生成的rowid判断当前项是否被选中。

人气教程排行