展示效果如下,可分页
后端数据返回,不做详细介绍,返回json格式的数据即可
前端数据绑定代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="fuiContent" class="fui-content"> 2 <div id="page"></div> 3 <div id="datagrid" class="clearfix"></div> 4 </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script> 2 var $page = $("#page"); 3 var pagesize=20; 4 epoint.initPage('coursecstudypxphotolistaction', null, function(data) { 5 getPhotos(); 6 }); 7 8 $page.pagination({ 9 pageSize : pagesize 10 }); 11 12 function getPhotos(pageIndex) { 13 pageIndex = pageIndex || 0; 14 epoint.execute("getPhotos", '', [ pageIndex.toString(),pagesize ], function(rtn) { 15 renderGrid(rtn.photos, rtn.totalCount, pageIndex); 16 }); 17 } 18 19 20 function renderGrid(photos, totalCount, pageIndex) { 21 var $grid = $("#datagrid"); 22 $grid.empty(); 23 $(".photoCount").html(0); 24 25 if (!photos) { 26 return; 27 } 28 29 $page.pagination("destroy"); 30 $page.pagination({ 31 pageIndex : pageIndex, 32 pageSize : pagesize, 33 total : totalCount 34 }); 35 $page.on("pageClicked", function(e, data) { 36 getPhotos(data.pageIndex,data.pageSize); 37 }); 38 39 $(".photoCount").html(totalCount); 40 41 var html = ""; 42 43 for (var i = 0, length = photos.length; i < length; i++) { 44 var photo = photos[i]; 45 46 var imageSrc =photo.imageSrc;// _rootPath; 47 48 html += '<div class="item-inner" data-guid="' + (photo.attachguid || "") + '">'; 49 html += "<div class='image'>"; 50 html += '<img class="item-image" src="' + imageSrc + '"></img>'; 51 html += '</div>'; 52 53 html += "<div class='course-row name'>" + (photo.photoname || "") + "</div>"; 54 html += "<div class='course-row text'>"+ (photo.date || "") + "</div>"; 55 html += "<div class='course-row text'>" + (photo.time || "") + "</div>"; 56 html += '</div>'; 57 } 58 $grid.html(html); 59 60 } 61 </script>
需要引用的js和css样式代码:
https://pan.baidu.com/s/1-X6iA5NAEY5kwquG0DI5qQ
提取码:ypwu