【问题标题】:How to implement Pagination buttons which allow you to jump to any page using Ag grid in React.js?如何在 ag 网格页脚中获取 1 到 5 的页码
【发布时间】:2022-01-17 03:16:11
【问题描述】:

我正在尝试在分页中获取数字,所以如果有人想进入一个页面,他们点击那个页面,他们就会到达那个页面,但我在谷歌上找不到任何东西。

import { useEffect, useState } from "react";
import axios from "axios";
import { AgGridReact } from 'ag-grid-react';
import React from 'react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

function Read(props) {
  const \[record, setRecord\] = useState('');

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/comments')
    .then((response) =>{
      console.log(response.data);
      setRecord(response.data);
    })
  }, \[\])

  function update(data){
    console.log("hello");
  }

const col= \[
    { headerName: "Name", field: "name"},
    { headerName: "Email", field: "email"},
    { headerName: "Body", field: "body"},
    {headerName: "", headerClass: 'new-class',
        cellRendererFramework:(params)=>
        <div>
                  <button onClick={() => update(params.data)}>Edit</button>
        </div>}
  \]

  return (
    <>
        <div className="ag-theme-alpine" style={{height:'400px',
        width: '700px'}}>
        <AgGridReact
            columnDefs={col}
            rowData={record}
            pagination={true}
            >
        </AgGridReact>
      </div>
    </>
  );
}

export default Read;

这就是我想要显示页码的方式

【问题讨论】:

    标签: pagination datagrid grid ag-grid ag-grid-react


    【解决方案1】:

    ag-grid网站上有一个例子可以让用户跳转到第5页或者第50页:

    https://www.ag-grid.com/javascript-data-grid/row-pagination/#example-custom-controls

    稍微修改一下就可以使用这个例子吗?

    【讨论】:

    • 即使你提到了所有的页码,这些都是直接链接到页码的,但是当你点击特定页面时它不会隐藏起始页码和结束页码
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-10-23
    • 2020-10-25
    相关资源
    最近更新 更多