Question

即使没有数据，或者即使我将使用条件切换禁用/启用Pagination Arrows

，也如何设置启用分页箭头

import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { NavLink } from 'react-router-dom';
import Truncate from 'react-truncate';

// Material-UI
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';
import EditIcon from '@material-ui/icons/Edit';
import MaterialTable, { MTableToolbar, TablePagination } from 'material-table';                                                                                                                                                                                                                                                                                                                                                                                                                           
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';
import Zoom from '@material-ui/core/Zoom';

// Components
import Entity from '~/Components/Entity';
import violationsStyles from './styles';
import Strings from '~/Services/Strings';

// Services
import Navigate from '~/Services/Navigate';


@withStyles(violationsStyles)
class Violations extends React.Component {

state = {
  data : [],
  pageIndex: 0,
  pageSize: 1,
  totalCount: 0
}

componentDidMount() {
  this.get();
}

get() {
  const { pageIndex, pageSize } = this.state;

  this.entity.get({ pageIndex, pageSize });
}

get options() {
  return {
    actionsColumnIndex: -1,
    pageSize: 10,
    filtering: true,
    columnsButton: true,
    maxBodyHeight: 550,
    doubleHorizontalScroll: true,
    headerStyle: {
      color: '#434343',
      fontSize: 13
    }
  };
}

get localization() {
  return {
    header: {
      actions: '',
    },
    body: {
      emptyDataSourceMessage: Strings.listEmptyLabel,
    },
    pagination: {
      labelRowsPerPage: Strings.rowsPerPageLabel,
      labelDisplayedRows: `{from}-{to} ${Strings.fromText} {count}`,
    },
    toolbar: {
      addRemoveColumns: Strings.addRemoveColumns,
      showColumnsTitle: Strings.showColumnsTitle
    },
  };
}

get columns() {
  const { classes } = this.props;

  return [
    { title: Strings.violationReferenceNumber, field: 'referenceNumber', cellStyle: { width: 110 } },
    { 
      title: Strings.violationDescription, 
      field: 'description',
      render: rowData => (
        <Typography>
          <Truncate lines={1} ellipsis={<span>... </span>}>
            {rowData.description}
          </Truncate>
        </Typography>
      ),
      cellStyle: { paddingLeft: 0 }
    },
    { title: Strings.violationPenalty, 
      field: 'penaltyTypeId', 
      lookup: { 
        1: Strings.inform,
        2: Strings.alert,
        3: Strings.suspension, 
      },
      cellStyle: { width: '120px' }
    },
    {
      title: Strings.violationStatus,
      field: 'isArchived',
      lookup: {
        false: Strings.violationIsNotSettled,
        true: Strings.violationIsSettled,
      },
      cellStyle: { width: '130px' },
      defaultFilter: [ 'false' ]
    },
    {
      title: Strings.listActionsLabel,
      field: 'isArchived',
      render: rowData => (
        <div className={classes.iconWrapper}>
          <Choose>
            <When condition={rowData.isArchived === 'true'}>
              <Tooltip TransitionComponent={Zoom} title={Strings.violationEditActionOn}>
                <span>
                  <IconButton disabled={rowData.isArchived === 'true'}>
                    <EditIcon fontSize="default"/>
                  </IconButton> 
                </span> 
              </Tooltip>
            </When>
            <Otherwise>
              <IconButton disabled={rowData.isArchived === 'true' ? true : false} onClick={() => Navigate.go(`/violations/editor/${rowData.id}`)}>
                <Tooltip TransitionComponent={Zoom} title={Strings.violationListEditLabel}>
                  <EditIcon fontSize="default"/>   
                </Tooltip>
              </IconButton>
            </Otherwise>
          </Choose>
        </div>
      ),
      filtering: false,
      cellStyle: { paddingLeft: 35, paddingRight: 75, textAlign: 'left', justifyContent: 'flex-end', display: 'flex' },
      headerStyle: { paddingLeft: 35, textAlign: 'left', }
    },
  ];
}                          

get components() {
  const { classes } = this.props;

  return {
    Toolbar: props => (
      <div className={classes.toolbar}>
        <MTableToolbar {...props} />

        <div className={classes.customActionsBar}>
          <Button component={NavLink} to={'/violations/editor'} variant={'outlined'} color={'primary'}>
            <AddIcon className={classes.rightIcon} />
            {Strings.addNewViolation}
          </Button>
        </div>
        <div className={classes.tabelSecondHeader}>
          <Typography variant='h6'>
            {Strings.listOfViolations}
          </Typography>
        </div>
      </div>
    ),
    Pagination: props => (
      <TablePagination {...props}
        count={this.state.totalCount}
      />
    ),
  };
}

onEntityReceived(data) {
  const arr = data.result;
  const mutableList = [];

  if(arr && arr.length > 0) {
    arr.map(item => {
      mutableList.push({ 
        ...item,
        isArchived: item.isArchived.toString()
      });
    });

    this.setState({ 
      data: mutableList,
      totalCount: data.totalCount
    });
  }
}

render() {
  const { data } = this.state;

  return (
    <React.Fragment>
      <Helmet>
        <title>
          {Strings.violationsManegment}
        </title>
      </Helmet>

      <Entity
        storeId={'Supervision-Violations'}
        entityRef={ref => { this.entity = ref; }}
        onEntityPosted={() => this.onEntityPosted()}
        onEntityReceived={data => this.onEntityReceived(data)}
        render={store => (
          <MaterialTable
            title={Strings.violationsManegment}
            data={data}
            isLoading={store.loading}
            options={this.options}
            localization={this.localization}
            columns={this.columns}
            components={this.components}
            onChangePage={pageIndex => this.setState({ pageIndex })}
            onChangeRowsPerPage={pageSize => this.setState({ pageSize })}
          />
        )}
      /> 
    </React.Fragment>
  );
}
}

Violations.propTypes = {
  classes: PropTypes.object,
};

export default Violations;

我需要更新表的计数，因为我是从后端获取数据的，并且我正在使用服务器端分页技术，因此看来总计数自动为收到的总行数，除非我将其更改为是我从端点收到的总计数，因为我每页接收到一些数据

Answer 1

使用nextIconButtonProps={{disabled:false}}和backIconButtonProps={{disabled:false}}

Answer 2

您能否尝试使用此处https://material-table.com/#/docs/features/component-overriding中说明的替代。使用上面的代码来尝试找到所需的方法。现在没有属性可以轻松实现。

components={{

                  Pagination: props => (
                    <TablePagination
                      {...props}
                      rowsPerPageOptions={[5, 10, 20, 30]}
                      rowsPerPage={this.state.numberRowPerPage}
                      count={this.state.totalRow}
                      page={
                        firstLoad
                          ? this.state.pageNumber
                          : this.state.pageNumber - 1
                      }
                      onChangePage={(e, page) =>
                        this.handleChangePage(page + 1)
                      }
                      onChangeRowsPerPage={event => {
                        props.onChangeRowsPerPage(event);
                        this.handleChangeRowPerPage(event.target.value);
                      }}
                    />
                  ),

                }}

有没有办法设置分页箭头，即使没有数据也可以启用？

2 个答案: