رها نامی
3 هفته پیش توسط رها نامی مطرح شد
16 پاسخ

مرتب کردن ستون های جدول در ری اکت

 تصویر

سلام من مشابه این جدول را در پروژه تمرینی ری اکت دارم و میخواهم مثلا وقتی بر حسب صعودی نام مرتب کردم وبعد از آن بر حسب سن نزولی مرتب کردم از اول جدول را مرتب نکند و بر حسب جواب قبلی مرتب کند.


ثبت پرسش جدید
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 3 هفته پیش مطرح شد
0

درود خوبی...
پیوند زیر:
https://roocket.ir/discuss/11131


محمد حسین
تخصص : mevn stack
@saghari 3 هفته پیش مطرح شد
0

درست منظور رو نگرفتم ولی فکر کنم باید اون آرایه رو state تعریفش کنی و وقتی با نام مرتبش کرد اون رو با مرتب شده ست کنی اونوقت وقتی با سن خواست مرتب شه روی اون که با نام مرتب شده ست میشه
سورست رو بذار بهتر بشه فهمید


رها نامی
@Raahaa 3 هفته پیش آپدیت شد
0
` const handleSortName = (e) => {  
const sortedData = \[...sortedArray\].sort((a, b) =>  
e.target.value === "ascending"  
? a.name.localeCompare(b.name, "fa")  
: b.name.localeCompare(a.name, "fa")  
);  
setSort(sortedData);  
};

const handleSortTitle = (e) => {  
const sortedData = \[...sortedArray\].sort((a, b) =>  
e.target.value === "asc"  
? a.title.localeCompare(b.title, "fa")  
: b.title.localeCompare(a.title, "fa")  
);  
setSort(sortedData);  
};

const handleSortAge = (e) => {  
const sortedData = \[...sortedArray\].sort((a, b) =>  
e.target.value === "asc" ? a.age - b.age : b.age - a.age  
);  
setSort(sortedData);  
};`

ممنون دوستان.این کدی هست که من برای مرتب کردن سن و عنوان و نام نوشتم اما درست کار نمیکند


محمد حسین
تخصص : mevn stack
@saghari 3 هفته پیش مطرح شد
0

چه اروری میگیرید؟ روی همون sort مپ میزنی دیگه؟


رها نامی
@Raahaa 3 هفته پیش مطرح شد
0

بله روی همون sort،مپ میزنم .ارور نمیگیرم ولی مثلا وقتی بر حسب نام مرتب کردم و دوباره بر حسب سن مرتب میکنم از اول جدول را مرتب میکند نه بر حسب جدول مرتب شده قبلی


محمد
@mo-hammad 3 هفته پیش آپدیت شد
0

آیا مطمئن هستید که type سن که برای sort میدید Number هست ؟ (اگر مشکل شما اینه که سن رو درست sort نمیکنه)


رها نامی
@Raahaa 3 هفته پیش مطرح شد
0

بله مطمینم که type سن number هست


محمد
@mo-hammad 3 هفته پیش آپدیت شد
0

ببینم این sortedArray آیا state هست و آیا setSort در واقع setter این sortedArray هست در این استیت ؟
نمایش جدولت در پایان بر اساس sortedArray هست دیگه درسته؟
خب در نهایت اینکه آیا تو نیاز داری مگه آپشن های سورت کاربر در استیت ذخیره بشه؟ خب در لحظه صرفا میخوای نتایج سورت رو ببینی دیگه .
چرا نمیای یک متغیر let در کامپوننت تعریف کنی بعد در هر روشی که کاربر سورت میکنه صرفا اون متغیر Let رو مقدارش رو برابر با نتیجه سورت شده قرار بدی و در نهایت از این متغیر برای رندر لیستت استفاده کن مقدار initial یا همون اولیه اش هم روی استیت آرایه لیست کاربرانت بزار.


رها نامی
@Raahaa 3 هفته پیش مطرح شد
0

بله.همین که شما گفتین دقیقا درسته


محمد
@mo-hammad 3 هفته پیش آپدیت شد
0

من دقیقا کدتون رو ندارم که ببینم چه کردی ای کاش استیت هات رو هم میدیدم که چطور تعریف شدن و کلا ساختار کامپوننت رو . اما من جواب قبلی خودم رو ویرایش کردم . یک راه حل بهت دادم تست کن


رها نامی
@Raahaa 3 هفته پیش مطرح شد
0
export default function Users() {
  const[sortedArray,setSort] = useState(data);

  const { page } = useParams();

  const navigate = useNavigate();

  const itemsPerPage = 10;

  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;

  const handleSortName = (e) => {
    const sortedData = [...sortedArray].sort((a, b) =>
      e.target.value === "ascending"
        ? a.name.localeCompare(b.name, "fa")
        : b.name.localeCompare(a.name, "fa")
    );
    setSort(sortedData);
  };

  const handleSortTitle = (e) => {
    const sortedData = [...sortedArray].sort((a, b) =>
      e.target.value === "asc"
        ? a.title.localeCompare(b.title, "fa")
        : b.title.localeCompare(a.title, "fa")
    );
    setSort(sortedData);
  };

const handleSortAge = (e) => {
  const sortedData = [...sortedArray].sort((a, b) =>
    e.target.value === "asc" ? a.age - b.age : b.age - a.age
  );
  setSort(sortedData);
};

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = sortedArray.slice(indexOfFirstItem, indexOfLastItem);

  return (
    <div
      className="flex justify-between  w-full"
      style={{ width: "100%", height: "100%" }}
    >
      <div className="flex w-5/6 flex-col   items-end">
        <h1 className="font-bold p-4 text-xl">کاربران</h1>
        <div className="flex  justify-between  w-full p-4 items-center">
          <div className="flex">
            <button className="bg-yellow-500 text-white p-2 rounded-md  cursor-pointer">
              بازگشت به حالت اولیه
            </button>
            <button className="bg-blue-400 text-white p-2 rounded-md ml-4 cursor-pointer">
              افزودن کاربر
            </button>
          </div>
          <p>لیست تمام کارکنان</p>
        </div>
        <p className="p-2">فیلتر</p>
        <div className="flex  ">
          <div className="flex flex-col mr-4">
            <label>مرتب کردن بر اساس وضعیت</label>
            <select className="border text-right">
              <option>انتخاب گزینه ها</option>
              <option>فعال به غیر فعال</option>
              <option> غیرفعال به فعال</option>
            </select>
          </div>

          <div className="flex flex-col mr-4">
            <label>مرتب کردن بر اساس عنوان</label>
            <select className="border text-right" onChange={handleSortTitle}>
              <option>انتخاب گزینه ها</option>
              <option value='asc'> (حروف الف - ی) نام ها</option>
              <option value='desc'>(حروف ی - الف) نام ها</option>
            </select>
          </div>

          <div className="flex flex-col mr-4">
            <label>مرتب کردن بر اساس نام</label>
            <select className="border text-right" onChange={handleSortName}>
              <option>انتخاب گزینه ها</option>
              <option value="ascending"> (حروف الف - ی) نام ها</option>
              <option value="descending">(حروف ی - الف) نام ها</option>
            </select>
          </div>
        </div>
        <div className="mt-4 flex">
          <div className="flex flex-col mr-4">
            <label>مرتب کردن بر اساس جنسیت</label>
            <select className="border text-right" >
              <option>انتخاب گزینه ها</option>
              <option value="female">زن به مرد</option>
              <option value="male">مرد به زن</option>
            </select>
          </div>
          <div className="flex flex-col mr-4">
            <label> مرتب کردن بر اساس سن</label>
            <select className="border text-right" onChange={handleSortAge}>
              <option >انتخاب گزینه ها</option>
              <option value="asc">صعودی</option>
              <option value="desc">نزولی</option>
            </select>
          </div>
        </div>

        <div className="flex flex-col mr-4 mt-2">
          <label className="text-right mb-2">جستجو</label>
          <input type="text" className="border w-full" />
        </div>

        <div>
          <p className="text-right mr-2">عملیات</p>
          <div className="flex flex-end">
            <div className="flex flex-col">
              <label className=" mr-1 mb-2 mt-2 text-right">
                عملیات بر روی کاربران
              </label>
              <div className="flex">
                <button className="mr-2 bg-yellow-500 text-white rounded-md p-2">
                  انجام عملیات
                </button>
                <select className="mr-2">
                  <option>انتخاب گزینه ها</option>
                  <option>اضافه کردن کاربر</option>
                  <option>حذف کردن کاربر</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <div className="flex flex-col w-full">
          <div>
            <table className="border-collapse w-full mb-4">
              <thead className="mr-8">
                <tr>
                  <th>عملیات</th>
                  <th>وضعیت</th>
                  <th>سن</th>
                  <th>جنسیت</th>
                  <th>ایمیل</th>
                  <th>عنوان</th>
                  <th>نام</th>
                  <th>انتخاب</th>
                </tr>
              </thead>
              <tbody>
                {currentItems.map((item, index) => (
                  <tr key={index} className="border-b mr-1">
                    <td>
                      <button className="bg-red-500 text-white p-2 rounded-sm cursor-pointer">
                        حذف
                      </button>
                      <button className="bg-blue-500 text-white p-2 rounded-sm cursor-pointer ml-2">
                        ویرایش
                      </button>
                    </td>
                    <td>{item.status}</td>
                    <td>{item.age}</td>
                    <td>{item.gender}</td>
                    <td>{item.email}</td>
                    <td>{item.title}</td>
                    <td>{item.name}</td>
                    <td className="mr-1">
                      <input type="checkbox" />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="flex items-center">
            <div className="flex space-x-2 mr-8">
              <button
                onClick={() => navigate(`/users/${currentPage + 1}`)}
                className={`border p-2 hover:bg-blue-500 hover:text-white ${
                  currentPage === 11 ? "bg-white text-gray-400" : ""
                }`}
                disabled={currentPage === 11}
              >
                بعدی
              </button>
              <button
                onClick={() => navigate(`/users/11`)}
                className="border p-2 hover:bg-blue-500 hover:text-white"
              >
                11
              </button>
              <button
                onClick={() => navigate(`/users/10`)}
                className="border p-2 hover:bg-blue-500 hover:text-white "
              >
                10
              </button>
              <button
                onClick={() => navigate(`/users/9`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                9
              </button>
              <button
                onClick={() => navigate(`/users/8`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                8
              </button>
              <button
                onClick={() => navigate(`/users/7`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                7
              </button>
              <button
                onClick={() => navigate(`/users/6`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                6
              </button>
              <button
                onClick={() => navigate(`/users/5`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                5
              </button>
              <button
                onClick={() => navigate(`/users/4`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                4
              </button>
              <button
                onClick={() => navigate(`/users/3`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                3
              </button>
              <button
                onClick={() => navigate(`/users/2`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                2
              </button>
              <button
                onClick={() => navigate(`/users`)}
                className="border p-2  hover:bg-blue-500 hover:text-white"
              >
                1
              </button>
              <button
                onClick={() => navigate(`/users/${currentPage - 1}`)}
                className={`border p-2 hover:bg-blue-500 hover:text-white ${
                  currentPage === 1 ? "bg-white text-gray-400" : ""
                }`}
                disabled={currentPage === 1}
              >
                قبلی
              </button>
            </div>
            <p>نمایش {startIndex+1} تا {endIndex} از 110 نتیجه موجود</p>
          </div>
        </div>
      </div>

      <div className=" w-64 bg-blue-950 text-white flex flex-col cursor-pointer">
        <h1 className=" p-2 text-right">مدیریت کارکنان</h1>

        <Link
          to="/dashboard"
          className="flex justify-end  items-center p-2  hover:bg-blue-800 "
        >
          <p className="mr-2">داشبورد</p>
          <MdDashboard />
        </Link>
        <Link
          to="/users"
          className="flex justify-end items-center p-2 hover:bg-blue-800"
        >
          <p className="mr-2">کاربران</p>
          <FaUsersRectangle />
        </Link>
      </div>
    </div>
  );
}

ممنون از پاسختون.این ساختار کلی component هست


محمد
@mo-hammad 3 هفته پیش آپدیت شد
0

به نظرت ممکن نیست بخاطر این باشه استیت ها async هستن ؟ میای یه تست بگیری ببینی بصورت callback عمل کنی درست میشه یا نه لطفا ؟

setSort(prevSortedArray => sortedData);

این کار رو که بالا نوشتم تو همه سورت ها انجام بده به جای این بخش setSort(sortedData);


رها نامی
@Raahaa 3 هفته پیش مطرح شد
0

یعنی دقیقا همین کدی که شما نوشتید رو جایگزین کنم؟ اگر همین هست که جایگزین کردم نشد.بازم ممنون.چند روزه جواب این سوالم رو پیدا نمیکنم


محمد
@mo-hammad 3 هفته پیش مطرح شد
0

همون لحظه که سورت میکنی با react developer tools چک کن ببین در لحظه استیت sortedArray داره سورت میشه و تغییر میکنه ترتیبش تو developer tools


محمد
@mo-hammad 3 هفته پیش آپدیت شد
0

این کار هم یه تست بکن :


let   theSorted= sortedArray   // اینجا

const handleSortAge = (e) => {
  const sortedData = [...sortedArray].sort((a, b) =>
    e.target.value === "asc" ? a.age - b.age : b.age - a.age
  );
theSorted=sortedData  // اینجا
};

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = theSorted.slice(indexOfFirstItem, indexOfLastItem);// اینجا

اینم یه تستی بکن به همون روش let که گفتم . ایده رو از این تیکه که نوشتم بگیر به تست بکن . برای همه سورت هات اینکار رو بکن نه فقط age


رها نامی
@Raahaa 3 هفته پیش آپدیت شد
0

نه sortedArray سورت نمیشه. این کدی که شما نوشتید هم نوشتم نشد. فکر میکنم به خاطر همون async بودن استیت ها هست که شما اشاره کردید و باید از UseEffect استفاده کنم اما نمیدونم به چه صورت؟


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

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