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 相关文章推荐
javascript优先加载笔记代码
Sep 30 Javascript
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
基于javascript实现移动端轮播图效果
Dec 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中读写文件实现代码
2011/10/20 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
angular共享依赖的解决方案分享
2020/10/15 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
简单介绍Python中的floor()方法
2015/05/15 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
python中的字典使用分享
2016/07/31 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Django之路由层的实现
2019/09/09 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
某科技软件测试面试题
2013/05/19 面试题
小学家长会邀请函
2014/01/23 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
商品陈列协议书
2014/09/29 职场文书
公务员政审材料范文
2014/12/23 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript
JavaScript流程控制(循环)
2021/12/06 Javascript
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers