Vue.js实现分页查询功能

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

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

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

 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); }

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

 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);  }

<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>