素材牛VIP会员

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

 所属分类:PHP实例-Ajax

 浏览:5711次  评论:9次  更新时间:2016-12-20
牛币素材VIP可免积分下载
jQuery+Ajax弹出无刷新分页层并保存多选框选中数据
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:这是后台经常用到的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("") 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(); 
    }) 
}

相关素材 - Ajax

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

耶***得  
2017年08月10日

谢谢分享

回复
华***n  
2017年10月20日

谢谢分享

回复
Re***pe  
2018年02月27日

很不错  谢谢分享

回复
钱***哥  
2018年03月06日

很不错  谢谢分享

回复
周***淇  
2018年03月09日

很不错  谢谢分享

回复
12***11  
2018年04月10日

很不错  谢谢分享

回复
85***54  
2018年04月10日

很不错  谢谢分享

回复
al***23  
2018年04月10日

很不错  谢谢分享

回复
qq***18  
2019年08月28日

很不错 谢谢分享

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

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)