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的message插件实现右下角弹出消息框
Jan 11 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
JavaScript中的细节分析
Jun 30 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
实例详解带参数的 npm script
May 28 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 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
3
2006/10/09 PHP
php 获取客户端的真实ip
2009/11/30 PHP
php中对2个数组相加的函数
2011/06/24 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
php判断目录存在的简单方法
2019/09/26 PHP
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python字典的遍历3种方法详解
2019/08/10 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
浅析python 字典嵌套
2020/09/29 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
秋季运动会表扬稿
2014/01/16 职场文书
项目转让协议书
2014/10/27 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
linux目录管理方法介绍
2022/06/01 Servers
Go gorilla/sessions库安装使用
2022/08/14 Golang