首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Ag-Grid:如何获取自定义分页的lastRow

Ag-Grid是一个功能强大的JavaScript数据网格库,用于在Web应用程序中显示和操作大量数据。它提供了许多高级功能,包括自定义分页。

要获取自定义分页的lastRow,可以按照以下步骤进行操作:

  1. 首先,确保你已经在项目中引入了Ag-Grid库,并创建了一个Ag-Grid实例。
  2. 在Ag-Grid实例的配置中,设置pagination属性为true,启用分页功能。
  3. 在配置中,设置paginationPageSize属性为每页显示的行数。例如,设置为10表示每页显示10行数据。
  4. 在配置中,设置paginationNumberFormatter属性为一个自定义的分页数字格式化函数。这个函数将在分页组件中显示页码。例如,可以使用function (params) { return '[' + params.value.toLocaleString() + ']'; }来显示页码。
  5. 在配置中,设置onPaginationChanged属性为一个自定义的回调函数。这个函数将在分页发生变化时被调用。
  6. 在自定义的回调函数中,可以通过调用api.paginationGetCurrentPage()方法获取当前页码。
  7. 通过调用api.paginationGetTotalPages()方法获取总页数。
  8. 通过调用api.paginationGetRowCount()方法获取总行数。
  9. 通过调用api.paginationGetPageSize()方法获取每页显示的行数。
  10. 通过计算得出lastRow的值,可以使用公式:currentPage * pageSize

下面是一个示例代码片段,展示了如何获取自定义分页的lastRow:

代码语言:txt
复制
var gridOptions = {
  // 其他配置项...
  pagination: true,
  paginationPageSize: 10,
  paginationNumberFormatter: function (params) {
    return '[' + params.value.toLocaleString() + ']';
  },
  onPaginationChanged: function () {
    var currentPage = gridOptions.api.paginationGetCurrentPage();
    var totalPages = gridOptions.api.paginationGetTotalPages();
    var rowCount = gridOptions.api.paginationGetRowCount();
    var pageSize = gridOptions.api.paginationGetPageSize();
    var lastRow = currentPage * pageSize;
    
    console.log('当前页码:', currentPage);
    console.log('总页数:', totalPages);
    console.log('总行数:', rowCount);
    console.log('每页显示行数:', pageSize);
    console.log('lastRow:', lastRow);
  },
  // 其他配置项...
};

// 创建Ag-Grid实例
new agGrid.Grid(gridDiv, gridOptions);

这样,你就可以通过以上步骤获取自定义分页的lastRow,并在控制台中打印出相关信息。

关于Ag-Grid的更多信息和使用方法,你可以参考腾讯云的相关产品和文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

分页解决方案 之 QuickPager使用方法(PostBack分页自定义获取数据)

适用范围:网站后台管理、OA、CRM、CMS等,从关系型数据库里提取数据,或者XML等获取数据,不愿意使用Pager_SQL、DataAccessLibrary情况。       ...优点:可以使用自己喜欢方式获取数据,不仅仅限于关系型数据库,其他也都可以。       缺点,要写代码比较多。       ...            Pager1.ShowDataControl = this.GV;             //设置成自定义方式获取             Pager1.GetDataKind...//设置总记录数、总页数                 SetRecprdCount();                 //获取第一页记录                 string sql...            GV.DataBind();             //设置总记录数、总页数             SetRecprdCount();             //修改分页控件

67560

我是如何爱上ag-grid框架

我查看了AngularJS 1.x多个网格项目,没有像ag-Grid那样活跃,当我随便链接链接时,我登陆了ag-Grid示例页面。我前任做错了!...我及时检查了源代码,发现ag-Grid有一个column定义字段,其中包含我真正需要所有内容。这伴随着排序,过滤,固定和最重要 - 分组,聚合以及拥有所需数量能力。...我添加了视图,因此您可以多次在同一网格上工作,但每个网格都有不同自定义外观,有一次我将客户端数据库转储给用户(大约150K行和150个属性)和创建了自定义报告生成器。...后来,我添加了自己数据虚拟化(在ag-Grid上重构之前)并且享受了网格API提供一些很酷东西。完成后,CRM开发很快。...“ 现在,对JavaScript数据网格,尤其是AngularJS 1.x教育和经验,我只是笑着教他们关于ag-Grid

6.2K40
  • 20多个好用 Vue 组件库,请查收!

    特点 可选行及粘性头部 虚拟分页 下载客户组件数据CSV 有数据层支持多级分组 Tailwind 主题 Handsontable 地址:https://github.com/handsontab....Ag-Grid 是一个基于Vue.js数据表格组件。其中,“ag” 表示 “agnostic”。内部 ag-Grid引擎是在TypeScript中实现,零依赖关系。...ag-Grid通过包装器组件支持Vue,你可以在应用程序中,就像其他任何Vue组件一样使用ag-Grid。它支持通过属性绑定传递配置,通过事件绑定来处理事件。...表格组件具有许多内置功能,比如说,单元格省略号、固定/灵活列大小调整、自定义过滤等等。...Vue-Good-Table是一个基于Vue.js数据表组件,简单、干净,具有排序、列过滤、分页等更多基本功能。

    7.5K10

    基于 Angular Material Data Grid 设计实现

    说点题外话,开发一款插件最大难度不在于功能实现,而在于如何去设计插件。 什么是 Data Grid? Data Grid 本质上就是通过 数据+列定义+配置项 来渲染表格插件。...目前市面上功能最全 Data Grid 是 ag-grid,很多组件库也有自己 Data Grid 实现,比如 Ignite UI,Kendo UI。...目前 Extensions Data Grid 已经实现功能如下: paging(分页,包括前端分页和后端分页) sorting(排序,目前只支持单一排序) sticky columns(列固定)...模板是 angular 组件极其灵活一个功能。大部分优秀第三方组件都具有自定义模板能力,而在 Data Grid 中,模板更是一个不可或缺功能。...,但是弊端就是必须将列定义写在 ngOnInit 中,而且要先引用所用自定义模板实例。

    5K20

    Godot Engine:跨平台游戏开发新境界 | 开源日报 No.92

    ag-grid/ag-grid[2] Stars: 10.2k License: NOASSERTION picture AG Grid,是一个功能齐全且高度可定制 JavaScript 数据表格。...它支持 React / Angular / Vue / 纯 JavaScript,并提供了标准网格所需所有特性,如列交互、分页、排序和行选择等。...此外,AG Grid 还具有以下突出特点: 分组/聚合 可访问性支持 自定义过滤器 原地单元格编辑 记录懒加载 服务器端记录操作 实时流更新 与其他数据表不同之处在于 AG Grid 具有完整自定义能力和灵活性...该项目具有以下核心优势: 强大而灵活:Mapbox GL JS 提供了丰富功能,可以创建出符合个性需求并能够与用户进行交互地图。它支持自定义样式,并提供多种数据展示方式。.../ag-grid: https://github.com/ag-grid/ag-grid [3] mapbox/mapbox-gl-js: https://github.com/mapbox/mapbox-gl-js

    51510

    Hbase 过滤器详解

    一、HBase过滤器简介 Hbase 提供了种类丰富过滤器(filter)来提高数据处理效率,用户可以通过内置或自定义过滤器来对数据进行过滤,所有的过滤器都在服务端生效,即谓词下推(predicate...(PageFilter) 可以使用这个过滤器实现对结果按行进行分页,创建 PageFilter 实例时候需要传入每页行数。...同时在不使用第三方数据库存储 RowKey 情况下,我们是无法通过知道 lastRow 下一个 RowKey ,因为 RowKey 设计可能是连续也有可能是不连续。...Regin Services 上执行分页过滤时候,由于并行执行过滤器不能共享它们状态和边界,所以有可能每个过滤器都会在完成扫描前获取了 PageCount 行结果,这种情况下会返回比分页条数更多数据...,分页过滤器就有失效可能。

    1.1K60

    Laravel5.5 手动分页自定义分页样式简单实现

    基于Laravel5.5 在项目实施过程中,需要对从接口中获取数据(或者通过搜索工具查询出来数据)进行分页 一、创建手动分页 在laravel自带分页中,一般是通过数据库查询访问paginate(...二、自定义分页样式 在实际开发中,不希望用户在浏览时直接浏览最后几页,只想用户从前往后依次浏览,如百度搜索分页,这时候,就想修改分页样式,经过一个下午奋战,贴出解决过程 在上一环节中,手动创建了分页...,可以通过重构render方法或者重新定义一个生成HTML模板方法来实现自定义HTML模板 因为我们只需要自定义HTML模板,所以,可以创建一个文件,继承\Illuminate\Contracts\Pagination...注意:自定义HTML后因为新建了一个类继承了LengthAwarePaginator类,需要将第一步手动分页方法中new LengthAwarePaginator 修改为 new Newpage 参数不变...以上这篇Laravel5.5 手动分页自定义分页样式简单实现就是小编分享给大家全部内容了,希望能给大家一个参考。

    4.3K31

    分页解决方案 之 QuickPager使用方法(PostBack分页、自动获取数据)

    优点:只需要设置几个属性即可,不用编写“分页事件”处理代码。可以很方便实现查询功能,以及保存查询条件。       ...using JYK.Controls.Pager; namespace JYK.Manage.Help.QuickPager {     /**////      /// PostBack分页方式...、自定义提取数据使用方法      ///      public partial class postback01 : System.Web.UI.Page     {         ...            //设置分页方式             Pager1.PagerSQL.SetPagerSQLKind = PagerSQLKind.MaxMin;         }...//获取查询条件             string query = "";             string tmp = "";             tmp = this.Txt_Title.TextTrimNone

    53350

    分页解决方案 之 QuickPager使用方法(URL分页、自动获取数据)

    优点:使用URL方式,对于SEO比较友好。       缺点:保留查询状态没有太好办法,GO功能没有实现,有空看看别人是怎么做。       ...; using JYK.Controls.Pager; namespace JYK.Manage.Help.QuickPager {     /**////      /// URL分页方式...            Pager1.ShowDataControl = this.GV;             //设置为URL方式分页             Pager1.PageTurnKind...NewsID";             //主键名称,不支持复合主键             Pager1.PagerSQL.TableOrderByColumns = "NewsID"; //排序字段,根据分页算法而定...            //设置分页方式             Pager1.PagerSQL.SetPagerSQLKind = PagerSQLKind.MaxMin;         }

    89890

    MySQL分页查询该如何优化?

    本文讲讲个人优化分页查询经验,抛砖引玉。...二 分析 在讲如何优化之前我们先来看看一个比较常见错误写法 SELECT * FROM tablewhere kid=1342 and type=1 order id asc limit 149420...对于此类操作,获取前面少数几行数据会很快,但是随着扫描记录数越多,SQL性能就会越差,因为N值越大,MySQL需要扫描越多数据来定位到具体N行,这样耗费大量 IO 成本和时间成本。...select * from t where kid =3 and type=1 order by id desc 8,2; MySQL 是如何执行上面的sql ?...依然是一图胜千言,通过这其实也是 延迟关联 核心思思:通过使用覆盖索引查询返回需要主键,再根据主键关联原表获得需要数据,而不是通过二级索引获取主键再通过主键去遍历数据页。 ?

    1.7K20

    ASP.NET中利用DataGrid自定义分页功能和存储过程结合实现高效分页

    ,所以必须分页显示,并且不能用DataGrid内置分页功能,于是自己实现分页....下面介绍一下我在项目中用到分页方法. ---- ASP.Net中DataGrid有内置分页功能, 但是它默认分页方式效率是很低,特别是在数据量很大时候,用它内置分页功能几乎是不可能事,因为它会把所有的数据从数据库读出来再进行分页...在最进一个项目中因为一个管理页面要管理数据量非常大,所以必须分页显示,并且不能用DataGrid内置分页功能,于是自己实现分页. 下面介绍一下我在项目中用到分页方法....设置一页大小后,如果要让DataGrid实际分出页数来,还必须设置 ProductGrid.VirtualItemCount = GetProductCount() ; // GetProductCount() 功能是获取满足条件产品数目....但是还不能真正分页.要实现真正分页,还必须实现下面的功能.

    93920

    从一个开源项目到庞大开源矩阵,他是怎么做到

    虽然实际收入肯定达不到这个数,但数百万刀收益还是有的。 所以,只要持续产出优秀开源项目,就能获得稳定课程收益,形成正反馈。 那么,一个优秀开源项目是如何诞生呢?...当时nozzle技术栈是Angular,使用ag-grid实现表格。 为了项目的后续发展,「Tanner」决定将项目整体迁移到React技术栈。...于是,随着React Tablestar越来越多,issues也接踵而至。 比如: 能够实现分页功能么? 我能给Header组件传自定义props么? 我能用CSS-In-JS么?...改版后写法如下: ReactTable组件只负责表格核心逻辑,内部逻辑交给render props实现。 想要自定义表头?自己去实现。 想要分页?自己去实现。...但是,基于「合作共赢」态度,两者形成伙伴关系,共同致力于: 教育前端开发者这两个库之间差异以及如何选择 当一个库不符合需求时,推荐对方。

    1.4K20
    领券