1. 程式人生 > >分頁的前後交互配置+全選隱藏功能,該條信息的前後交互(全選與該條信息的綁定)。

分頁的前後交互配置+全選隱藏功能,該條信息的前後交互(全選與該條信息的綁定)。

rst 描述 log ted text class chang 管理員 next

技術分享

其中兩個知識點需要註意: 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{ }
        });
這是覺得很久沒有手寫到這些方法,所以總結下。常用的一些方法還是要能夠親自手寫出來。

分頁的前後交互配置+全選隱藏功能,該條信息的前後交互(全選與該條信息的綁定)。