带分页的标签

原型图

图片.png

重要的实现代码

var getMemo = function(pageNo,name){
     $('#dataDiv').html("");
    $.ajax({
          url: basePath + "/signIn/set/getSignSetListPage",
          datatype: 'json',
          type: "POST",
          data: { "pageNo": pageNo,"name":name },
          dataType: "json",
          success: function (data) {
             
              if (data != null) 
              {
                   tPages =  data.totalPages;
                   curPage = data.currentPage;
                   pgSize = data.sizeOfPage;
                   var tableShow = "";
                   $.each(data.signSetList, function(i, item){
                       tableShow += "<div class='col-sm-6 col-md-3 table-bordered table-responsive' style='margin:20px  20px  0  20px;'>";
                       if(item.signState == '1'){
                             tableShow += "<p class='text-muted'>"+  item.signName + "![](/bison/icon/on.png)</p><hr/>"; 
                         }else{
                             tableShow += "<p class='text-muted'>"+  item.signName + "![](/bison/icon/off.png)</p><hr/>"; 
                         }
                         tableShow += "<p class='text-capitalize'>" + dealTime(item.beginTime) + " - "+ dealTime(item.endTime) +"</p>";
                         tableShow += "<p class='text-description'>" + dealCircle(item.signCircle) + " </p>";
                         tableShow += "<p class='text-description'>人数:<font >"+ item.count +"</font>人</p>";
                         tableShow += "<div style='text-align: center;'>";
                         tableShow += "<a class='btn btn-default' onclick='updateSignSet("+item .id+")'><i class='glyphicon glyphicon-pencil'></i></a>";
                         tableShow += "<a class='btn btn-default' onclick='deleteSignSet("+item.id+","+item.fenceId+")'><i class='glyphicon glyphicon-trash'></i></a>";
                         tableShow +="</div></div>";
                   });
                   $('#dataDiv').append(tableShow); 
              }
         }
        
    });
};