Laypage 使用

前台和后台代码呈现：

1.HTML 页面：

<style>
    table tr th {
        width: 100px;
    }

    table tr td {
        width: 100px;
    }
</style>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/js/laypage-v1.3/laypage/laypage.js"></script>
<link href="~/Scripts/js/laypage-v1.3/laypage/skin/laypage.css" rel="stylesheet" />
<script src="~/Scripts/js/layer-v2.4/layer/layer.js"></script>
<script type="text/javascript">
    $(function () {
        Page(1);
    });
    function Page(curr) {
        var pageSize = 5;
        $.getJSON('/Home/GetUserList', { pageIndex: curr, pageSize: pageSize }, function (res) {
            var page;
            if (res.totalPage % pageSize == 0) {
                page = res.totalPage / pageSize;
            }
            else {
                page = res.totalPage / pageSize + 1;
            }
            laypage(
                {
                    cont: 'divPager',
                    pages: page,
                    curr: curr,
                    skip: true,
                    skin: 'molv',
                    jump: function (obj) {
                        $.getJSON('/Home/GetUserList', { pageIndex: obj.curr, pageSize: pageSize }, function (res) {
                            var data = res.userInfoList
                            $("#tbUser tbody").empty();
                            $.each(data, function (i) {
                                var str = "<tr>"
                                    + "<td>" + data[i].UserName + "</td>"
                                    + "<td>" + data[i].Sex + "</td>"
                                    + "<td>" + data[i].PassWord + "</td>"
                                    + "<td>" + data[i].Tel + "</td></tr>"
                                $("#tbUser tbody").append(str);
                            });
                        });
                    }
                });
        });
    }
</script>
<br /><br />
<div id="divContent" align="center">
    <input type="hidden" id="hidCount" />
    <table id="tbUser" class="bordered" style="text-align:center;">
        <thead>
            <tr>
                <th>用户名</th>
                <th>性别</th>
                <th>密码</th>
                <th>联系方式</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<br /><br />
<div id="divPager" style="margin-top: 4px;text-align:center"></div>

 2.C# 后台：

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [WebMethod]
        public string GetUserList(int pageIndex, int pageSize)
        {
            string retStr = string.Empty;
            UserInfos userInfos = new UserInfos();
            userInfos = GetPagedList(pageIndex, pageSize);
            StringBuilder sb = new StringBuilder();
            new JavaScriptSerializer().Serialize(userInfos, sb);
            retStr = sb.ToString();
            return retStr;
        }
        public UserInfos GetPagedList(int curPage, int pageSize)
        {
            UserInfos userInfos = new UserInfos();
            List<UserInfo> userInfoList = new List<UserInfo>() 
            {
                new UserInfo(){UserName="AA",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="AA",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="BB",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="CC",Sex=0,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="DD",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="EE",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="FF",Sex=8,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="TT",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="UU",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="OO",Sex=9,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="PP",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="LL",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="KK",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="MM",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="QQ",Sex=1,PassWord="123456789",Tel="13812345678"},
                new UserInfo(){UserName="EE",Sex=1,PassWord="123456789",Tel="13812345678"},
            };
            userInfos.userInfoList = userInfoList.Take(pageSize * curPage).Skip(pageSize * (curPage - 1)).ToList();
            userInfos.totalPage = userInfoList.Count();
            return userInfos;
        }
    }
    public class UserInfo
    {
        public string UserName { set; get; }
        public int Sex { set; get; }
        public string PassWord { set; get; }
        public string Tel { set; get; }
    }
    public class UserInfos
    {
        public List<UserInfo> userInfoList { set; get; }
        public int totalPage { set; get; }
    }

3.页面效果：