分页的前后交互配置+全选隐藏功能，该条信息的前后交互（全选与该条信息的绑定）。

Posted 2020-09-27 xiuber

其中两个知识点需要注意：

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= 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="+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="+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 = $(this).children(\'option:selected\').val();
            if (value==1) {
                var data=$(":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{ }
        });

这是觉得很久没有手写到这些方法，所以总结下。常用的一些方法还是要能够亲自手写出来。