zoukankan      html  css  js  c++  java
  • MVC中ajax调用API版信息分页显示

    效果图:

    API端采用三层架构控制器显示界面:

    UserBll bll = new UserBll();
            //获取用户所有信息
            [HttpGet]
            public DataBase GetAll(int pageindex=1,int pagesize=3)
            {
                List<UserInfo> a = bll.GetAll();
                var b = a.Skip((pageindex - 1) * pagesize).Take(pagesize);
                DataBase db = new DataBase();
                db.users = b.ToList();
                db.PageCount = Convert.ToInt32(Math.Ceiling(a.Count() * 1.0 / pagesize));
                return db;
            }

    MVC端视图界面:

    //文档准备就绪函数
        $(function () {
            lists();
        })
        //
        var MaxPagerCount = 1;
        //显示信息
        function lists() {
            var pageIndex = $("#PageIndex").val();
            $.ajax({
                url: "http://localhost:51071/api/User",
                type: "get",
                data: { pageIndex: pageIndex },
                success: function (data) {
                    //清空tbd
                    $("#tbd").empty();
                    MaxPagerCount = data.PageCount;
                    for (var item in data.users) {
                        console.log(data.users)
                        //进行拼接
                        $("#tbd").append(
                            "<tr>" +
                            //依次获取字段
                            "<th><input id='Checkbox1' class='Ck' type='checkbox' value='" + data.users[item].Id + "' /></th>" +
                            "<th>" + data.users[item].Name + "</th>" +
                            "<th>" + data.users[item].RealName + "</th>" +
                            "<th>" + data.users[item].Telphone + "</th>" +
                            "<th>" + data.users[item].Pass + "</th>" +
                            "<th>" + (data.users[item].Status==0?"禁用":"启用") + "</th>" +
                            "<th><input id='btndel' type='button' value='修改' onclick='Edit(" + data.users[item].Id + ")' />" +
                            "<input id='btnupdate' type='button' value='删除' onclick='Delete(" + data.users[item].Id + ")' /></th>" +
                            "</tr>");
                    }
                }
            });
        }
        //首页
        function first() {
            $("#PageIndex").val(1);
            lists();
        }
        //尾页
        function last() {
            $("#PageIndex").val(MaxPagerCount);
            lists();
        }
        //上一页
        function prev() {
            var pageindex = $("#PageIndex").val() - 1;
            if (pageindex < 1)
                pageindex = 1;
    
            $("#PageIndex").val(pageindex);
            lists();
        }
        //下一页
        function next() {
            var pageindex = parseInt($("#PageIndex").val()) + 1;
            if (pageindex > MaxPagerCount)
                pageindex = MaxPagerCount;
            $("#PageIndex").val(pageindex);
            lists();
        }
        first();
  • 相关阅读:
    Hibernate与数据库的触发器协同工作
    Hibernate的调用数据库的存储过程
    hibernate中持久化对象的状态
    Hibernate-sessio缓存的操作
    Hibernate中的一些关键字理解
    配置Hibernate的流程
    Struts2自定义拦截器
    Struts2中解决表单重复提交
    Struts文件下载(静态)
    Struts2的简单的文件上传
  • 原文地址:https://www.cnblogs.com/dujian123/p/10596783.html
Copyright © 2011-2022 走看看