---
tags: ohif
---
# fetch header

StudyListWithData.js

  searchForStudies = (searchData = StudyListWithData.defaultSearchData) => {
    const { server } = this.props;

    const filter = {
      patientId: searchData.patientId,
      studyId: searchData.studyId,
      referringPhysicianName: searchData.referringPhysicianName,
      patientName: searchData.patientName,
      accessionNumber: searchData.accessionNumber,
      studyDescription: searchData.studyDescription,
      modalitiesInStudy: searchData.modalities,
      studyDate: searchData.studyDate,
      studyDateFrom: searchData.studyDateFrom,
      studyDateTo: searchData.studyDateTo,
      limit: searchData.rowsPerPage,
      offset: searchData.currentPage * searchData.rowsPerPage,
      birthDate:searchData.birthDate,
      fuzzymatching: searchData.fuzzymatching
    };



      const _queryParams = this.getQIDOQueryParams(filter, server.qidoSupportsIncludeField);
      let url = new URL(server.qidoRoot+'/studies')
      Object.keys(_queryParams).forEach(key => url.searchParams.append(key, _queryParams[key]))


// if (server.supportsFuzzyMatching) {
//       filter.fuzzymatching = true;
//     }

    // TODO: add sorting
    const promise = OHIF.studies.searchStudies(server, filter);
    // Render the viewer when the data is ready
    promise
      .then(async studies => {
          await fetch(url, {
                headers: {
                  Accept: 'application/dicom+json',
                  Authorization: 'Bearer ' + sessionStorage.getItem('userId'),
                }
              }).then(response => {
            this.setState({
              TotalResult:response.headers.get('TotalResult')
            })
              })
        if (!studies) {
          studies = [];
        }

        const { field, order } = searchData.sortData;
        let sortedStudies = studies.map(study => {
          if (!moment(study.studyDate, 'MMM DD, YYYY', true).isValid()) {
            study.studyDate = moment(study.studyDate, 'YYYYMMDD').format(
              'MMM DD, YYYY',
            );
          }
          return study;
        });

        sortedStudies.sort(function (a, b) {
          let fieldA = a[field];
          let fieldB = b[field];
          if (field === 'studyDate') {
            fieldA = moment(fieldA).toISOString();
            fieldB = moment(fieldB).toISOString();
          }
          if (order === 'desc') {
            if (fieldA < fieldB) {
              return -1;
            }
            if (fieldA > fieldB) {
              return 1;
            }
            return 0;
          } else {
            if (fieldA > fieldB) {
              return -1;
            }
            if (fieldA < fieldB) {
              return 1;
            }
            return 0;
          }
        });



        this.setState({
          studies: sortedStudies,
        });
      })
      .finally(()=>{
    this.setState({
      loading:false
    })
      })
      .catch(error => {
        this.setState({
          error: error,
        });
        throw new Error(error);
      });
  };

StudyListWithData.js

          <StudyList
            loading={this.state.loading}
            searchOptions={this.props.searchOptions}
            clearSelect={this.props.clearSelect}
            filters={this.props.filters}

            server={this.props.server}
            studies={this.state.studies}
            TotalResult={this.state.TotalResult}
            studyListFunctionsEnabled={this.props.studyListFunctionsEnabled}
            onImport={this.onImport}
            onSelectItem={this.onSelectItem}
            pageSize={this.rowsPerPage}
            defaultSort={StudyListWithData.defaultSort}
            studyListDateFilterNumDays={
              StudyListWithData.studyListDateFilterNumDays
            }
            onSearch={this.onSearch}
          >

studylist.js

            <PaginationArea
              jumpToPage={this.jumpToPage}
              TotalResult={this.props.TotalResult}
              pageOptions={this.props.pageOptions}
              currentPage={this.state.searchData.currentPage}
              nextPageFunc={this.nextPage}
              prevPageFunc={this.prevPage}
              onRowsPerPageChange={this.onRowsPerPageChange}
              rowsPerPage={this.state.searchData.rowsPerPage}
              recordCount={this.props.studies.length}
            />

PaginationArea.js

renderPage(){
    return(
      this.pages(Math.ceil(this.props.TotalResult/this.props.rowsPerPage))
    )
}

   pages=(num)=>{
    let array=[]
    for (let i = 0; i < num; i++)
     array.push(
       <span
         style={{
         cursor: this.props.currentPage!==i?'pointer':'default', padding: '6px',color:this.props.currentPage===i?'#0DADE2':'#ffffff',display:num>1?'':'none'
         }}
         onClick={()=>this.props.currentPage!==i && this.props.jumpToPage(i)}
     >{i+1}
       </span>
     )
     return array
  }