table.appand(行数据) datagrid分页

Posted DDLL11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table.appand(行数据) datagrid分页相关的知识，希望对你有一定的参考价值。

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>

 

以上是关于table.appand(行数据) datagrid分页的主要内容，如果未能解决你的问题，请参考以下文章

如何获取 DevExpress XtraGrid 的选定行值？

WPF Datagrid行上下文菜单-禁用菜单项[关闭]

C# datagridviewdatagridGridControl增加行号

wpf datagrid怎么得到第一项焦点？然后在方向键上下移动

SqlDataAdapter.Update 直到第二次更新才写入表

DataGridView显示日期格式问题