Vue.js實現分頁查詢功能

NO IMAGE

本文例項為大家分享了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構建可重用的分頁元件基於vue.js實現的分頁vue.js分頁中單擊頁碼更換頁面內容的方法(配合spring springmvc)vue的一個分頁元件的示例程式碼Vue實現web分頁元件詳解基於vue.js的分頁外掛詳解基於vue實現分頁效果VUE實現一個分頁元件的示例用Vue寫一個分頁器的示例程式碼