jQuery+Ajax打开弹出分页层并保存多选框选中数据

jQuery+Ajax打开弹出分页层并保存多选框选中数据

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

淘建站为您提供更多_悬浮层/弹出层_弹窗_分页_bootstrap,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 96 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

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

$("#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();
    })
}

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/567.html
jQuery+Ajax打开弹出分页层并保存多选框选中数据 希望对你有帮助,感谢您的支持!
  • 超绚丽的 Bootstrap 水晶样式按钮集合

    超绚丽的 Bootstrap 水晶样式按钮集合

  • 基于bootstrap开发的简单大气对话插件

    基于bootstrap开发的简单大气对话插件

  • html5 Bootstrap手机响应式导航下拉菜单代码

    html5 Bootstrap手机响应式导航下拉菜单代码

  • bootstrap-table分页效果

    bootstrap-table分页效果

  • bootstrap简易式操作布局页面实现

    bootstrap简易式操作布局页面实现

  • Bootstrap File Input Example

    Bootstrap File Input Example

  • jQuery bootstrap响应式树形菜单代码

    jQuery bootstrap响应式树形菜单代码

  • Bootstrap响应式页面布局

    Bootstrap响应式页面布局

  • bootstrap日历

    bootstrap日历

  • 16种Bootstrap css3制作悬停图片动画特效

    16种Bootstrap css3制作悬停图片动画特效

  • jquery bootstrap自定义添加删除选项卡代码

    jquery bootstrap自定义添加删除选项卡代码

  • bootstrap响应式动态图片轮播

    bootstrap响应式动态图片轮播

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2