MVC中ajax调用API版信息分页显示
效果图:

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版信息分页显示的更多相关文章
- C#MVC通过AJAX调用API方法进行上传下载
//这是写的一个类,具体是上传图片的上传和下载 public class FileResult { public int Code { get; set; } pub ...
- MVC中ajax调用Controller的方法
1. ajax代码: $.ajax({ async: false, cache: false, type: 'POST', contentType: "application/json&qu ...
- 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 ...
- ASP.NET Core MVC中构建Web API
在ASP.NET CORE MVC中,Web API是其中一个功能子集,可以直接使用MVC的特性及路由等功能. 在成功构建 ASP.NET CORE MVC项目之后,选中解决方案,先填加一个API的文 ...
- MVC中使用Web API和EntityFramework
在ASP.NET MVC中使用Web API和EntityFramework构建应用程序 最近做了一个项目技术预研:在ASP.NET MVC框架中使用Web API和EntityFramework ...
- MVC 下 ajax调用 日期差值计算
背景: 服务项目已有服务期起止时间From-To 现在要根据用户输入的新的起始时间, 和该服务期的原有区间值, 计算出新的服务期截止时间 即 NewServiceToDateTime = NewSer ...
- jquery通过AJAX从后台获取信息并显示在表格上的类
前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...
- jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
- MVC代码中如何调用api接口
关于代码解释,为了方便读者浏览时更好理解代码的含义,我把注释都写在代码里面了.因为一开始我只考虑到功能上的实现并没有考虑代码的优化所以代码我就全写在一个页面了.至于那些生成扑克牌类.计算类等代码优化方 ...
随机推荐
- Ubuntu16.04 安装NVIDIA显卡驱动
1. 禁用系统默认的集成驱动 Ubuntu系统集成的显卡驱动程序是nouveau,它是第三方为NVIDIA开发的开源驱动,我们需要先将其屏蔽才能安装NVIDIA官方驱动.将驱动添加到黑名单blackl ...
- [转]Windows下安装storm-0.9.1
来源:https://www.cnblogs.com/liuruitao/p/4669657.html Windows下安装storm-0.9.1的详细步骤如下: 1.确定已经正确安装JDK1.6或J ...
- UOJ#218. 【UNR #1】火车管理 线段树 主席树
原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ218.html 题解 如果我们可以知道每次弹出栈之后新的栈顶是什么,那么我们就可以在一棵区间覆盖.区间求和 ...
- 习题集1a:研究方法入门
1.课程实践编号 课程实践编号 随着对习题集“PS 1a:研究方法入门”和其他习题集的了解,你可能会发现进度栏中的习题编号并非一直是连续的. 对于存在两个习题集的课程,如果一个习题集看上去“缺失”习题 ...
- 【Go】那么多数值类型,应该选哪个?
原文链接:https://blog.thinkeridea.com/201903/go/selection_of_numerical_types.html Go 内置很多种数值类型,往往初学者不知道编 ...
- 读取InputStream 中的内容
读取InputStream 中的内容 ]) { , len); //把读取到的内容写到输出流中 } //<4> 把字节数组转换为字符串 String content = baos.to ...
- Fliptile [POJ3279] [开关问题]
题意 给定一张n*m的方格图,有1,0两种数字,每次可以选取一个十字进行翻转,1变成0,0变成1,问最少需要翻转几次,使它全部变成0,全部如果有重复的,按字典序最小的进行输出: 输入 第一行n,m 下 ...
- spring集成rabbitmq
https://www.cnblogs.com/nizuimeiabc1/p/9608763.html
- react-native添加react-native-vector-icons插件android遇到的问题
问题 yarn add react-native-vector-icons后图省事使用react-native link来添加native配置,结果run时报错. ps:安装的需要native的插件不 ...
- React(四)组件生命周期
组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMoun ...