效果图:

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. pc端网页,移动端网页(andorid、ios)离开页面做一个时间存储

    如图所示:在一个页面中做了一个倒计时,然后用户想离开页面做其他事情,需求是离开页面之后把时间保存,下一次进来继续的时候时间还是上次离开的时间 第一次我用的事件是:  // window.onbefor ...

  2. 合并K个排序链表

    合并 k 个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例: 输入: [   1->4->5,   1->3->4,   2->6 ] 输出: 1-&g ...

  3. Anaconda3 tensorflow安装 及ModuleNotFoundError: No module named 'tensorflow' 解答

    Anaconda3 的安装,参考:手把手教你如何安装Tensorflow(Windows和Linux两种版本) tensorflow的安装,参考:深度学习(TensorFlow)环境搭建:(三)Ubu ...

  4. 使用控制台对Redis执行增删改查命令

    使用控制台对Redis执行增删改查命令 在上一篇里,我们已经安装了redis.这一篇我们将一起来学习如何使用"控制台"管理Redis 首先肯定是打开一个控制台,在windows系统 ...

  5. python 列表常用方法

    1.在列表末尾添加新的对象 li=[11,22,33,'aa','bb','cc'] li.append('dd') print(li) 2.清空列表 li=[11,22,33,'aa','bb',' ...

  6. mysql having和where的区别

    having子句与where子句一样,都是用于条件判断的. 区别1 where是判断数据从磁盘读入内存的时候 having是判断分组统计之前的所有条件 区别原理 区别2 having子句中可以使用字段 ...

  7. Web Driver 8中定位方法 ——基于python语言

    WebDriver提供了八种元素定位方法,在python 语言中,方法如下:  id定位:find_element_by_id("id值"):id属性是唯一的.  1 driver ...

  8. swust oj 972

    统计利用先序遍历创建的二叉树的宽度 1000(ms) 10000(kb) 2938 / 6810 利用先序递归遍历算法创建二叉树并计算该二叉树的宽度.先序递归遍历建立二叉树的方法为:按照先序递归遍历的 ...

  9. NIOS_UART

    1.Fifoed avalon UART带缓冲区,使用非常方便,google下载,google上有的技术资料,百度上找不到,以为没有这个事情: 2.两种UART如果想用操作寄存器的方式操作,需要在al ...

  10. 107个JS常用方法(持续更新中)

    1.输出语句:document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个 ...