Vue.js实现分页查询功能
2017-11-27 14:30
1196 查看
本文实例为大家分享了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前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue.js实践:实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现无限加载与分页功能开发
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js 实现分页查询
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- [DIV/CSS] Vue.js 开发实践:实现精巧的无限加载与分页功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- 利用Vue.js实现求职在线之职位查询功能
- AngularJS+Bootstrap 分页功能实现,同时支持模糊查询分页
- thinkPHP多表查询及分页功能实现方法示例
- vue.js 2.0实现的简单分页
- 用js解析xml,实现分页和单一查询
- Oracle 实现分页查询功能
- Vue.js自定义下拉列表,如何实现在下拉列表区域外点击即可关闭下拉列表的功能
- Vue.js分页组件实现:diVuePagination的使用详解
- 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
- 使用 Vue.js 结合bootstrap 实现的分页控件
- JS 实现分页打印功能
- Mybatis实现简单的分页,以及基本的查询修改功能
- vue2.0使用Sortable.js实现的拖拽功能