صفحه بندی کردن در react
سلام دوستان
من یه پروژه ری اکت دارم که یه table داره، میخوام pagination رو handle کنم که هر بار مثلا 20 تا داده نشون بده بزنم رو صفحه ی بعد 20تای بعدی این کار رو کجای پروژه و چگونه انجام بدم، لطفا راهنماییم کنید
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
https://ant.design/components/table/#header
خودم به تازگی با این سایت آشنا شدم و کامپوننت های فوق العاده خوبی داره. برای table ها ویژگی pagination رو هم قرار داده و optional میتونین اون رو تنظیم کنید. برای table لینک رو قرار دادم
از پکیج های زیر میتونی استفاده کنی:
https://www.npmjs.com/package/react-paginate
https://www.npmjs.com/package/react-js-pagination
@parastooebrahimi
از کامپوننت datatable ش استفاده کردی؟ بقیش در میاد ولی این یدونه خیلی سخته 😔😔😔
@parastooebrahimi
@niloofarharirchian90
همین طوری که اشاره کردن توی این سایت خیلی راحت جدول مورد نظرتون رو میتونید درست کنید و برای پگینیشن هم فقط کافیه که به صورت بولین (true,false) بهش بدین تا فعال بشه.
یک سایت دیگه ای هم هست که کامپوننت های خوبی داره و این قابلیت رو هم داره.
برای مشاهده MDBOOTSTRAP اینجا کلیک کنید
برای مشاهده ant design اینجا کلیک کنید
@sm.sadeghzadeh82
من به همچین table ی نیاز دارم طبق source ی که گذاشه میرم جلو ولی یه صفحه سفید خالی بر میگردونه
ممنون میشم کمکم کنید
@niloofarharirchian90
اول از همه مطمئن شید که پکیج های نصبی antdesign رو نصب کرده باشین و ایمپورت ها رو هم کرده باشین.
اگر امکان داره نمونه کدتون رو ارسال می کنید؟
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}
/>
)
}ولی چیزی نشون نمیده، چجوری دیتا رو تو هر ستون بگیرم؟
لطفا عنوان گفتگوهای بعدی خودتون رو به شکل فارسی انتخاب کنید در صورت تکرار مجبور به حذف گفتگو خواهیم بود
این عنوان به فارسی برگردونده شد
سپاس از اینکه به این موضوع توجه می‌کنید .
اگر درست متوجه شده باشم شما از MDBDataTable استفاده کردید پس دیگه نیاز به map کردن ندارید.کامپوننت های آماده ای مثل اینها یه سری props دارن خودشون که اون ها رو با اطلاعات خودتون باید آپدیت کنید و دیگه کار دیگه ای نیاز نیست. مثلا اینجا کافیه دیتای این کامپوننت رو با دیتای خودتون که از طریق axios گرفتین جایگزین کنید.
data=this.state.callReoprtsاون کامپوننت test رو هم نیاز ندارید.