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

站长苏飞 · 发表于 2018-12-21 12:12:49

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

需求

1. 根据用户名查用户的所有登录日志
2. 带有分页
3. 安登录时间倒序
4.分页少于一页时不加载数据。

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

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

 <td colspan="3">
                            <div class="form-control-wrap">
                                <label class="form-label">
                                    用户名：</label>
                                <input class="form-control ml1" v-model="username" />
                            </div>
                            <button class="btn btn-primary" v-on:click="getdata">
                                搜索</button>
                        </td>

v-model这个大家要注意，只能用于输入输出框，基本上只能用在input类型的控件上，不能直接用于div
v-on:click是单击事件绑定的方法，方法名为getdata
我们下面直接用v-for来循环输出数据

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

<table class="table table-page">
                    <thead>
                        <tr>
                            <td align="center">
                                用户名
                            </td>
                            <td align="center">
                                登录时间
                            </td>
                            <td align="center">
                                登录IP
                            </td>
                            <td align="center">
                                useragent
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="info in userlogs">
                            <td align="center">
                                {{ info.User_name}}
                            </td>
                            <td align="center">
                                {{ info.StrUser_createdate}}
                            </td>
                            <td align="center">
                                {{ info.User_ip}}
                            </td>
                            <td align="center">
                                {{ info.User_useragent}}
                            </td>
                        </tr>
                    </tbody>

关于分页部分的处理如下

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

 <tfoot>
                        <tr>
                            <td colspan="11">
                                <div class="pagination-wrap">
                                    <div class="count">
                                         <div  >总页数  {{ pageCount}}    总记录数 {{ totalcount}}  </div>
                                    </div>
                                    <ul class="pagination" v-if="pageCount > 1">
                                        <li v-for="n in pageCount"><a href="javascripit:void(0)" v-bind:class="pageIndex === n + 1 ? 'active' : ''">
                                            {{ n + 1 }}</a> </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </tfoot>

好了数据看一下

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

 <script type="text/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;
                        }
                    });
                }
            }
        });
    </script>

我直接用的是axios组件，这个好像只能在V2.0以后使用，直接引用axios.min.js代码就行了。
两个类发上来大家方便下载

vue.js (304.03 KB, 下载次数: 3)

axios.min.js (12.64 KB, 下载次数: 2)

全部代码如下

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

 <div class="si-form" id="grid">
<table class="table table-form">
<tr>
<td colspan="3">
<div class="form-control-wrap">
<label class="form-label">
用户名：</label>
<input class="form-control ml1" v-model="username" />
</div>
<button class="btn btn-primary" v-on:click="getdata">
搜索</button>
</td>
</tr>
</table>
<%--分页列表--%>
<table class="table table-page">
<thead>
<tr>
<td align="center">
用户名
</td>
<td align="center">
登录时间
</td>
<td align="center">
登录IP
</td>
<td align="center">
useragent
</td>
</tr>
</thead>
<tbody>
<tr v-for="info in userlogs">
<td align="center">
{{ info.User_name}}
</td>
<td align="center">
{{ info.StrUser_createdate}}
</td>
<td align="center">
{{ info.User_ip}}
</td>
<td align="center">
{{ info.User_useragent}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="11">
<div class="pagination-wrap">
<div class="count">
<div >总页数 {{ pageCount}}    总记录数 {{ totalcount}} </div>
</div>
<ul class="pagination" v-if="pageCount > 1">
<li v-for="n in pageCount"><a href="javascripit:void(0)" v-bind:class="pageIndex === n + 1 ? 'active' : ''">
{{ n + 1 }}</a> </li>
</ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>

C#代码

[C#] 纯文本查看 复制代码

 //总行数
        public int TotalCount = 0;
        //每行页数
        public int pageSize = 10;
        public int pageIndex = 1;
        //登录日志对象
        List<User_loginfo> list = new List<User_loginfo>();
        //登录日志访问类
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();
                }
            }
        }

站长苏飞 · 发表于 2018-12-21 12:53:04

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

  rw.pageCount = Math.floor(data.TotalCount / data.pageSize);
                            rw.totalcount = data.TotalCount;
                            rw.username = data.username;
                            rw.pageSize = data.pageSize;
                            rw.pageIndex = data.pageIndex;
                            rw.userlogs = data.info;

这样写和上面的写法作用相同。

Amy · 发表于 2018-12-21 15:03:48

真是难得给力的帖子啊。

竹林风 · 发表于 2018-12-21 17:03:13

真是难得给力的帖子啊。

惜 · 发表于 2018-12-23 20:34:57

楼主加油，我们都看好你哦。

testnowa122 · 发表于 2019-8-6 15:35:50

多谢，找了好多，终于找到个简洁分页，拿来就能用的了

		自动登录	找回密码
密码			马上注册

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

相关帖子