没有合适的资源?快使用搜索试试~ 我知道了~
首页ASP.NET Core MVC中shenniu.pager.js分页插件详解与实战
ASP.NET Core MVC中shenniu.pager.js分页插件详解与实战
0 下载量 110 浏览量
更新于2024-09-02
收藏 104KB PDF 举报
本文将深入解析在MVC架构中如何有效地利用开源分页插件shenniu.pager.js。shenniu.pager.js是一个轻量级、易于集成的JavaScript分页解决方案,特别适合那些注重用户体验的项目。作者首先介绍了分页的两种常见方式:跳转分页和AJAX分页,强调了后者通过异步请求保持页面不刷新的优点。 文章详细展示了shenniu.pager.js插件的优势和应用场景,通过对比,突出了采用JS分页的实际效果,提供了三个步骤的使用示例。首先,作者解释了采用JS分页的原因,它能够提供更好的用户体验,尤其是在处理大量数据时,无需每次都刷新整个页面。 在视图层(View)中,作者建议配合Bootstrap和Ace样式框架,使得界面美观易用。此外,文章还提到了需要引用jQuery库以及日期选择插件(bootstrap-datepicker.min.js和bootstrap-datepicker3.min.css)来实现日期选择功能。在实际应用中,作者分享了具体的引用步骤和所需文件配置。 接下来,文章将引导读者逐步学习如何在MVC的View部分引入并使用shenniu.pager.js。这包括了如何在HTML中嵌入插件,配置分页参数,以及如何在后台管理框架中调用相关API以获取数据并更新分页内容。通过清晰的步骤和实例代码,本文为开发者提供了实用的指导,使得他们能够快速理解和集成这一开源工具,提升项目的性能和用户体验。 本文是一篇技术性很强的教程,不仅涵盖了分页插件的基本概念,还有详细的实践操作步骤,对于希望通过shenniu.pager.js优化前端分页效果的MVC开发者来说,具有很高的参考价值。
资源详情
资源推荐
详解详解MVC如何使用开源分页插件(如何使用开源分页插件(shenniu.pager.js))
本文主要分享了shenniu.pager.js整个插件内容,不多且清晰。具有很好的参考价值,需要的朋友一起来看下吧
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了;虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事
情,一者使用aspnetcore开发了个人线上项目(要说线上其实只能ip访问,没有域名哈哈),其架构组成由:aspnetcore1.0.0+redis+
postgressql+TaskMainForm服务,这个项目在后期会开源出来供大家分享学习,站点地址点这里心声网;一者是目前正在做的后台管理框架一叶子,现
目前刚好吧js分页插件shenniu.pager.js写完,个人觉得还是可以的,这也是本章将要和大家分享的内容;那么开始今天的分享内容,希望各位多多扫码
支持:
为什么采用为什么采用js分页及效果图分页及效果图
在在view中如何使用及分享个后台方法中如何使用及分享个后台方法
开发者视角阅读开发者视角阅读shenniu.pager.js代码代码
下面一步一个脚印的来分享:
. 为什么采用为什么采用js分页及效果图分页及效果图
首先,咋们来了解下市面上mvc两种常用的分页方式:跳转分页和ajax分页;跳转分页意思就是页面重定向到指定的页面并通过传递分页需要的参数,从
而获取数据后通过Modal来绑定数据,这个每次都会刷下页面体验上不是很好;ajax分页通过异步js请求某个接口,然后从接口获取到数据后,再赋值到
展示的界面上,这种方式是不会刷新页面,从而保证了用户体验;
下面来看下这次分享的js分页插件效果图:
图一:
图二:
图三:
看效果图好像看不出来什么东西,我只能说没办法,以后争取弄个gif动态图片吧,后面代码才是关键
. 在在view中如何使用及分享个后台方法中如何使用及分享个后台方法
首先,为了页面样式好看我使用了bootstrap+ace样式框架,样式效果就是如上面几张图所示(这里是样式和js文件);由于该插件是采用jquery格式书写的
所以需要引用jquery.js,如上面图所示使用到了日期选择框,因为我采用的样式都是基于h5的设计所以这里引用的日期选择插件bootstrap-
datepicker.min.js和她的样式bootstrap-datepicker3.min.css;该实例需要的引用文件都好了,下面看下截图:
再来,咋们就开始使用shenniu.pager.js,我们需要在点击“查询”按钮的时候去调用这个插件,然后通过插件去获取后台接口返回的数据,并绑定到页面展
示出来,所以有了如下代码:
var snTool = new shenniuTool();
$("button[id='btnSearch']").on("click", function () {
var data = {
txtName: $("input[name='txtName']").val(),
nStatus: $("select option:selected").val(),
dOperateTime: $("input[name='dOperateTime']").val()
};
snTool.listFun({
showId: "divShowResult", //内容显示的div的Id
url: "/Menu/Search",
data: data,
pageSize: 2, //每页N条
headText: [
{ nickName: "全选", name: "Id", colType: "checkbox" },
{ nickName: "名称", name: "Name", colType: "label", isModalHeadText: true },
{ nickName: "链接", name: "Link" },
{ nickName: "状态", name: "EnableDes" },
{ nickName: "操作人", name: "OperatorDes" },
{ nickName: "操作时间", name: "OperateTime", format: "yyyy-MM-dd" },
{ nickName: "操作", name: "Id", colType: "operate" }
],
editeOption: {
url: "/Menu/Edit",
title: "编辑",
height: 500
},
viewOption: {
url: "/Menu/Details",
title: "查看",
height: 500
},
delOption: {
url: "/Menu/Delete",
title: "删除",
height: 500
},
modalExt: modalExt
});
});
注意参数url: "/Menu/Search",这个指向的就是后台接口,那么咋们来看下我后台咋们写的:
[HttpGet]
public JsonResult Search()
{
var moPageResult = new StageModel.MoPageResult<dynamic>();
下载后可阅读完整内容,剩余5页未读,立即下载
weixin_38548394
- 粉丝: 2
- 资源: 913
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功