Remote Table - Rewrite href in button pagination.

[ahmadfadlydziljalal]

My screenshoot app:

Thanks for your great effort ini this package, My question is, can we override href in pagination button for better SEO ?

We need route like this: note?page=1&per-page=5

I use react-router-dom.

const routes = [

  { path: "/note", name: "My Note", Component: Note },
  { path: "/note/:page", name: "My Note Per Page", Component: Note }, ### I need this one

];

Here is the react-bootstrap table code:

const Note = (props) => {
  const columns = noteColumns;

  // User request for pagination
  const [page, setPage] = useState(1); // initial page
  const sizePerPage = 5;

  // Records
  const [notes, setNotes] = useState({
    loading: false,
    data: [],
    totalData: 0,
    currentPage: 1,
    pageCount: 1,
  });

  useEffect(() => {
    let isMounted = true;

    setNotes({
      ...notes,
      loading: true,
    });

    // Fetching data from API
    NoteDataService.getAll(page, sizePerPage)
      .then((response) => {
        if (isMounted) {
          setNotes({
            loading: false,
            data: response.data,
            totalData: response.headers["x-pagination-total-count"],
            currentPage: response.headers["x-pagination-current-page"],
            pageCount: parseInt(response.headers["x-pagination-page-count"]),
          });
        }
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      isMounted = false;
    }; // eslint-disable-next-line
  }, [page, sizePerPage]);

  const { loading, data, pageCount, totalData } = notes;

  const previousCounter = () => {
    setPage(page <= 1 ? 1 : page - 1);
  };

  const nextCounter = () => {
    setPage(page < pageCount ? page + 1 : pageCount);
  };

  const resetCounter = () => {
    setPage(1);
  };

  const selectRow = {
    mode: "checkbox",
    style: { textAligin: "center" },
    classes: "bg-warning",
  };

  const paginationOption = {
    custom: true,
    page,
    sizePerPage,
    totalSize: parseInt(totalData),
    firstPageText: "First",
    lastPageText: "Last",
  };

  const handleTableChange = () => {};

  return (
    <>
      <PageTitleOrganism name={props.name} crumbs={props.crumbs} />

      <div className="row">
        <div className="col">
          <PaginationProvider pagination={paginationFactory(paginationOption)}>
            {({ paginationProps, paginationTableProps }) => (
              <div className="card card-default">
                <div className="card-header">
                  Notes Listing{" "}
                  {loading && (
                    <Spinner
                      animation="border"
                      variant="primary"
                      size="sm"
                      role="status"
                    >
                      <span className="sr-only">Loading...</span>
                    </Spinner>
                  )}
                  <div className="float-right">
                    <PaginationTotalStandalone {...paginationProps} />
                  </div>
                </div>

                <div className="card-body p-0">
                  <Link to={"/note/create"}>
                    <Button variant="outline-secondary" className="m-3">
                      <FontAwesomeIcon icon={faPlus} /> Add Manual
                    </Button>
                  </Link>
                  <div className="float-right">
                    <Button
                      variant="outline-secondary"
                      className="m-3"
                      title="Reload"
                      onClick={resetCounter}
                    >
                      <FontAwesomeIcon icon={faRedoAlt} />
                    </Button>
                  </div>
                  <Button variant="primary" onClick={previousCounter}>
                    Prev
                  </Button>{" "}
                  <Button variant="primary" onClick={nextCounter}>
                    Next
                  </Button>
                  <div>
                    <div className="m-3">
                      <PaginationListStandalone {...paginationProps} />
                    </div>
                    <BootstrapTable
                      remote
                      onTableChange={handleTableChange}
                      keyField="id"
                      data={data}
                      columns={columns}
                      bootstrap4
                      wrapperClasses="table-responsive-md table-sm"
                      hover
                      selectRow={selectRow}
                      {...paginationTableProps}
                    />
                  </div>
                </div>
              </div>
            )}
          </PaginationProvider>
        </div>
      </div>
    </>
  );
};

Thumbs from Indonesia.

[ahmadfadlydziljalal]

So far, the default href="#"