Paging shows 'There is no data to display' when data is exists

[iamyardem]

Steps to reproduce:

1. Create dataSource with 30 elements for table rows.
2. Bind it to bootstrap table which has 10 items per page by default
3. Go to 3-rd page (last page)
4. Delete 20 elements from dataSource invoking some function (e.g. apply some filtering or something)
5. Table will show a message 'There is no data to display'

It looks like paging just keep observing 3-rd page expecting that dataSource still has 30 elements or more. Maybe need to reset page to the 1-st page or default page in case of changing dataSource?

Is there any quick solution we can use with existing api? Or maybe I am doing something wrong... Anyway, looking forward your reply. Thanks!

If you need more details, I'll try to provide some examples.

[AllenFang]

It's seem like a bug, did you use TableDataSet to wrap your data? if yes, you can try use state to test it again, maybe it's a bug about TableDataSet. Anyway, if you can, give me some examples :) Thanks a lots.

[iamyardem]

I am using simple array without any wraps. I've opened state of PaginationList component in React DevTools and saw that after reducing array size the currentPage property in component state is out of array size

[AllenFang]

OK, thanks, I'll fix it in recent.

[AllenFang]

@iamyardem, about your 4th item(Delete 20 elements from dataSource invoking some function (e.g. apply some filtering or something)), you means you delete 20 elements by yourself function? because I try your scenario, I got some error, not 'There is no data to display'.

That my steps:

1. init some data in react state
2. then render table with that state data
3. change to last page
4. slice data to half and set to state
5. it will trigger render but got some error

Anyway, I'll fix the problem but I'm not sure my problem is actually you encountered before.

[iamyardem]

@AllenFang in my case we are using property passed from redux to component as data source. and we have let say a search button which calls a function which searches data by some criteria and bind new result to component property. So when this property changes after clicking button, render method bind new result to table grid again, but after render, pagination keeps observing last visited page despite the array size is less then page-index*page-elem-count

[AllenFang]

I understand, thanks :)

[AllenFang]

@iamyardem, could you try the newest version v1.2.8 again? I did some change, but I'm not sure this patch whether could solve

[iamyardem]

@AllenFang thanks, it looks like it is fixed now

[AllenFang]

really?

[AllenFang]

if change to page one when data reload, I need to do some little improvements, because page one button does not actived

[iamyardem]

anyway it redirects to 1-st page as expected and no data loss which is great :)

[AllenFang]

Great, I'll do more improvements, thank you :)

[iamyardem]

thank you too for your effort :)

[the-cult-of-jarvis]

Are you sure that this issue is closed? I am still getting this error when displaying data with pagination. Without pagination, however, the error is not displayed.

My data is over 100 entries big. The code is as follows:

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { connect } from 'react-redux';

const allowed = ['P','A','B','C','G','R','H','H/G','H/A','H/B','H/C','H/A/B','H/A/C','H/A/B/C','H/A/C','H/C/A','A/B','B/C','A/C','C/A','G/C','A/G','R/A','R/B','R/C','R/G','R/A/B','R/B/C','R/C/A','R/A/B/C','X','L','LOP','N','CO','CH'];

const cellEditProp = {
  mode: 'dbclick',  
  blurToSave: true,
  afterSaveCell: onAfterSaveCell
};

function onAfterSaveCell(row, cellName, cellValue) {  
  if(allowed.indexOf(cellValue) === -1){
  	row[cellName]='';
  }
}

function attendanceValidator(value) {
  const response = { isValid: true, notification: { type: 'success', msg: '', title: '' } };
  if(allowed.indexOf(value)=== -1){
	console.log('error');
	response.isValid = false;
	response.notification.type='error';
	response.notification.title='Invalid Attendance';
  }
  else{
  	console.log('valid');
  }
  return response;
}

@connect(
  state => ({
    widgets: state.widgets.data
  }))
export default class AttendanceForm2 extends React.Component {
	constructor(props){
		super(props);
	}
	createCustomToolBar = props => {
    return (
      	<div style={ { margin: '15px' } }>
        	{ props.components.btnGroup }
        	<div className='col-xs-8 col-sm-4 col-md-4 col-lg-2'>
          	{ props.components.searchPanel }
        	</div>
      	</div>
    	);
  	}

	render() {
		const selectRow = {
		  mode: 'checkbox',
		  showOnlySelected: true
		};
		const options = {
		  toolBar: this.createCustomToolBar
		};
		return (
		  <BootstrapTable data={ this.props.widgets } striped hover condensed
		  	options={options} exportCSV search
		    cellEdit={ cellEditProp }
		  	pagination>
		    <TableHeaderColumn editable={ false } width='150' dataField='id' isKey>ID</TableHeaderColumn>
		    <TableHeaderColumn editable={ false } width='150' dataField='eid'>Employee ID</TableHeaderColumn>
		    <TableHeaderColumn editable={ false } width='150' dataField='ename'>Employee Name</TableHeaderColumn>
		    <TableHeaderColumn editable={ false } width='150' dataField='designation'>Designation</TableHeaderColumn>
		    <TableHeaderColumn width='150' dataField='attendance'
		    	editable={ { type: 'textarea', validator: attendanceValidator } }
		    	editColumnClassName='editing-jobsname-class'
		    	invalidEditColumnClassName='invalid-jobsname-class'
		    	>Attendance</TableHeaderColumn>
		    <TableHeaderColumn width='150' dataField='remarks'>Remarks</TableHeaderColumn>
		  </BootstrapTable>
		);
	}
}

[AllenFang]

I am still getting this error

what kind of error?

and I just check it in my local with same configuration, it work well. so maybe please provide more information if you have

[Anima-t3d]

@saisivaram94 did you update your package successfully? My issue #1232 was resolved for me after I updated to the latest version.

[AllenFang]

sure, please upgrade to newest version. thanks @Anima-t3d

[the-cult-of-jarvis]

@AllenFang - I am so so sorry for the late reply. I had some urgent deadlines to meet at work, so I couldn't make time.

I am attaching the snapshots of both the scenarios. In one, I am using pagination and in the other, I am not. As you can see, with the paginated display, I get no search results. But in the non-paginated version, I get the exact search result. Moreover, after clearing the search field in the paginated version, I do not get the original table back. By that I mean, if I search anything when I am on page 1, then after clearing the search field I do not get the data on page 1 back. I need to load another page and then again come back to Page 1 to get the data.

@Anima-t3d - I installed this package just 2 days ago, the same day that I made the comment. I am running v3.2.0

[the-cult-of-jarvis]

Ok. I updated the package now and it seems to be working fine.
Thank you so much, @AllenFang and @Anima-t3d . :)