首页 > 代码库 > Laypage 使用
Laypage 使用
前台和后台代码呈现：
1.HTML 页面：
1 <style> 2 table tr th { 3 width: 100px; 4 } 5 6 table tr td { 7 width: 100px; 8 } 9 </style>10 <script src="~/Scripts/jquery-1.8.2.js"></script>11 <script src="~/Scripts/js/laypage-v1.3/laypage/laypage.js"></script>12 <link href="~/Scripts/js/laypage-v1.3/laypage/skin/laypage.css" rel="stylesheet" />13 <script src="~/Scripts/js/layer-v2.4/layer/layer.js"></script>14 <script type="text/javascript">15 $(function () {16 Page(1);17 });18 function Page(curr) {19 var pageSize = 5;20 $.getJSON(‘/Home/GetUserList‘, { pageIndex: curr, pageSize: pageSize }, function (res) {21 var page;22 if (res.totalPage % pageSize == 0) {23 page = res.totalPage / pageSize;24 }25 else {26 page = res.totalPage / pageSize + 1;27 }28 laypage(29 {30 cont: ‘divPager‘,31 pages: page,32 curr: curr,33 skip: true,34 skin: ‘molv‘,35 jump: function (obj) {36 $.getJSON(‘/Home/GetUserList‘, { pageIndex: obj.curr, pageSize: pageSize }, function (res) {37 var data = res.userInfoList38 $("#tbUser tbody").empty();39 $.each(data, function (i) {40 var str = "<tr>"41 + "<td>" + data[i].UserName + "</td>"42 + "<td>" + data[i].Sex + "</td>"43 + "<td>" + data[i].PassWord + "</td>"44 + "<td>" + data[i].Tel + "</td></tr>"45 $("#tbUser tbody").append(str);46 });47 });48 }49 });50 });51 }52 </script>53 <br /><br />54 <div id="divContent" align="center">55 <input type="hidden" id="hidCount" />56 <table id="tbUser" class="bordered" style="text-align:center;">57 <thead>58 <tr>59 <th>用户名</th>60 <th>性别</th>61 <th>密码</th>62 <th>联系方式</th>63 </tr>64 </thead>65 <tbody></tbody>66 </table>67 </div>68 <br /><br />69 <div id="divPager" style="margin-top: 4px;text-align:center"></div>
2.C# 后台：
1 public class HomeController : Controller 2 { 3 public ActionResult Index() 4 { 5 return View(); 6 } 7 8 [WebMethod] 9 public string GetUserList(int pageIndex, int pageSize)10 {11 string retStr = string.Empty;12 UserInfos userInfos = new UserInfos();13 userInfos = GetPagedList(pageIndex, pageSize);14 StringBuilder sb = new StringBuilder();15 new JavaScriptSerializer().Serialize(userInfos, sb);16 retStr = sb.ToString();17 return retStr;18 }19 public UserInfos GetPagedList(int curPage, int pageSize)20 {21 UserInfos userInfos = new UserInfos();22 List<UserInfo> userInfoList = new List<UserInfo>() 23 {24 new UserInfo(){UserName="AA",Sex=1,PassWord="123456789",Tel="13812345678"},25 new UserInfo(){UserName="AA",Sex=1,PassWord="123456789",Tel="13812345678"},26 new UserInfo(){UserName="BB",Sex=1,PassWord="123456789",Tel="13812345678"},27 new UserInfo(){UserName="CC",Sex=0,PassWord="123456789",Tel="13812345678"},28 new UserInfo(){UserName="DD",Sex=1,PassWord="123456789",Tel="13812345678"},29 new UserInfo(){UserName="EE",Sex=1,PassWord="123456789",Tel="13812345678"},30 new UserInfo(){UserName="FF",Sex=8,PassWord="123456789",Tel="13812345678"},31 new UserInfo(){UserName="TT",Sex=1,PassWord="123456789",Tel="13812345678"},32 new UserInfo(){UserName="UU",Sex=1,PassWord="123456789",Tel="13812345678"},33 new UserInfo(){UserName="OO",Sex=9,PassWord="123456789",Tel="13812345678"},34 new UserInfo(){UserName="PP",Sex=1,PassWord="123456789",Tel="13812345678"},35 new UserInfo(){UserName="LL",Sex=1,PassWord="123456789",Tel="13812345678"},36 new UserInfo(){UserName="KK",Sex=1,PassWord="123456789",Tel="13812345678"},37 new UserInfo(){UserName="MM",Sex=1,PassWord="123456789",Tel="13812345678"},38 new UserInfo(){UserName="QQ",Sex=1,PassWord="123456789",Tel="13812345678"},39 new UserInfo(){UserName="EE",Sex=1,PassWord="123456789",Tel="13812345678"},40 };41 userInfos.userInfoList = userInfoList.Take(pageSize * curPage).Skip(pageSize * (curPage - 1)).ToList();42 userInfos.totalPage = userInfoList.Count();43 return userInfos;44 }45 }46 public class UserInfo47 {48 public string UserName { set; get; }49 public int Sex { set; get; }50 public string PassWord { set; get; }51 public string Tel { set; get; }52 }53 public class UserInfos54 {55 public List<UserInfo> userInfoList { set; get; }56 public int totalPage { set; get; }57 }
3.页面效果：
Laypage 使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。