Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ServerSide pagination-Sorry, no matching records found

See original GitHub issue

Hello guys!

I really need your help. the pagination does not work when I get the data of the next page. It only display => Sorry, no matching records found.

And if put serverside on true, there is a bug!

import React, {Component} from ‘react’; import ‘./Home.css’; import MUIDataTable from ‘mui-datatables’; import { confirmAlert } from ‘react-confirm-alert’; import ‘react-confirm-alert/src/react-confirm-alert.css’; import axios from ‘axios’; import authHeader from ‘…/…/services/auth-header’; import ComposeModal from ‘./compose/ComposeModal’; import EditModal from ‘./edit/EditModal’; import ProfileModal from ‘…/profile/Profile’; import AssignMaintenance from ‘…/profile/assignMaintenance’; import NewMessage from ‘…/profile/newMessage’; import EquipmentInfoModal from ‘…/equipmentInfos/EquipmentInfos’; import CommentModal from ‘…/comment/Comment’; import {CircularProgress, Typography } from ‘@material-ui/core’;

const api = axios.create({ baseURL:http://localhost:5000/api })

const verifyScheduledDate = (date) => { const schdate = Date.parse(date); const now = Date.now(); if(schdate > now){ return true; } else{ return false; }

};

export default class Home extends Component { constructor(props){ super(props);

    this.state = {
        page: 1,
        count: 1,
        rowsPerpage: 10,
        sortOrder: {},
        isLoading: false,
        data: [],
        dataId: "",
        editData: [],
        selectedEquipment: "",
        addComposeModal: false,
        editShow: false,
        openProfileModal: false,
        assignModal: false,
        messageModal: false,
        pseudoProfile: "",
        userPseudo: "",
        note: "",
        openCommentModal: false,
        openequipmentInfoModal: false,
        equipmentName: ""
    };

    //handler
    this.handleAddBtn = this.handleAddBtn.bind(this);
    this.handleMessageModal = this.handleMessageModal.bind(this);
    this.handleAssignModal = this.handleAssignModal.bind(this);
    this.closeUserActionModal = this.closeUserActionModal.bind(this);

    this.ComposeModal = React.createRef();
    this.EditModal = React.createRef();
    this.ProfileModal = React.createRef();
    this.AssignMaintenance = React.createRef();
    this.NewMessage = React.createRef();
    this.EquipmentInfoModal = React.createRef();
    this.CommentModal = React.createRef();


    //methods
    this.delete = this.delete.bind(this);
    this.changePage = this.changePage.bind(this);
    this.getData = this.getData.bind(this);
    this.sort = this.sort.bind(this);

 
}

componentDidMount()
{

  this.getData();
  verifyScheduledDate();

}

getData()
{
this.setState({ isLoading: true });
  api.get(`/maintenance?pageNumber=${this.state.page}&pageSize=${this.state.rowsPerpage}`, {headers : authHeader()})
  .then(res =>{
    this.setState({data: res.data.data, isLoading: false, page: res.data.pageNumber, count: res.data.totalRecords});
    console.log("data: "+ res.data.data);
  })
  .catch(error => {
    alert(error);
  })
}



changePage = (page) => {
    this.setState({isLoading: true, data: []});
    let next_page = page + 1;
    
    api.get(`/maintenance?pageNumber=${next_page}&pageSize=${this.state.rowsPerpage}`, {headers : authHeader()})
  .then(res =>{
    this.setState({data: res.data.data, isLoading: false, page: res.data.pageNumber, count: res.data.totalRecords});
    alert("data: "+ this.state.data);
  })
  .catch(error => {
    alert(error);
  })
  verifyScheduledDate();

}

sort = (page) => {
    this.setState({isLoading: true});
    let next_page = page + 1;
    api.get(`/maintenance?pageNumber=${next_page}&pageSize=${this.state.rowsPerpage}`, {headers : authHeader()})
  .then(res =>{
    this.setState({data: res.data.data, isLoading: false, page: res.data.pageNumber, count: res.data.totalRecords});
    console.log("data: "+ res.data.data);
  })
  .catch(error => {
    alert(error);
  })
}



handleAssignModal(){
  const pseudo = this.state.pseudoProfile;
  this.setState({assignModal : true, userPseudo: pseudo});
}

handleMessageModal(){
  const pseudo = this.state.pseudoProfile;
  this.setState({messageModal : true, userPseudo: pseudo});

}


delete(dataIndex){
  let maintenance = this.state.data[dataIndex];
  if(maintenance.declined === false && maintenance.finished === false){
     alert('Impossible to execute! Only completed and declined maintenance can be deleted');
  }

  else{

    confirmAlert({
      title: '',
      message: 'Do you really want to do this?',
      buttons: [
          {
              label: 'Yes',
              onClick: () => {                          
                api.delete("/maintenance/"+maintenance.id, {headers : authHeader()})
                .then(res =>{
                  this.setState({data: res.data});
                  console.log("data: "+ res.data);
                })
                .catch(error => {
                  alert(error.data);
                })
              }
          },
          {
              label: 'No',
              onClick: () => {}
          }
      ]
    });
  }
}

handleAddBtn() {
  this.setState({addComposeModal : true});
}
handlemodalclose = () => {
  this.setState({addComposeModal : false, editShow : false, openProfileModal: false});
 
}

closemodal = () => {
    this.setState({editModal: false});
}

closeUserActionModal = () => {
    this.setState({assignModal: false, messageModal: false});
}



render(){
    
    const columns = [
        {
            name: "Delete",
            options: {
              filter: false,
              sort: false,
              empty: true,
              
              customBodyRenderLite: (dataIndex) => {
                 return (
                    <i className="fa fa-trash" aria-hidden="true" id="deleteIcon"
                    onClick={() => {
                              this.delete(dataIndex);
                              
                             }}></i>
               
                );
              }
            }
          },
          {
            name: "Edit",
            options: {
              filter: false,
              sort: false,
              empty: true,
              customBodyRenderLite: (dataIndex) => {
                const val = dataIndex;
                return (
  
                <i className="fa fa-pencil-square-o" aria-hidden="true" id="editIcon"
                onClick={ () =>{
                    const data = this.state.data[val];
                    const selectedEquipment = this.state.data[val].equipment.name;
                    this.setState({editData: data, selectedEquipment: selectedEquipment, editShow: true});
                }}
                ></i>
                );
              }
            }
          },
          {
            name: "priority",
            label: "Priority",
            options: {
              filter: true,
              customBodyRenderLite: (dataIndex) => {
                const val = this.state.data[dataIndex].priority;
                if(val === false){
                  return <div className="normal"><span>normal</span></div>;
                }
                else{
                  return <div className="urgent"><span>urgent</span></div>;
                }
              }
            }
          },
          {
            
            name: "description",
            label: "Description",
            options: {
              filter: true,
              customBodyRenderLite: (dataIndex) => {
                return(
                <span>{this.state.data[dataIndex].description}</span>
                );

            }
            }
          },
          {
            name: "state",
            label: "State",
            options: {
              filter: true,
              customBodyRenderLite: (dataIndex) => {
                
                const state = this.state.data[dataIndex].state;
                const decline = this.state.data[dataIndex].declined;
                if(decline === true){
                  return <div className="urgent"><span>Declined</span></div>;
                }
                else{
                      if(state === "pending"){
                        return <div className="pending"><span>{state}</span></div>;
                      }
                      if(state === "ongoing"){
                          return <div className="ongoing"><span>{state}</span></div>;
                      }
                      else {
                        return <div className="finished"><span>{state}</span></div>;
                      }
                }

              }
                
            }
          },
           {
            name: "equipment",
            label: "Equipment",
            options: {
              filter: true,
              customBodyRenderLite: (dataIndex) => {
                const val = dataIndex;
                return(
                  <div>
                    <span>{this.state.data[dataIndex].equipment.name}</span><br/>
                <i className="fa fa-eye" aria-hidden="true" id="deleteIcon"
                    onClick={() => {
                      const name = this.state.data[val].equipment.name;
                      this.setState({equipmentName: name, openequipmentInfoModal: true });                                      
                    }}/>
                  </div>
                );

              }
              

            }
          },
          {
            name: "technician",
            label: "Technician",
            options: {
              filter: false,
              customBodyRenderLite: (dataIndex) => {
                const val = dataIndex;
                return(
                  <div>
                      <span>{this.state.data[dataIndex].technician}</span><br/>
                      <i className="fa fa-eye" aria-hidden="true" id="deleteIcon"
                          onClick={() => {
                                    const pseudo = this.state.data[val].repairman.pseudo;
                                    this.setState({pseudoProfile: pseudo, openProfileModal: true });                                      
                                  }}/>
                  </div>
                );

              }
            }
          },

          {
            name: "note",
            label: "Comment",
            options: {
              filter: false,
              customBodyRenderLite: (dataIndex) => {
                const val = dataIndex;
                const data = this.state.data[dataIndex].note;

                if(data === "" || data === null)
                {
                  return (
                    <i className="fa fa-envelope-open-o"  aria-hidden="true" 
                            />                
                    );
                }
                else {
                      return (
                        <i className="fa fa-envelope"  aria-hidden="true" id="envelope"
                        onClick={() => {
                                  this.setState({note: data, openCommentModal: true});                                    
                                }}/>                    
                    );
                }
                
              }
            }
          },
         
          {
            name: "createdOn",
            label: "CreatedOn",
            options: {
              filter: true,
              customBodyRenderLite: (dataIndex) => {
                return(
                <span>{this.state.data[dataIndex].createdOn}</span>
                );

            }
            }
          },
          {
            name: "scheduledFinishedDate",
            label: "ScheduledFinishedDate",
            options: {
              filter: true,
              sort: false,
              customBodyRenderLite : (dataIndex) => {
                 const date = this.state.data[dataIndex].scheduledFinishedDate;
                if(date !== null){
                    if(verifyScheduledDate(date)){
                    return <span>{date}</span>
                    }
                    else{
                    return <span className="delay">{date}</span>
                    }
                }
              }
            }
          }
          

    ];

    const { data, page, count, isLoading, rowsPerpage } = this.state;

    const options = {
        filter: true,
        filterType: 'dropdown',
        responsive: 'vertical',
        serverSide: true,
        download: false,
        count: count,
        rowsPerpage: rowsPerpage,
        rowsPerPageOptions: [],
        print: false,
        selectableRowsHideCheckboxes: false,
        selectableRows: "none",
         selectableRowsHeader: false,
        onColumnSortChange: (changedColumn, direction) => console.log('changedColumn: ', changedColumn, 'direction: ', direction),
        onChangeRowsPerPage: numberOfRows => console.log('numberOfRows: ', numberOfRows),
        onChangePage: currentPage => alert("currentPage :"+currentPage),
        onTableChange: (action, tableState) => {
            console.log(action, tableState);


            switch (action) {
                case 'changePage' :
                    this.changePage(tableState.page);
                    break;
                case 'sort' :
                    this.sort(tableState.page);
                    break;
                default:
                    console.log('action not handled.');
            }
        }
      };

      const addComposeModal = () => this.setState({addComposeModal : false});
      const editModal = () => this.setState({editShow: false });
      const openProfileModal = () => this.setState({openProfileModal: false });
      const assignModal = () => this.setState({assignModal : false});
      const messageModal = () => this.setState({messageModal: false});
      const openequipmentInfoModal = () => this.setState({openequipmentInfoModal: false});
      const openCommentModal = () => this.setState({openCommentModal : false});
    return(
        <div className="home">
            <div className="btnContainer">
                <span>New Maintenance</span>
                 <i id="addIcon" className="fa fa-plus-circle" aria-hidden="true" onClick={this.handleAddBtn}></i>
            </div>
            {/* <div>
                 <MUIDataTable title={"List of Maintenance Work Orders"} data={data} columns={columns} options={options} />
            </div> */}
            <MUIDataTable title={<Typography variant="h6">
            List of Maintenance Work Orders
      {isLoading && <CircularProgress size={24} style={{marginLeft: 15, position: 'relative', top: 4}} />}
      </Typography>
      } data={data} columns={columns} options={options} />
            <ComposeModal
                ref={this.ComposeModal}
                show={this.state.addComposeModal}
                onHide={addComposeModal}
                handlemodalclose = {this.handlemodalclose}
       
            />
            <EditModal
                ref={this.EditModal}
                show={this.state.editShow}
                dataId={this.state.editData.id}
                selectedTechnician={this.state.editData.technician}
                selectedEquipment={this.state.selectedEquipment}
                description ={this.state.editData.description}
                priority={this.state.editData.priority}
                onHide={editModal}
                handlemodalclose ={this.handlemodalclose}
            />
            <ProfileModal
            ref={this.EditModal}
            show={this.state.openProfileModal}
            onHide={openProfileModal}
            userPseudo={this.state.pseudoProfile}
            handleMessageModal={this.handleMessageModal}
            handleAssignModal = {this.handleAssignModal}
            handlemodalclose ={this.handlemodalclose}
             />
              <AssignMaintenance
            ref={this.EditModal}
            show={this.state.assignModal}
            onHide={assignModal}
            pseudo={this.state.userPseudo}
            closeUserActionModal ={this.closeUserActionModal}
             />
              <NewMessage
            ref={this.EditModal}
            show={this.state.messageModal}
            onHide={messageModal}
            userPseudo={this.state.userPseudo}
            closeUserActionModal ={this.closeUserActionModal}
             />
              <EquipmentInfoModal
            ref={this.EditModal}
            show={this.state.openequipmentInfoModal}
            onHide={openequipmentInfoModal}
            name={this.state.equipmentName}
             />
             <CommentModal
             ref={this.CommentModal}
             show={this.state.openCommentModal}
             onHide={openCommentModal}
             note={this.state.note}
              />

        </div>
    );
}

}