Vue.js实现分页查询功能


Posted in Javascript onNovember 15, 2020

本文实例为大家分享了Vue.js实现分页查询的具体代码,供大家参考,具体内容如下

vue.js的使用如下:

1、引入vue.js

<script src="~/js/vue2.2.4.js"></script>

   a、分页条

<ul class="pagination" id="pagination1"></ul>

    b、分页条js、css

<link href="~/css/page.css" rel="stylesheet" />
<script src="~/js/jqPaginator.js"></script>

2、分页的方法

public JsonResult GrtUserData(int page,int rows)
 {
 //top分页法 row_number分页
 TextEntities tes = new TextEntities();
 //分页查询
 List<Users> ulist = tes.Users.OrderBy(a=>a.Id).Skip((page-1)*rows).Take(rows).ToList();
 int allcount = tes.Users.Count(); //总页数
 int allpage = allcount / rows;
 if (allcount % rows !=0)
 
 allpage = allpage + 1;
 DTO_Page dp = new DTO_Page();
 dp.data = ulist;
 dp.allpage = allpage;
 return Json(dp, JsonRequestBehavior.AllowGet);
 }

3、封装page方法

public class DTO_Page
 {
 public int rows { get; set; }
 public int allpage { get; set; }
 public List<Users> data { get; set; }
 }

4、定义获取总页数的方法

public JsonResult GetAllpage(int rows)
 {
 TextEntities tes = new TextEntities();
 int allcount = tes.Users.Count(); //总页数
 int allpage = allcount / rows;
 if (allcount % rows != 0)
 allpage = allpage + 1;
 return Json(allpage);
 
 }

5、前台分页方法,获取后台的数据,实现分页的动态性

<script>
 //封装一个查询后台的方法
 var getdata = function (page, rows,vm) {
 $.ajax({
 url: '/home/GrtUserData',
 type: 'get',
 data: { page: page, rows: rows },
 success: function (dto_page) {
 vm.mydata = dto_page.data;
 $.jqPaginator('#pagination1', {
 totalPages: dto_page.allpage,
 visiblePages: 5,
 currentPage: page,
 onPageChange: function (num, type) {
 //怎么把第一次忽略
 if (type != "init") {
 //更新查询后的页面
 getdata(num, 5,vm);
 }
 }
 });
 }
 });
 }

 $(function () {
 //给更新div添加数据
 var update_vm = new Vue({
 el: "#updatecontent",
 data: {
 userinfo: {}
 }
 })
 
 //实例化 vue.js (用来给表格提供数据的) 只实例化一次
 var vm = new Vue({
 el: '#content',
 data: {
 mydata: []
 },
 methods: {
 butdelete: function (_id) //删除
 {
 $.post('/home/BatchDelete', { ids: _id }, function (result) {
 if (result > 0) {
 location.href = "/home/UserMan";
 }
 else {
 alert("删除失败");
 }
 });
 },
 butupdate: function (item, event) //更新
 {
 //使用jquery打开编辑状态
 //$(event.target).parent().parent().find("td:gt(0):lt(4)").each(function (index,item) {
 // $(item).html("<input type='text' style='width:50px' value=" + $(item).html() + ">");
 //});

 //复制对象
 // var databack = $.extend({},item);
 update_vm.$data.userinfo = item;
 layer.open({
 type: 1,
 area: ["300px", "230px"],
 title: "更新",
 content: $("#updatecontent"),
 btn: ["保存"],
 yes: function (index) {
 $.post('/home/Update', update_vm.$data.userinfo, function (result) {
 //可以把vue.js数据替换把更新后到页面
 // vm.$data.mydata.splice(1, 1, update_vm.$data.userinfo);
 });
 },
 cancel: function () //点击关闭按钮
 {
 // alert(databack.UserName);
 // console.log(databack);
 }
 });
 }
 }
 }); 

 //默认第一个请求
 getdata(2,5,vm);
 $("#deletebut").click(function () {
 //存放需要批量删除的id
 var ids = "";
 $(".mytable input[type='checkbox']:checked").each(function (index, item) {
 ids += $(item).val() + ",";
 });
 $.post('/home/BatchDelete', { ids: ids }, function (result) {
 if (result > 0) {
 location.href = "/home/UserMan";
 }
 else {
 alert("删除失败");
 }
 });
 });
 });
</script>

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 #Javascript
JS基于贪心算法解决背包问题示例
Nov 27 #Javascript
基于vue.js的分页插件详解
Nov 27 #Javascript
webpack构建换肤功能的思路详解
Nov 27 #Javascript
vue实现商城上货组件简易版
Nov 27 #Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 #Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 #Javascript
You might like
php $_ENV为空的原因分析
2009/06/01 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php实现将Session写入数据库
2015/07/26 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
python excel转换csv代码实例
2019/08/26 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
python从PDF中提取数据的示例
2020/10/30 Python
python中entry用法讲解
2020/12/04 Python
园林设计师自荐信
2013/11/18 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
房屋质量投诉书
2015/07/02 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书