效果图:

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

UserBll bll = new UserBll();
//获取用户所有信息
[HttpGet]
public DataBase GetAll(int pageindex=,int pagesize=)
{
List<UserInfo> a = bll.GetAll();
var b = a.Skip((pageindex - ) * 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 = ;
//显示信息
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==?"禁用":"启用") + "</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();
lists();
}
//尾页
function last() {
$("#PageIndex").val(MaxPagerCount);
lists();
}
//上一页
function prev() {
var pageindex = $("#PageIndex").val() - ;
if (pageindex < )
pageindex = ; $("#PageIndex").val(pageindex);
lists();
}
//下一页
function next() {
var pageindex = parseInt($("#PageIndex").val()) + ;
if (pageindex > MaxPagerCount)
pageindex = MaxPagerCount;
$("#PageIndex").val(pageindex);
lists();
}
first();

MVC中ajax调用API版信息分页显示的更多相关文章

  1. C#MVC通过AJAX调用API方法进行上传下载

    //这是写的一个类,具体是上传图片的上传和下载 public class FileResult    {        public int Code { get; set; }        pub ...

  2. MVC中ajax调用Controller的方法

    1. ajax代码: $.ajax({ async: false, cache: false, type: 'POST', contentType: "application/json&qu ...

  3. ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则

    ASP.NET MVC 学习笔记-7.自定义配置信息   ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...

  4. ASP.NET Core MVC中构建Web API

    在ASP.NET CORE MVC中,Web API是其中一个功能子集,可以直接使用MVC的特性及路由等功能. 在成功构建 ASP.NET CORE MVC项目之后,选中解决方案,先填加一个API的文 ...

  5. MVC中使用Web API和EntityFramework

    在ASP.NET MVC中使用Web API和EntityFramework构建应用程序   最近做了一个项目技术预研:在ASP.NET MVC框架中使用Web API和EntityFramework ...

  6. MVC 下 ajax调用 日期差值计算

    背景: 服务项目已有服务期起止时间From-To 现在要根据用户输入的新的起始时间, 和该服务期的原有区间值, 计算出新的服务期截止时间 即 NewServiceToDateTime = NewSer ...

  7. jquery通过AJAX从后台获取信息并显示在表格上的类

    前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...

  8. jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中

    不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...

  9. MVC代码中如何调用api接口

    关于代码解释,为了方便读者浏览时更好理解代码的含义,我把注释都写在代码里面了.因为一开始我只考虑到功能上的实现并没有考虑代码的优化所以代码我就全写在一个页面了.至于那些生成扑克牌类.计算类等代码优化方 ...

随机推荐

  1. C#学习-子类的初始化顺序

    使用了继承之后,当我们初始化一个子类时,除了会调用子类的构造函数外,同时也会调用基类的构造函数. 子类的初始化顺序如下: (1)初始化类的实例字段: (2)调用基类的构造函数: (3)调用子类的构造函 ...

  2. C/S,B/S应用的区别

    ——————C/S,B/S应用的区别 C/S是指客户端/服务器架构,是一种典型的两层架构,可充分发挥客户端pc的性能,相对减轻服务器的压力. B/S是指浏览器/服务器架构,区别于传统的C/S(客户端/ ...

  3. matplotlib等高线图-【老鱼学matplotlib】

    等高线图是在地理课中讲述山峰山谷时绘制的图形,在机器学习中也会被用在绘制梯度下降算法的图形中. 因为等高线的图有三个信息:x, y以及x,y所对应的高度值. 这个高度值的计算我们用一个函数来表述: # ...

  4. fiddler基本功能介绍

    一.几种主流的抓包工具的对比: Wireshark:通用的抓包工具,抓取信息量庞大,详细.通常需要过滤才可容易得到有用信息.如果只抓http请求个人认为有点大材小用. Firebug.httpWatc ...

  5. 2018山东省赛sequence

    2018山东省赛sequence因为必须要删除一个数,所以可以计算每个数删除的代价,从而选取代价最小的进行删除如果一个数大于它前面的所有数的最小值而小于次小值,删除最小值的代价就要+1:如果一个数本身 ...

  6. 自己总结的C#编码规范--7.文档下载 & 总结

    今天终于把这一系列的编码规范写完了,这个编码规范算上前面阅读相关书籍,前前后后总共花了一个月的时间,也算是个人的呕心沥血之作了. 本来也没打算把这个系列写的这么长,但是在写的过程中自己搜了相关的网上资 ...

  7. Redis自学笔记:4.4进阶-消息通知

    4.4消息通知 4.4.1任务队列 传递任务的队列.与任务队列进行交互的实体有两类,一类是生产者,一类是消费者. 生产者将需要处理的任务放入任务队列中,二消费者不断从任务队列中读入任务 信息并执行. ...

  8. Android应用程序后台加载数据

    从ContentProvider查询你需要显示的数据是比较耗时的.如果你在Activity中直接执行查询的操作,那么有可能导致Activity出现ANR的错误.即使没有发生ANR,用户也容易感知到一个 ...

  9. JavaScript(七)

    类型转换 1.直接转换 parseInt() 与 parseFloat() alert('12'+7); //弹出127 alert( parseInt('12') + 7 ); //弹出19 ale ...

  10. Matrix [POJ3685] [二分套二分]

    Description 有一个N阶方阵 第i行,j列的值Aij =i2 + 100000 × i + j2 - 100000 × j + i × j,需要找出这个方阵的第M小值. Input 第一行输 ...