无刷新弹出分页层并保存多选框选中数据 jQuery+Ajax实例源码

无刷新弹出分页层并保存多选框选中数据 jQuery+Ajax实例源码,20210910144256.jpg,第1张

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


1、带入数据:js.sql

2、配置数据库链接:connect.php

3、访问index.php

绑定单选按钮、全选按钮和切换分页数据
$("#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("") 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(); 
    }) 
}

转载请说明出处
UE资源网 » 无刷新弹出分页层并保存多选框选中数据 jQuery+Ajax实例源码

发表评论

欢迎 访客 发表评论

成为会员可下载全站资源!

查看演示 官网购买