sasi kiran

1614568473

ReactJs Pagination: How to Page Your Data With ReactJs Pagination?

What is ReactJs Pagination ???
Who doesn’t know what is pagination but let’s start as a naive??? Imagine you are reading a book without having a page number ???, really won’t it be weird if there is no concept of paging. So if your friend asks you how many pages did you finish what will you answer?? Or let’ us take the even worse case, suppose somehow there is an incident happened. And there you lost some pages from your book. And the book had really important information. Then you have no idea which pages or which information even you lost !!! That’s really scary… isn’t it ??
Page not found image
Going back to history, can you believe there used to be a time when books or documents used to be published without paging. Only after 1500 c, it became a common practice to publish the books with the paging option. Woah!!! some genius only would have figured out that !!!???
Genius brain image
Similarly, there is a concept of pagination in the digital world where we divide a document into the discrete pages/electronic pages. These electronics pages rendered on a web browser and are called as web pages. Also, these pages and the content in these pages which is supposed to be rendered are related to each other using reactjs pagination.
Ways of rendering data

Progressive loading :
For the rendering of data we also have an option of progressive loading instead of reactjs pagination. A very successful example of progressive loading is Facebook or Instagram newsfeed where we have an option of infinite scroll and the news feed keeps updating and renders or better say exposes as much as information they can deliver to end-user.
Progressive loading in ReactJs Pagination

ReactJs Pagination :

ReactJs Pagination in goole
But pagination has its own importance in terms of filtering and showing only relevant data, for example, the Google search engine. So reactjs pagination becomes crucial when a user is searching for particular information and not consuming any random information. There is an enormous number of inbuilt libraries are available to handling pagination in web development, especially in case of React also there are a huge number resources available which you can use directly to handle pagination for your application. Some of the NPM and other pagination libraries available are
react-js-pagination
react-paginate
react-bootstrap/Pagination
It is also very ideal to use these existing libraries instead of re-writing your own, same as there is no need of re-inventing the wheel instead you can focus on other things. But at the same time, it is also very important to know what is happening behind the scenes so that you can build and customize your application as per your need without compromising any requirements. There is also a possibility of different logics being used for different reactjs pagination package available. For the implementation of react-pagination into your application read this great article react-jw-pagination. Here I will be explaining about react-pagination with the help of code and some calculation.
getPager(totalItems, currentPage, pageSize) {

// default to first page

   currentPage = currentPage || 1;


   // default page size is 10

   pageSize = pageSize || 10;


   // calculate total pages

   var totalPages = Math.ceil(totalItems / pageSize);


   var startPage, endPage;

   if (totalPages <= 10) {

       // less than 10 total pages so show all

       startPage = 1;

       endPage = totalPages;

   } else {

       // more than 10 total pages so calculate start and end pages

       if (currentPage <= 6) {

           startPage = 1;

           endPage = 10;

       } else if (currentPage + 4 >= totalPages) {

           startPage = totalPages - 9;

           endPage = totalPages;

       } else {

           startPage = currentPage - 5;

           endPage = currentPage + 4;

       }

   }



   // calculate start and end item indexes

   var startIndex = (currentPage - 1) * pageSize;

   var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);



   // create an array of pages to ng-repeat in the pager control

   var pages = [...Array((endPage + 1) - startPage).keys()].map(i => startPage + i);


   // return an object with all pager properties required by the view

   return {

       totalItems: totalItems,

       currentPage: currentPage,

       pageSize: pageSize,

       totalPages: totalPages,

       startPage: startPage,

       endPage: endPage,

       startIndex: startIndex,

       endIndex: endIndex,

       pages: pages

   };

}
Let us take some example to understand the above code.
Case 1:
Assume current page = 1 , page size = 10 , total item = 160 ; then total pages to be rendered = Math.ceil(160/10) = 16; since current page = 1 and it has to render a total of 10 pages so according to the very first condition that is current page <= 6 follows. Which implies start page = 1; end page = 10
Case 2:
Assume current page = 12 , page size = 10 , total item = 160 ; then total pages to be rendered = Math.ceil(160/10) = 16; since current page = 12 and it still has to render a total of 10 pages so according to the second condition that is current page +4 (12+4 = 16) >= total no of pages(16) satisfies which implies start page = 16-9 = 7 end page = 16
Case 3:
Assume current page = 7 , page size = 10 , total item = 160 ; then total pages to be rendered = Math.ceil(160/10) = 16; now current page = 7 and it still has to render total of 10 pages so according to the third condition that is current page +4 = (7+4 = 11) < = total no of pages(16) satisfies which implies start page = 11-5 = 6 React pagination library can be used directly for paging functionality for any list of items. The required props here are an array of items of the list to be rendered and a callback function onChange which informs the parent component about the page change. The default value for the current page is 1, items per page are 10 and page range to be displayed is 5. There are a lot of other packages available which you can use as per your requirements. end page = 11+ 4 = 15 Reactjs pagination library can be used directly for paging functionality for any list of items. The required props here are an array of items of the list to be rendered and a callback function onChange which informs the parent component about the page change. The default value for the current page is 1, items per page are 10 and page range to be displayed is 5. A react component using a pagination component, also the following code is taken from official NPM documentation of react-pagination. For more details please refer react-js-pagination.
import React, { Component } from “react”;

importReactDOMfrom"react-dom";

importPaginationfrom"react-js-pagination";

require(“bootstrap/less/bootstrap.less”);

class App extends Component {

constructor(props) {

super(props);

this.state= {

 activePage:15

};

}

handlePageChange(pageNumber) {

console.log(active page is ${pageNumber});

this.setState({activePage: pageNumber});

}

render() {

return (

<Pagination

     activePage={this.state.activePage}

     itemsCountPerPage={10}

     totalItemsCount={450}

     pageRangeDisplayed={5}

     onChange={::this.handlePageChange}

/>

);

}

}

ReactDOM.render(, document.getElementById(“root”));
There are a lot of other packages available which you can use as per your requirements and customize it too. If you have any doubts feel free to ask in the comment section. If you like what we are doing, please follow Us on Facebook | Twitter | LinkedIn.
Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced React developers for your esteemed project today. ReactJS Development Services
Let CronJ Assist You…! Thank you !!!

#reactjs

What is GEEK

Buddha Community

ReactJs Pagination: How to Page Your Data With ReactJs Pagination?
Siphiwe  Nair

Siphiwe Nair

1620466520

Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Gerhard  Brink

Gerhard Brink

1620629020

Getting Started With Data Lakes

Frameworks for Efficient Enterprise Analytics

The opportunities big data offers also come with very real challenges that many organizations are facing today. Often, it’s finding the most cost-effective, scalable way to store and process boundless volumes of data in multiple formats that come from a growing number of sources. Then organizations need the analytical capabilities and flexibility to turn this data into insights that can meet their specific business objectives.

This Refcard dives into how a data lake helps tackle these challenges at both ends — from its enhanced architecture that’s designed for efficient data ingestion, storage, and management to its advanced analytics functionality and performance flexibility. You’ll also explore key benefits and common use cases.

Introduction

As technology continues to evolve with new data sources, such as IoT sensors and social media churning out large volumes of data, there has never been a better time to discuss the possibilities and challenges of managing such data for varying analytical insights. In this Refcard, we dig deep into how data lakes solve the problem of storing and processing enormous amounts of data. While doing so, we also explore the benefits of data lakes, their use cases, and how they differ from data warehouses (DWHs).


This is a preview of the Getting Started With Data Lakes Refcard. To read the entire Refcard, please download the PDF from the link above.

#big data #data analytics #data analysis #business analytics #data warehouse #data storage #data lake #data lake architecture #data lake governance #data lake management

Cyrus  Kreiger

Cyrus Kreiger

1618039260

How Has COVID-19 Impacted Data Science?

The COVID-19 pandemic disrupted supply chains and brought economies around the world to a standstill. In turn, businesses need access to accurate, timely data more than ever before. As a result, the demand for data analytics is skyrocketing as businesses try to navigate an uncertain future. However, the sudden surge in demand comes with its own set of challenges.

Here is how the COVID-19 pandemic is affecting the data industry and how enterprises can prepare for the data challenges to come in 2021 and beyond.

#big data #data #data analysis #data security #data integration #etl #data warehouse #data breach #elt

Macey  Kling

Macey Kling

1597579680

Applications Of Data Science On 3D Imagery Data

CVDC 2020, the Computer Vision conference of the year, is scheduled for 13th and 14th of August to bring together the leading experts on Computer Vision from around the world. Organised by the Association of Data Scientists (ADaSCi), the premier global professional body of data science and machine learning professionals, it is a first-of-its-kind virtual conference on Computer Vision.

The second day of the conference started with quite an informative talk on the current pandemic situation. Speaking of talks, the second session “Application of Data Science Algorithms on 3D Imagery Data” was presented by Ramana M, who is the Principal Data Scientist in Analytics at Cyient Ltd.

Ramana talked about one of the most important assets of organisations, data and how the digital world is moving from using 2D data to 3D data for highly accurate information along with realistic user experiences.

The agenda of the talk included an introduction to 3D data, its applications and case studies, 3D data alignment, 3D data for object detection and two general case studies, which are-

  • Industrial metrology for quality assurance.
  • 3d object detection and its volumetric analysis.

This talk discussed the recent advances in 3D data processing, feature extraction methods, object type detection, object segmentation, and object measurements in different body cross-sections. It also covered the 3D imagery concepts, the various algorithms for faster data processing on the GPU environment, and the application of deep learning techniques for object detection and segmentation.

#developers corner #3d data #3d data alignment #applications of data science on 3d imagery data #computer vision #cvdc 2020 #deep learning techniques for 3d data #mesh data #point cloud data #uav data

Uriah  Dietrich

Uriah Dietrich

1618457700

What Is ETLT? Merging the Best of ETL and ELT Into a Single ETLT Data Integration Strategy

Data integration solutions typically advocate that one approach – either ETL or ELT – is better than the other. In reality, both ETL (extract, transform, load) and ELT (extract, load, transform) serve indispensable roles in the data integration space:

  • ETL is valuable when it comes to data quality, data security, and data compliance. It can also save money on data warehousing costs. However, ETL is slow when ingesting unstructured data, and it can lack flexibility.
  • ELT is fast when ingesting large amounts of raw, unstructured data. It also brings flexibility to your data integration and data analytics strategies. However, ELT sacrifices data quality, security, and compliance in many cases.

Because ETL and ELT present different strengths and weaknesses, many organizations are using a hybrid “ETLT” approach to get the best of both worlds. In this guide, we’ll help you understand the “why, what, and how” of ETLT, so you can determine if it’s right for your use-case.

#data science #data #data security #data integration #etl #data warehouse #data breach #elt #bid data