table.appand(行数据) datagrid分页

最新推荐文章于 2025-09-05 14:41:09 发布

转载最新推荐文章于 2025-09-05 14:41:09 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yiran123456/p/5596764.html

文章标签：

#json #测试 #javascript #ViewUI

本文介绍了一个基于MVC5的简单分页实现方案，包括客户端和服务端的交互过程，利用BookShopPlusEntities数据模型进行分页展示，并通过easyui组件库完成前端表格的展示。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Mvc5.Models;

namespace Mvc5.Controllers
{
    public class HomeController : Controller
    {
        BookShopPlusEntities db = new BookShopPlusEntities();

        public ActionResult Index()
        {
            //控制器在启动index方法时，视图还没加载,Request.Params["page"]的值是空的
            if (Request.Params["page"]==null)
            {
                return View();
            }
            else
            {
                //获取客户端的请求参数：page是第几页
                int pid = Convert.ToInt16(Request.Params["page"]);
                //获取客户端的请求参数：size是每页几条数据
                int size = Convert.ToInt16(Request.Params["rows"]);
                int count = db.Books.Count();//总行数
                //获取分页数据
                List<Books> list = db.Books.OrderBy(b=>b.Id).Skip((pid - 1) * size).Take(size).ToList();
                //把集合转换转换成匿名类对象
                var result = from b in list
                             select new
                             {
                                 Title = b.Title,
                                 Id = b.Id
                             };
                //发送json数据到客户端，如果视图页面用到easyui的表格，必须用total和rows属性名
                return Json(new { total = count, rows = result }, JsonRequestBehavior.AllowGet);
            }
        }

    }
}

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/easyui/themes/icon.css" rel="stylesheet" />
    <link href="~/easyui/themes/default/easyui.css" rel="stylesheet" />
    <script src="~/easyui/jquery.min.js"></script>
    <script src="~/easyui/jquery.easyui.min.js"></script>
    <script src="~/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script>
        /*
        $(function () {
            $("#tab").datagrid({
                url: "/Home/Index",
                columns: [[
                    { field: 'Title', title: '标题' }
                ]],
                singleSelect: true,
                pagination: true,
                pageSize: 10,
                //设置分页时初始化条数选择大小
                pageList: [5, 10, 15],
                //设置分页时初始化页码
                pageNumber: 1,
                //设置分页工具栏的位置
                pagePosition: "bottom"
            });
        });
        */
        $(function () {
            query(1,10);
        });
        function query(pid,size) {
            $.get("/Home/Index", { page: pid, rows: size }, function (result) {
                $("#tab").empty();
                $.each(result.rows, function (i, mod) {
                    var tr = "<tr><td>" + mod.Title + "</td></tr>";
                    $("#tab").append(tr);
                });
                $('#pager').pagination({
                    total: result.total,//总行数
                    pageSize: size,
                    pageNumber: pid,
                    onSelectPage: function (pagenum, pagesize) {
                        query(pagenum, pagesize);
                    },
                    onChangePageSize: function (pagenum, pagesize) {
                        query(pagenum, pagesize);
                    }
                });
            }, "json");
        }
    </script>
</head>
<body>
    <table id="tab"></table>
    <div id="pager" style="background-color:aquamarine"></div>
</body>
</html>