Vue.js實現(xiàn)分頁查詢功能

更新時間：2021年09月29日 08:53:17 作者：MZHJN2099

這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)分頁查詢功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue.js實現(xiàn)分頁查詢的具體代碼，供大家參考，具體內(nèi)容如下

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(); //總頁數(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、定義獲取總頁數(shù)的方法

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

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

<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添加數(shù)據(jù)
 var update_vm = new Vue({
 el: "#updatecontent",
 data: {
 userinfo: {}
 }
 })
 
 //實例化 vue.js (用來給表格提供數(shù)據(jù)的) 只實例化一次
 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() + ">");
 //});

 //復制對象
 // 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ù)替換把更新后到頁面
 // 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前端組件學習教程進行學習。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: