写在前面

上篇文章介绍了一个bootstrap的分页插件,这篇将弄一个完整的例子,就以日志分页为例说明如何请求服务端然后进行分页。

系列文章

[EF]vs15+ef6+mysql code first方式

[实战]MVC5+EF6+MySql企业网盘实战(1)

[实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册

[实战]MVC5+EF6+MySql企业网盘实战(3)——验证码

[实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

[Bootstrap]modal弹出框

[实战]MVC5+EF6+MySql企业网盘实战(5)——登录界面,头像等比例压缩

[实战]MVC5+EF6+MySql企业网盘实战(5)——页面模板

[实战]MVC5+EF6+MySql企业网盘实战(5)——ajax方式注册

[实战]MVC5+EF6+MySql企业网盘实战(6)——ajax方式登录

[实战]MVC5+EF6+MySql企业网盘实战(7)——文件上传

[实战]MVC5+EF6+MySql企业网盘实战(8)——文件下载、删除

[实战]MVC5+EF6+MySql企业网盘实战(9)——编辑文件名

[实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹

[实战]MVC5+EF6+MySql企业网盘实战(11)——新建文件夹2

[实战]MVC5+EF6+MySql企业网盘实战(12)——新建文件夹和上传文件

[实战]MVC5+EF6+MySql企业网盘实战(13)——编辑文件夹

[实战]MVC5+EF6+MySql企业网盘实战(14)——逻辑重构

[实战]MVC5+EF6+MySql企业网盘实战(14)——思考

[实战]MVC5+EF6+MySql企业网盘实战(15)——逻辑重构2

[实战]MVC5+EF6+MySql企业网盘实战(16)——逻辑重构3

[实战]MVC5+EF6+MySql企业网盘实战(17)——思考2

[实战]MVC5+EF6+MySql企业网盘实战(18)——文件上传,下载,修改

[实战]MVC5+EF6+MySql企业网盘实战(19)——BJUI和ztree

[实战]MVC5+EF6+MySql企业网盘实战(20)——Bootstrap Paginator

[实战]MVC5+EF6+MySql企业网盘实战(21)——网盘操作日志

实现

前端通过ajax的方式请求Controller中的action获取json数据,前端收到数据后动态的绑定到table上面。BaseRepository泛型类中实现分页的方法。

        /// <summary>
/// 分页查询
/// </summary>
/// <typeparam name="SEntity"></typeparam>
/// <param name="pageIndex"></param>
/// <param name="pageSize"></param>
/// <param name="totalRecord"></param>
/// <param name="where"></param>
/// <param name="isAsc"></param>
/// <param name="orderLambda"></param>
/// <returns></returns>
public IQueryable<TEntity> FindPaged<S>(int pageIndex, int pageSize, out int totalRecord, Expression<Func<TEntity, bool>> where, bool isAsc, Expression<Func<TEntity, S>> orderLambda)
{ var _list = netDiskContext.Set<TEntity>().Where<TEntity>(where);
totalRecord = ;
if (_list != null)
{
totalRecord = _list.Count<TEntity>();
if (isAsc)
{
_list = _list.OrderBy<TEntity, S>(orderLambda).Skip<TEntity>((pageIndex - ) * pageSize).Take<TEntity>(pageSize);
}
else
{
_list = _list.OrderByDescending<TEntity, S>(orderLambda).Skip<TEntity>((pageIndex - ) * pageSize).Take<TEntity>(pageSize);
}
}
return _list;
}

在LogController中的GetLogs方法使用该方法,如下所示

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
using Wolfy.NetDisk.BLL;
using Wolfy.NetDisk.IBLL;
using Wolfy.NetDisk.Model;
using Wolfy.NetDisk.Site.Models; namespace Wolfy.NetDisk.Site.Controllers
{
public class LogController : Controller
{
private ILogServiceRepository _logServiceRepository = new LogServiceRepository();
//
// GET: /Log/
public ActionResult Index()
{
UserInfo user = Session["user"] as UserInfo;
if (user == null)
{
return RedirectToAction("Login", "UserInfo");
}
return View();
}
[HttpGet]
public JsonResult GetLogs()
{
int totalRecord = ; int page = Convert.ToInt32(Request.Params["page"]);
UserInfo userInfo = Session["user"] as UserInfo;
int pageSize = ;
page = page <= ? : page;
int totalPage = Convert.ToInt32(Math.Ceiling(totalRecord * 1.0 / pageSize)); var myLogs = _logServiceRepository.FindPaged<DateTime>(page, pageSize, out totalRecord, x => string.IsNullOrEmpty(x.Exception) && x.user.Id == userInfo.Id, false, x => x.Dt).ToList(); if (myLogs == null)
{
return new JsonResult() { Data = new JavaScriptSerializer().Serialize(new { _code = }), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
List<LogViewModel> lstLogs = new List<LogViewModel>();
foreach (var item in myLogs)
{
lstLogs.Add(new LogViewModel()
{
Id = item.Id,
Dt = item.Dt,
Opt = item.Operation
});
}
return new JsonResult() { Data = new JavaScriptSerializer().Serialize(new { _data = lstLogs, _code = , total = totalPage }), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}

前端调用,默认加载第一页数据,设置分页插件的配置,如下所示:

@model IEnumerable<Wolfy.NetDisk.Model.Log>

@{
ViewBag.Title = "操作日志";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script>
//将json格式的时间转换成一般时间
function ChangeDateFormat(jsondate) {
jsondate = jsondate.replace("/Date(", "").replace(")/", "");
if (jsondate.indexOf("+") > 0) {
jsondate = jsondate.substring(0, jsondate.indexOf("+"));
} else if (jsondate.indexOf("-") > 0) {
jsondate = jsondate.substring(0, jsondate.indexOf("-"));
}
var date = new Date(parseInt(jsondate, 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
var minitue = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
var secends = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return date.getFullYear() + "-" + month + "-" + currentDate + " " + hour + ":" + minitue + ":" + secends;
}
$(function () {
var element = $('#logPage');
var options = {
size: "large",
bootstrapMajorVersion: 3,
//当前页
currentPage: 1,
//可以改变显示的页码数
numberOfPages: 5,
//总页数
totalPages: 11
};
function requestServer(pageIndex) {
$.getJSON('/Log/GetLogs?page=' + pageIndex, function (data) {
console.log(data);
data = JSON.parse(data);
options.totalPages = data.totalPage;
$('#dvLog').html('');
$('<table class="table table-bordered table-hover table-striped table-top" id="tbLog"><tr><th>序号</th> <th>操作日志</th><th>操作时间</th> </tr></table>').appendTo($('#dvLog'));;
for (var i = 0; i < data._data.length; i++) {
var current = data._data[i];
$('<tr><td data-id=' + current.Id + '>' + (i + 1) + '</td><td>' + current.Opt + '</td><td>' + ChangeDateFormat(current.Dt) + '</td></tr>').appendTo($('#tbLog'));
}; });
};
function loadData(pageIndex) { options.onPageClicked = function (e, originalEvent, type, page) {
//页码单击事件
console.log(page);
options.currentPage = page; requestServer(page); };
requestServer(pageIndex);
element.bootstrapPaginator(options); }; loadData(1);
});
</script> <div class="tableContent" style="width:95%;" id="dvLog"> </div>
<div class="bjui-pageContent tableContent" style="width:95%;position:relative;">
<ul id='logPage' class="bjui-pageFooter" style="margin:0 auto; margin-left:30%;"></ul>
</div>

结果

总结

使用起来还是比较简单的。分页样式也不错。

[实战]MVC5+EF6+MySql企业网盘实战(21)——网盘操作日志的更多相关文章

  1. [实战]MVC5+EF6+MySql企业网盘实战(28)——其他列表

    写在前面 本篇文章将实现,其他文件类型的列表. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5+EF ...

  2. [实战]MVC5+EF6+MySql企业网盘实战(27)——应用列表

    写在前面 本篇文章将实现应用列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘 ...

  3. [实战]MVC5+EF6+MySql企业网盘实战(26)——音乐列表

    写在前面 本篇文章将实现,音乐列表,同样和其他列表的不同之处,在于查询条件的不同. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网 ...

  4. [实战]MVC5+EF6+MySql企业网盘实战(25)——种子列表

    写在前面 上篇文章实现了视频列表,本篇文章继续实现其他的文件列表.功能相似.这里就不再赘述. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MyS ...

  5. [实战]MVC5+EF6+MySql企业网盘实战(24)——视频列表

    写在前面 上篇文章实现了文档列表,所以实现视频列表就依葫芦画瓢就行了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) ...

  6. [实战]MVC5+EF6+MySql企业网盘实战(23)——文档列表

    写在前面 上篇文章实现了图片列表,这篇文章实现文档列表将轻车熟路,因为逻辑基本相似,只是查询条件的不同.这里将txt,doc,docx,ppt,pptx,xls,xlsx的文件都归为文档列表中. 系列 ...

  7. [实战]MVC5+EF6+MySql企业网盘实战(22)——图片列表

    写在前面 实现逻辑是:单击图片节点,加载所有的当前用户之前上传的图片,分页,按时间倒序加载. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MyS ...

  8. [实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像

    写在前面 最近又开始忙了,工期紧比较赶,另外明天又要去驾校,只能一个功能一个功能的添加了,也许每次完成的功能确实不算什么,等将功能都实现了,然后在找一个好点的ui对前端重构一下. 系列文章 [EF]v ...

  9. [实战]MVC5+EF6+MySql企业网盘实战(2)——验证码

    写在前面 断断续续,今天算是把验证码的东东弄出来了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) [实战]MVC5 ...

随机推荐

  1. Canny边缘检测算法原理及其VC实现详解(二)

    转自:http://blog.csdn.net/likezhaobin/article/details/6892629 3.  Canny算法的实现流程 由于本文主要目的在于学习和实现算法,而对于图像 ...

  2. SpringCloud学习(2)——Rest微服务案例

    创建父工程: microservicecloud  创建公共模块api:microservicecloudapi SQL脚本: 此学习路线总共创建3个库, 分别为clouddb01, clouddb0 ...

  3. <LC刷题一>相加为0的数之leetcode1&2&15&16

    --题目导航见页面左上角的悬浮框#目录导航#-- 相似题型导航 1.1 twosum两数之和  ||  2.2 3Sum三数之和  ||  2.3 3Sum Closest最接近的三数之和 ----- ...

  4. 【BZOJ】4753: [Jsoi2016]最佳团体 01分数规划+树上背包

    [题意]n个人,每个人有价值ai和代价bi和一个依赖对象ri<i,选择 i 时 ri 也必须选择(ri=0时不依赖),求选择k个人使得Σai/Σbi最大.n<=2500,ai,bi< ...

  5. 【BZOJ】3991: [SDOI2015]寻宝游戏 虚树+DFS序+set

    [题意]给定n个点的带边权树,对于树上存在的若干特殊点,要求任选一个点开始将所有特殊点走遍后返回.现在初始没有特殊点,m次操作每次增加或减少一个特殊点,求每次操作后的总代价.n,m<=10^5. ...

  6. 【leetcode 简单】第二十一题 相同的树

    给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 3 2 3 [1,2,3], [1 ...

  7. canvas 绘制星座图(好玩)--转载

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  8. ASP.NET EF 使用LinqPad 快速学习Linq

    使用LinqPad这个工具可以很快学习并掌握linq[Language Integrated Query] linqPad官方下载地址:http://www.linqpad.net/ linqPad4 ...

  9. TCP 传输控制协议(转)

    开头先说几个协议: IP:网际协议 TCP:传输控制协议 Http:超文本传输协议 AMQP:高级消息队列协议 一:TCP是什么? TCP(Transmission Control Protocol ...

  10. elk系列2之multiline模块的使用【转】

    preface 上回说道了elk的安装以及kibana的简单搜索语法,还有logstash的input,output的语法,但是我们在使用中发现了一个问题,我们知道,elk是每一行为一个事件,像Jav ...