素材牛

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

 所属分类:PHP/MySql-Ajax

 浏览:3686次-  下载:50次-  评论:8次-  发布时间:2016-12-20
jQuery+Ajax弹出无刷新分页层并保存多选框选中数据
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:这是后台经常用到的ajax分页效果,首先打开订单列表弹出层,然后选择多选款,点击分页也可保留刚才选中的数据,最后点击保存按钮,以Ajax形式提交到数据库中去。提示:弹出层用的bootstrap的nodal方法,已经封装在jquery.js中。

详细介绍

用另一个PHP实例升级而来:http://www.sucainiu.com/603.html

实例使用方法:

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

讨论这个素材(8)回答他人问题或分享使用心得会奖励牛币

耶梦加得
2017年08月10日

谢谢分享

回复
华夏nan
2017年10月20日

谢谢分享

回复
Remer_pe
2018年02月27日

很不错  谢谢分享

回复
钱掌柜贵哥
2018年03月06日

很不错  谢谢分享

回复
周川淇
2018年03月09日

很不错  谢谢分享

回复
1214741711
2018年04月10日

很不错  谢谢分享

回复
857819854
2018年04月10日

很不错  谢谢分享

回复
alone123
2018年04月10日

很不错  谢谢分享

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:50
所需牛币:1 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证