vue ajax 分页,vue.js+Ajax+分页+v-for+v-if+v-model使用例子

vue.js+Ajax+分页+v-for+v-if+v-model使用例子

需求

1. 根据用户名查用户的所有登录日志

2. 带有分页

3. 安登录时间倒序

4.分页少于一页时不加载数据。

先来绑定一下搜索框的数据

[HTML] 纯文本查看 复制代码

用户名：

搜索

v-model这个大家要注意，只能用于输入 输出框，基本上只能用在input类型的控件上，不能直接用于div

v-on:click是单击事件绑定的方法，方法名为getdata

我们下面直接用v-for来循环输出数据

[HTML] 纯文本查看 复制代码

用户名

登录时间

登录IP

useragent

{{ info.User_name}}

{{ info.StrUser_createdate}}

{{ info.User_ip}}

{{ info.User_useragent}}

关于分页部分的处理如下

[HTML] 纯文本查看 复制代码

总页数 {{ pageCount}} 总记录数 {{ totalcount}}

• {{ n + 1 }}

好了数据看一下

[JavaScript] 纯文本查看 复制代码

var rw = new Vue({

el: "#grid",

data: {

pageIndex: 1, //当前页

pageCount: 0, //一共多少页

totalcount: 0, //总行数

pageSize: 10, //显示多少页

username: "", //用户名

userlogs: "" //用户列表集合

},

methods: {

getdata: function (event) {

axios({

method: 'get',

url: "/System/Crm_User_logs.aspx?action=getpagelist&username=" + this.username + "&pageIndex=" + this.pageIndex

}).then(function (res) {

var data = res.data;

if (data.reCode > 0) {

rw.$data.pageCount = Math.floor(data.TotalCount / data.pageSize);

rw.$data.totalcount = data.TotalCount;

rw.$data.username = data.username;

rw.$data.pageSize = data.pageSize;

rw.$data.pageIndex = data.pageIndex;

rw.$data.userlogs = data.info;

}

});

}

}

});

我直接用的是axios组件，这个好像只能在V2.0以后使用，直接引用axios.min.js代码就行了。

两个类发上来大家方便下载

vue.js

(304.03 KB, 下载次数: 3)

2018-12-21 12:11 上传

点击文件名下载附件

下载积分: 金钱 -1

axios.min.js

(12.64 KB, 下载次数: 2)

2018-12-21 12:12 上传

点击文件名下载附件

下载积分: 金钱 -1

全部代码如下

[HTML] 纯文本查看 复制代码

用户名： 搜索

用户名

登录时间

登录IP

useragent

{{ info.User_name}}

{{ info.StrUser_createdate}}

{{ info.User_ip}}

{{ info.User_useragent}}

总页数 {{ pageCount}} 总记录数 {{ totalcount}}

• {{ n + 1 }}

C#代码

[C#] 纯文本查看 复制代码//总行数

public int TotalCount = 0;

//每行页数

public int pageSize = 10;

public int pageIndex = 1;

//登录日志对象

List list = new List();

//登录日志访问类

User_logsBLL bll = new User_logsBLL();

//加载事件

protected void Page_Load(object sender, EventArgs e)

{

string action = Request["action"];

if (!string.IsNullOrWhiteSpace(action) && action == "getpagelist")

{

string username = Request["username"].ToString();

pageIndex = Convert.ToInt32(Request["pageIndex"].ToString().Trim());

list = bll.GetUser_logsPager("*", " user_name='" + username+"'", " user_createdate desc", pageIndex, pageSize, out TotalCount);

if (list != null && list.Count() > 0)

{

string strjson = string.Empty;

string listjson= JJoobb.Util.Helper.JsonHelper.json(list);

strjson = "{\"reCode\":1,\"TotalCount\":" + TotalCount + ",\"pageSize\":" + pageSize + ",\"pageIndex\":" + pageIndex

+ ",\"username\":\"" + username + "\",\"info\":" + listjson + ",\"msg\":\"Success\"}";

this.Response.Clear();

this.Response.ContentType = "text/plain";

this.Response.Write(strjson);

this.Response.End();

}

}

}