带分页的标签

简介: 带分页的标签

原型图

重要的实现代码

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); 
              }
         }
    });
};
相关文章
|
6月前
|
前端开发
bladex自定义分页
bladex自定义分页
|
算法 JavaScript Java
通用分页【下】(将分页封装成标签)
调试()是指在软件开发过程中,通过识别、定位和解决程序错误或问题的过程。调试的目的是找出代码中的错误、异常或不正常的行为,并修复它们,以确保程序能够按照预期的方式运行。调试是一个重要的开发技巧,可以帮助开发人员理解程序的执行过程、找出错误的原因,并从中学习和改进。调试可以使用不同的工具和技术来辅助,例如打印输出、日志记录、调试器(debugger)等。调试是开发过程中不可或缺的一部分,可以帮助开发人员提高代码质量、加快解决问题的速度,并优化程序的性能和可靠性。
|
12月前
|
JavaScript
jqGrid数据列表和表单的列隐藏/显示
jqGrid数据列表和表单的列隐藏/显示
101 0
32EasyUI 数据网格- 自定义分页
32EasyUI 数据网格- 自定义分页
29 0
|
JavaScript Java
DataTables单纯的分页 不排序 没有默认搜索
憋了好几天看了中文和英文的文档,终于把分页搞出来了,先前一直纠结这个页码和页容量怎么传的,其实不用纠结这个,会自动识别。
254 0
|
Java 数据库连接 数据库
分页之页面页码列表计算 | 学习笔记
快速学习分页之页面页码列表计算
269 0
|
数据库
分页控件的使用能不能再简单一点呢,能不能一个页面搞定所有的列表需求?
目的: 1、一个页面(DataList.aspx)可以显示多个模块的列表功能。      一般是有一个列表需求就需要一个aspx文件,如果有100个列表,那么就会有100个aspx文件,这么多的文件(包括.aspx.cs文件)里面的内容基本是一样的,这样写起来麻烦,管理起来也不容易,命名就是一个比较头痛的问题。
1073 0
|
JavaScript 搜索推荐 前端开发
【自然框架】QuickPager分页控件,新增一种分页方式——伪URL分页(Postback版)
适用场景   先说一下伪URL分页的适用场景。在网站的网页里实现查询功能,如果查询条件比较少的话,还比较好办,把查询条件放到URL里面传递即可。但是如果查询条件过多,就会照成URL的长度过长。既不好看,编写起来也很麻烦。
1159 0