
后端
- 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>
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)
评价
排名
8
文章
207
粉丝
7
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:
50010702506256


欢迎加群交流技术