TeachingNote

vue.js +elementui+ef 简单分页

电脑版发表于:2021/11/27 9:09

后端

public ActionResult GetUserInfo(int page = 1, int rows = 10)
{
    OAEntities oAEntities = new OAEntities();
    List<UserInfo> userInfos = oAEntities.UserInfo.OrderBy(a => a.Id).Skip((page - 1) * rows).Take(rows).ToList();
    int allcount = oAEntities.UserInfo.Count();

    return Json(new { allcount, userInfos }, JsonRequestBehavior.AllowGet);
}

前端

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

    <div id="content">
        <table>
            <tr v-for="item in userinfo">
                <td v-bind:vl="item.Id">{{item.Id}}</td>
                <td :vl="item.Id">{{item.UserName}}</td>
                <td>{{item.Number}}</td>
                <td>{{item.UserClass}}</td>
                <td><a href="#" @@click="handlerRemove">删除</a></td>
            </tr>
        </table>
        <div class="block">
            <span class="demonstration"></span>
            <el-pagination layout="total,prev, pager, next"
                           :page-size="pagesize"
                           :total="allpage"
                           background
                           @@current-change="handlerPage">
            </el-pagination>
        </div>
    </div>
</body>
</html>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    var vm = new Vue({
        el: "#content",
        data: {
            userinfo: "",
            allpage: 100,
            pagesize: 10
        },
        methods: {
            handlerRemove: function () {
                alert("删除");
            },
            handlerPage: function (val) {

                getdata(val);
            }
        }
    });

    var getdata = function (val) {
        $.get('/vue/GetUserInfo', { page: val }, function (result) {
            vm.userinfo = result.userInfos;
            pa.$data.allpage = result.allcount;
        })
    }

    getdata(1);

</script>


关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢