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 应用类库代码
Jun 02 Javascript
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
Javascript 继承机制实例
Aug 12 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
VUE 使用中踩过的坑
Feb 08 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高级OOP技术演示
2009/08/27 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
php中curl使用指南
2015/02/05 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
JavaScript 学习点滴记录
2009/04/24 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
javascript数组定义的几种方法
2017/10/06 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
Python logging模块学习笔记
2014/05/24 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
python搭建微信公众平台
2016/02/09 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
企业文化口号
2014/06/12 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers