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>
时间: 2024-12-24 08:24:45

table.appand(行数据) datagrid分页的相关文章

layer学习笔记之table表格引入数据实现分页

LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 最近一直在学习使用layer的layui框架技术,这个主要表现在于弹出层的使用,但是layer页面效果使用也是非常好用的. 之前写一个一个关于数据的table表格显示 并带有分页功能,实现过程遇到了很多问题,现抽空总结一下. 使用之前请先详细阅读layer的文档:http://www.layui.com/doc/modules/layer.html 首先下载最新版的lay

纯javascript写的table加载,包含分页、数据下载功能

直接先上效果图看看先. 首先简单说明一下,后面会给所涉及到的代码都贴上来的. 1.excel图标是一个用户控件,用来触发下载 2.首页.上页......每页多少条,这一块是一个整体,你可以选择放置在表格下面,或者表格上面都可以 3.表格则也是单独的一个,自己任意设置位置 4.复选框是否显示,自己设置,并可设置绑定的值,并有自带的方法可供你用于获取选中的复选框的对象跟值 5.表格的单行.双行.点击.悬浮.标题栏.表格的样式,都可以通过设置参数来修改,图为自带的效果 6.分页默认每页10行,分页的检

对Table的操作(赋值、动态新增行、删除行、保存table中多行数据对象

一.成品界面: 二.功能点描述 从后台传list对象,前台table展示. 可添加行操作,新增或者删除行. 三.源码: Form表单: <form id="reportForm" method="post"> <table class="table-grid table-list" cellpadding="1" cellspacing="1" id="reportTable&q

架构模式数据源模式之:表数据入口(Table Data Gateway)、行数据入口(Row Data Gateway)、活动记录(Active Record)

一:表数据入口(Table Data Gateway) 表数据入口提供了用于访问单个表或者视图(也包含了联表查询)的所有SQL,通常一个表一个类.其它代码通过它来实现对数据库的交互.基于这个特点,表数据入口和事务脚本代码以及表模块结合的很好. 在查询时候,表数据接口可以返回数据集 或者 DTO 或者 DTO列表.在 事务脚本 代码中已经阐述过了 DTO 以及 DTO 的列表这种形式.但是使用 DTO 这种形式,带来的一个问题是:到处衍生的 DTO,那么,如何减少到处衍生的 DTO 的,见这里<>

Silverlight获取DataGrid选中的行数据

注意触发的事件为:CurrentCellChanged后台代码: /// <summary> /// 获取datagrid当前选中的单元格数据 /// 如果绑定的数据源为实体的话默认选中的当前记录为一条实体 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void dgca

datagrid展示数据(带分页、排序)

1.view 代码: <div style="width:100%;height:100%;">    <table class="easyui-datagrid" style="width:100%;height:95%" data-options="singleSelect:true,url:'@Url.Action("GetList")',method:'get',toolbar:toolba

jquery easyui datagrid 获取Checked选择行(勾选行)数据

原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSelections:取得所有选中行数据,返回元素记录的数组数据. getChecked:取得checkbox选择行的数据,返回元素记录的数组数据. getSelected跟getSelections是选中行,而且getChecked是选择行. 选中行的意思就是,我们单击到某一个行,这个时候该行的背景色为

Wpf DataGrid动态添加列,行数据(二)

这是第二中方法,可直接绑定,我这里只是做出了一种思路,并不是最完美. 这里注意一下,因为我里面引用了MVVMLight,所以可能代码不是复制过去就能用了的. 样式也是,所以复制过去看不是我贴出来的界面这也不奇怪.代码: <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions

Element Table 动态合并 添加整行数据

效果如图所 添加整行数据,前面几列还是合并状态 直接上代码 1 // 获取列表, 2 getTableDataList() { 3 this.tableData3 = [ 4 { 5 all: "a1", 6 name: "名字1", 7 value1: "b1", 8 value2: 1, 9 value3: "2017年-10月" 10 }, 11 { 12 all: "a1", 13 name: &q