Ajax打开弹出分页层并保存多选框选中数据【原创

来源:https://www.sucaihuo.com/js/567.html 2015-11-18 05:48浏览(6245) 收藏

这是后台经常用到的ajax分页效果,首先打开订单列表弹出层,然后选择多选款,点击分页也可保留刚才选中的数据,最后点击保存按钮,以Ajax形式提交到数据库中去。提示:弹出层用的bootstrap的nodal方法,已经封装在jquery.js中。
Ajax打开弹出分页层并保存多选框选中数据
分类:悬浮层/弹出层 > 弹窗 难易:中级
下载资源 下载积分: 220 积分

绑定单选按钮、全选按钮和切换分页数据

$("#windown_box").delegate(".checkbox_one", "click", function() { //绑定单选按钮
    isCheckAll();
    getOrderIdsChose();
}).delegate(".checkbox_all", "click", function() { //绑定全选按钮
    var checked = $(this).attr("checked");
    if (checked == "checked") {
        $(".checkbox_one").attr("checked", "checked");
    } else {
        $(".checkbox_one").removeAttr("checked");
    }
    getOrderIdsChose();
}).delegate(".page a", "click", function() { //绑定分页切换对应的数据
    var page = parseInt($(this).attr("data-page"));
    getPage(page);
})

Ajax传参分页

function getPage(page) {
    $("#orders").html("<div class='loading'><img src='images/loading.gif' alt='loading'></div>")
    var page = page > 0 ? page : 1;
    $.post("ajax.php", {p: page}, function(data) {
        $("#orders").html(data);
        var order_ids = $("#order_ids").val();
        if (order_ids) {
            var order_ids_arr = order_ids.split(",");
            for (var i = 0; i < order_ids_arr.length; i++) {
                $("input.checkbox_one[value=" + order_ids_arr[i] + "]").attr("checked", "checked")
            }
        }
        isCheckAll();
    })
}
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/567.html
评论26
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 25楼
    10-23 14:33
    n***6
    正好需要,他就出现了,感动
  • 头像 24楼
    03-09 13:37
    c***2
    不错的资源,正是需要的
  • 头像 23楼
    02-09 10:30
    x***g
    不错,不错,发现新大陆
  • 头像 22楼
    01-24 15:42
    H***k
    不错的资源很好很合用
  • 头像 21楼
    11-05 07:18
    草***凯
    给力的资源
  • 头像 20楼
    10-12 11:20
    7***7
    一周只做一次
  • 头像 19楼
    10-12 09:32
    a***r
    一周只做一次
  • 头像 18楼
    09-23 16:37
    蝴***O
    学习ajax
  • 头像 17楼
    05-22 21:36
    e***r
    看看没看懂。。。
  • 头像 16楼
    03-01 19:44
    h***1
    学以致用,多谢资源
1 2