none
Datatable data is disappearing when i moved to one tab to another in SPFX react webpart RRS feed

  • Question

  • I have 2 tabs in my SPFX react webpart. In my first tab i used the datatable and see the below code.

    -------------------------------------------------------------------------------------------------------------------------

    pnp.sp.web.lists.getByTitle(keyUserList).items.filter("Title eq "+currentPageName+"").getAll().then(values => {
    var jsonArray = values.map(function (i) {
    return [
    i.keyuser,
    i.usingOrg,
    i.usingSubOrg,
    i.Details
    ];
    });
    var table = $(this.refs.table).DataTable({
    data: jsonArray,
    columns: [
    { title: "Key User" },
    { title: "Using Organization" },
    { title: "Using Sub Organization" },
    { title: "Details" },
    ]
    });
    });

    -------------------------------------------------------------------------------------------------------------------------

    <div >
    <div >
    <table ref='table' className="stripe dataTable">
    </table>
    </div>
    </div>

    --------------------------------------------------------------------------------------------------------------------

    ----------------------------------------------------------------------------------------------------------------

    At the time of page loading i am able to see the data but if i click another tab 'operations' and coming back to 'About' tab dataTable is not showing as shown in below


    Tuesday, December 3, 2019 6:48 AM

All replies

  • Hi Rajesh,

    Please load the data again when tabs selected.

    If you use jQuery tabs, please check the example here:

    http://jsfiddle.net/queryj/CnEUh/1/

    Best regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, December 4, 2019 2:14 AM
    Moderator
  • I am using PiviotItem in reactJS SPFX webpart.

    At the time of first time loading the datatable displaying all the data in one page instead of having pagination.

    Did i miss anything?

    Wednesday, December 4, 2019 8:05 AM
  • Hi Rajesh,

    We can add onLinkClick event in Pivot control, and load data in the event function.

    Example:

    <Pivot onLinkClick={this.onLinkClick}>
    	<PivotItem headerText="Pivot1"></PivotItem>
    	<PivotItem headerText="Pivot2"></PivotItem>
    </Pivot>
    public onLinkClick(item: PivotItem): void {
    	var headerText=item.props.headerText;
    	//get list data
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, December 4, 2019 9:01 AM
    Moderator