نیلوفر حریرچیان
5 سال پیش توسط نیلوفر حریرچیان مطرح شد
11 پاسخ

صفحه بندی کردن در react

سلام دوستان
من یه پروژه ری اکت دارم که یه table داره، میخوام pagination رو handle کنم که هر بار مثلا 20 تا داده نشون بده بزنم رو صفحه ی بعد 20تای بعدی این کار رو کجای پروژه و چگونه انجام بدم، لطفا راهنماییم کنید


ثبت پرسش جدید
محسن بستان
تخصص : Senior Backend Developer
@mohsenbostan 5 سال پیش مطرح شد
Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش آپدیت شد
1

https://ant.design/components/table/#header
خودم به تازگی با این سایت آشنا شدم و کامپوننت های فوق العاده خوبی داره. برای table ها ویژگی pagination رو هم قرار داده و optional میتونین اون رو تنظیم کنید. برای table لینک رو قرار دادم


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 5 سال پیش مطرح شد
نیلوفر حریرچیان
تخصص : Front End Developer
@niloofarharirchian90 5 سال پیش مطرح شد
0

@parastooebrahimi
از کامپوننت datatable ش استفاده کردی؟ بقیش در میاد ولی این یدونه خیلی سخته 😔😔😔


Seyed Sadegh
تخصص : برنامه نویس فرانت اند(React js...
@seyedsadegh 5 سال پیش مطرح شد
1

@parastooebrahimi
@niloofarharirchian90
همین طوری که اشاره کردن توی این سایت خیلی راحت جدول مورد نظرتون رو میتونید درست کنید و برای پگینیشن هم فقط کافیه که به صورت بولین (true,false) بهش بدین تا فعال بشه.
یک سایت دیگه ای هم هست که کامپوننت های خوبی داره و این قابلیت رو هم داره.
برای مشاهده MDBOOTSTRAP اینجا کلیک کنید
برای مشاهده ant design اینجا کلیک کنید


Seyed Sadegh
تخصص : برنامه نویس فرانت اند(React js...
@seyedsadegh 5 سال پیش مطرح شد
0

@niloofarharirchian90
من تجربه کار با این وبسایت رو دارم اگر سوالی دارین بپرسین


نیلوفر حریرچیان
تخصص : Front End Developer
@niloofarharirchian90 5 سال پیش مطرح شد
0

@sm.sadeghzadeh82
من به همچین table ی نیاز دارم طبق source ی که گذاشه میرم جلو ولی یه صفحه سفید خالی بر میگردونه
ممنون میشم کمکم کنید


Seyed Sadegh
تخصص : برنامه نویس فرانت اند(React js...
@seyedsadegh 5 سال پیش مطرح شد
0

@niloofarharirchian90
اول از همه مطمئن شید که پکیج های نصبی antdesign رو نصب کرده باشین و ایمپورت ها رو هم کرده باشین.
اگر امکان داره نمونه کدتون رو ارسال می کنید؟


نیلوفر حریرچیان
تخصص : Front End Developer
@niloofarharirchian90 5 سال پیش آپدیت شد
0
 state={
    callReports:[],
  }

  componentDidMount(){
    axios.get('https://jsonplaceholder.ir/posts').then(response=>{
        this.setState({callReports:response.data.splice(0,4)})
    })
}

  render(){
    return(
        <div>
          {
            this.state.callReports.map(y=> <Test key={y.id} {...y}/>)
          }
        </div>
    )
  }

دیتایی که از api میگیرم رو ریختم تو استیت callReports پاس میدم به کامپوننت Test

render(){  
let {userId, body, title}= this.props;

return(
    <MDBDataTable
      striped
      bordered
      hover
      data={userId, body, title}
    />
)

}

ولی چیزی نشون نمیده، چجوری دیتا رو تو هر ستون بگیرم؟


پشتیبانی راکت
@roocketir 5 سال پیش مطرح شد
1

لطفا عنوان گفتگوهای بعدی خودتون رو به شکل فارسی انتخاب کنید در صورت تکرار مجبور به حذف گفتگو خواهیم بود
این عنوان به فارسی برگردونده شد
سپاس از اینکه به این موضوع توجه می‌کنید .


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش آپدیت شد
0

اگر درست متوجه شده باشم شما از MDBDataTable استفاده کردید پس دیگه نیاز به map کردن ندارید.کامپوننت های آماده ای مثل اینها یه سری props دارن خودشون که اون ها رو با اطلاعات خودتون باید آپدیت کنید و دیگه کار دیگه ای نیاز نیست. مثلا اینجا کافیه دیتای این کامپوننت رو با دیتای خودتون که از طریق axios گرفتین جایگزین کنید.

data=this.state.callReoprts

اون کامپوننت test رو هم نیاز ندارید.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام