Vue.js如何實現分頁查詢功能

這篇文章給大家分享的是有關Vue.js如何實現分頁查詢功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

js的作用是什么

1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.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如何實現分頁查詢功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！