Vue.jsは改ページ検索機能を実現します。
本論文の例では、Vue.jsのページ別クエリを実現するための具体的なコードを共有します。
vue.jsの使用は以下の通りです。
1、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、パッケージの作り方
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フロントエンドコンポーネント学習教程をクリックして学習してください。以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。