Vue.js如何實(shí)現(xiàn)分頁(yè)查詢功能

這篇文章給大家分享的是有關(guān)Vue.js如何實(shí)現(xiàn)分頁(yè)查詢功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

js的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

具體內(nèi)容如下

vue.js的使用如下：

1、引入vue.js

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

   a、分頁(yè)條

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

    b、分頁(yè)條js、css

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

2、分頁(yè)的方法

 public JsonResult GrtUserData(int page,int rows)
 {
 //top分頁(yè)法 row_number分頁(yè)
 TextEntities tes = new TextEntities();
 //分頁(yè)查詢
 List<Users> ulist = tes.Users.OrderBy(a=>a.Id).Skip((page-1)*rows).Take(rows).ToList();
 int allcount = tes.Users.Count(); //總頁(yè)數(shù)
 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、定義獲取總頁(yè)數(shù)的方法

 public JsonResult GetAllpage(int rows)
 {
 TextEntities tes = new TextEntities();
 int allcount = tes.Users.Count(); //總頁(yè)數(shù)
 int allpage = allcount / rows;
 if (allcount % rows != 0)
 allpage = allpage + 1;
 return Json(allpage);
 
 }

5、前臺(tái)分頁(yè)方法，獲取后臺(tái)的數(shù)據(jù)，實(shí)現(xiàn)分頁(yè)的動(dòng)態(tài)性

<script>
 //封裝一個(gè)查詢后臺(tái)的方法
 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") {
  //更新查詢后的頁(yè)面
  getdata(num, 5,vm);
  }
  }
 });
 }
 });
 }

 $(function () {
 //給更新div添加數(shù)據(jù)
 var update_vm = new Vue({
 el: "#updatecontent",
 data: {
 userinfo: {}
 }
 })
 
 //實(shí)例化 vue.js (用來(lái)給表格提供數(shù)據(jù)的) 只實(shí)例化一次
 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打開編輯狀態(tài)
  //$(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() + ">");
  //});

  //復(fù)制對(duì)象
  // 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數(shù)據(jù)替換把更新后到頁(yè)面
  // vm.$data.mydata.splice(1, 1, update_vm.$data.userinfo);
  });
  },
  cancel: function () //點(diǎn)擊關(guān)閉按鈕
  {
  // alert(databack.UserName);
  // console.log(databack);
  }
  });
 }
 }
 }); 

 //默認(rèn)第一個(gè)請(qǐng)求
 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>

感謝各位的閱讀！關(guān)于“Vue.js如何實(shí)現(xiàn)分頁(yè)查詢功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！