首页 > 代码库 > 分页的前后交互配置+全选隐藏功能，该条信息的前后交互（全选与该条信息的绑定）。
分页的前后交互配置+全选隐藏功能，该条信息的前后交互（全选与该条信息的绑定）。
其中两个知识点需要注意：
1.分页的前后交互配置。
2.全选隐藏功能，该条信息的前后交互（全选与该条信息的绑定）。
a）分页的交互：
$(function(){ var pageNum=1;//总页数 var pageIndex=1;//页索引,当前页 var num=10; getData(1,num); function getData(pageIndex,num){ $.ajax({ url:"url", data:{curpage:pageIndex,pageSize:num}, success:function(data){ var data=http://www.mamicode.com/ JSON.parse(data); pageNum=data.totalpages;//总页数// console.log(pageNum); pageIndex=data.curpage;//当前页数 $(".page-count").text(pageNum); $(".current-page").text(pageIndex); var html=""; var dataList=data.result; for(var i=0;i<dataList.length;i++){ htmlTitle=‘<tr class="first-tr">‘ + ‘<td class="choose-first">是否显示</td>‘+ ‘<td width="20px;">ID</td><‘ + ‘td width="80px;">管理员名字</td>‘ + ‘<td>推送框标题</td>‘ + ‘<td>文章标题</td>‘ + ‘<td width="400px;">文章内容</td>‘ + ‘<td>发送时间</td>‘ + ‘<td>推送大图</td>‘ + ‘<td>内容描述</td></tr>‘ html+= "<tr id=‘list-li‘>"+"<td class=‘choose‘><input class=‘cbox‘ name=‘subBox‘ type=‘checkbox‘ value="http://www.mamicode.com/+dataList[i].id+"/></td>"+"<td class=‘list-td‘>" + dataList[i].id + "</td><td>" + dataList[i].admin_name + "</td><td>" + dataList[i].ticker + "</td><td>" + dataList[i].title + "</td><td>" + dataList[i].text + "</td><td>" + dataList[i].start_time + "</td><td><img src="http://www.mamicode.com/+dataList[i].img_url+" />"+"</td><td>" + dataList[i].description + "</td>"+"</tr>" } $(‘#json-list‘).html(""); $(‘#json-list‘).append(htmlTitle); $(‘#json-list‘).append(html); } }); } $(".firstPage").click(function(){//首页 pageIndex=1; getData(pageIndex,num); }); $(".lastPage").click(function(){//末页 pageIndex=pageNum; getData(pageIndex,num); }); $(".prev").click(function(){//上一页 if (pageIndex>1){ pageIndex--; }else { alert("当前第一页"); } getData(pageIndex,num); }); $(".next").click(function(){//下一页 if(pageIndex < pageNum){ pageIndex++; }else { alert("当前最后一页"); } getData(pageIndex,num); });
2.全选隐藏功能，需要跟后台对接该条隐藏数据的id，同时跟选中元素绑定。
全选：
//全选 $("#all-select").click(function(){ $(".choose input").prop("checked",true); });
底部select的变化选择隐藏时：//select的变化
$("#IsTurnOut").change(function () { var value = http://www.mamicode.com/$(this).children(‘option:selected‘).val(); if (value=http://www.mamicode.com/=1) { var data=http://www.mamicode.com/$(":checkbox[name=‘subBox‘]:checked").map(function(){ return $(this).val(); }).get();//把每条数据的id绑定在checkbox的value值上，并且封装成json格式，传递给后台。 console.log(data); $.ajax({ type: "get", url: "url", data: {"data": data}, success: function(msg){ //你的处理代码 } }); } else{ } });这是觉得很久没有手写到这些方法，所以总结下。常用的一些方法还是要能够亲自手写出来。
分页的前后交互配置+全选隐藏功能，该条信息的前后交互（全选与该条信息的绑定）。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。