הוסטס - פורום אחסון האתרים הגדול בישראל - הצגת מידע בטבלה כולל סינון

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - הצגת מידע בטבלה כולל סינון (https://hosts.co.il/forums/showthread.php?t=89436)

הצגת מידע בטבלה כולל סינון

שלום,

אני מפתח מערכת מסוימת לצבא. המערכת אמורה להציג מידע בטבלה מסודרת ולאפשר סינון בכל עמודה כמו Excel (מצורפת תמונה).

כרגע, מצאתי כמה סקריפטים שמאפשרים סינון מידע - אבל בגלל כמות המידע (אלפי רשומות), הסקריפט נטען לאט נורא והנתונים נשלפים בצורה איטית - מה שגורם לזמן עלייה של כמעט 10 שניות.

למישהו יש רעיון איך אפשר להציג תכנים בטבלה ולאפשר סינון מרובה בחירה בלי לתקוע את העמוד ל 10 שניות ויותר בכל פעם?

http://www.tukim.us/excel.jpg

תודה מראש על העזרה!

ניסית לעבוד עם סינון בצד שרת?
או יותר נכון ביצוע שליפה חדשה עבור כל סינון.
נכון שלרוב זה טיפשי וחכם יהיה לשלוף את כל המידע ולסנן אותו על הקליינט.
אבל אם אתה אומר שאתה לא מצליח להגיע לביצועים טובים על הקליינט - נסה לסנן באמצעות ה-DB תוך שימת דגש על אינדקסים מתאימים.

אני מסנן באמצעות צד שרת - אבל צריך:

א) לבחור את הנתונים שאני רוצה לסנן - זה בהכרח מתבצע בצד-קליינט - אני צריך שהמשתמש יסנן את הנתונים הרלוונטיים אליו..
ב) להציג את הנתונים לסינון - להדפיס את כל המסד (לצורך העניין) ולתת למשתמש לבצע את הפעולות בסעיף א' - לבחור מה לסנן.

הסינון עצמו מתבצע בצד שרת ורק מה שסונן נשלף. הלוואי וזו הייתה הבעייה שלי.. :(

איך נראות השאילתות שלך?

SELECT רגיל ונכנס ל <option> לצורך הצגה.

מה זה לoption?
איך אתה מסנן את המידע? like? regex? או השוואה רגילה?
כמו כן, איך הטבלאות נראות? הן מאונדקסות?
על איזה מסד נתונים אתה רץ?

את כל הנתונים שאני שולף אני מכניס ל

PHP קוד:


		
			
<select name="....">
~ loop ~
<option>VALUE FROM DB</option>
~ end loop ~
.....
</select>

פשוט לחלוטין כדי להציג את הנתונים. שולף באמצעות SELECT, ואם יש סינון - מוסיף LIKE. לא משהו רציני. השליפת נתונים עצמה עובדת טוב, העמוד לא נתקע והכל טוב ויפה (כל זה בשימוש עם select רגיל).

המסד הוא MySQL.

ברגע שאני מוסיף אפשרויות סינון קצת יותר מתקדמות (בדומה ל Excel) - העמוד נתקע ל 10 שניות ויותר, עד שהנתונים מוצגים באופן שמאפשר סינון.

אני מחפש משהו שיאפשר סינון כמו התמונת אקסל שצרפתי - רק שלא יתקע את העמוד.

אני לא מבין את הקוד שלך...
בכל אופן, אני לא מכיר את הסינון של אקסל, אני מציע לך לאנדקס את העמודות הרלוונטיות בדאטאבייס.
כמו כן תעשה EXPLAIN לשאילתות כבדות.

המסד הוא לא הגורם המאט כאן... לא השליפה היא הבעייתית, אלא הצגת הנתונים כדי לאפשר סינון.

אהה אוקי.
אז למה שלא תשלוף כל פעם רק חלק מהנתונים?
ולא הבנתי, הנתונים נשלפים לweb או לexcel?
אם לweb תשקול לשלוף פחות נתונים ואולי לעשות בajax שליפת נתונים נוספים או עמודים, וכך יהיו פחות נתונים כל פעם.

תודה על העזרה שי,

אני אחדד קצת יותר - האיטיות היא בשליפת נתונים לעמודות עצמן (לכותרות של העמודות) - ברגע שלוחצים על החץ, אמורים לקבל רשימה של כל הכותרות (SELECT DISTINCT) ולאפשר סינון כמו אקסל רק ב WEB - כאן האיטיות. הטעינה של הכותרות לתוך הכותרת של העמודה ושימוש בסקריפט מסוים שמאפשר סינון מתקדם (בחירה של כמה כותרות וכו' וכו').

השאלה שלי - אם יש משהו יותר חסכוני, שלא יתקע את העמוד כל פעם שנכנסים אליו בשביל לאפשר סינון מתקדם כמו EXCEL.

בגלל שהמערכת מפותחת בצבא- אני לא יכול כרגע לתת צילום מסך ולהסביר את עצמי קצת יותר טוב.

ניסית לשלוף את כל התוכן בבת אחת ולהציג רק חלק עם js?

הרי בעליה הראשונה של העמוד יש לך את כל המידע שעולה יחד עם העמוד*. למה לא לייצר מהמידע הזה את אפשרויות הסינון בצד לקוח? זה לא אמור לקחת יותר מדיי זמן ריצה. מה גם שהמידע הזה אף פעם לא משתנה כך שהוא טוב לך מהרגע שהעמוד עלה ועד שהגולש יוצא ממנו.
אם הדבר הזה לוקח יותר מדיי זמן להתבצע בצד לקוח, בפעם הראשונה שכל אחת מהאפשרויות הסינון נפתחת (לכל עמודה), אתה יכול לגשת ולהביא רק את אפשרויות מה-DB ב-AJAX (מידע בלבד!). אם יש לך אינדקסים** טובים אז הפעולה אמורה לקחת קצת מאוד זמן להתבצע (שאילתה פשוטה עם Group By תחזיר לך את מה שאתה צריך). אחרי שאתה מקבל את המידע - תבנה את ה-HTML שלו דינאמית באמצעות JS.

נקודת אחת נוספת שאולי תרצה לשקול:
לפני כשנה עבדתי על מערכת גדולה מאוד שמציגה סטטיסטיקות עבור חברות פרסום אודות הפרסומות שלהן שרצות באתרים גדולים מאוד בארץ. מטבע הדברים, היה המון מידע להציג והרבה מאוד רשומות של כל הקמפיינים והכלים שרצים. השתמשתי ב-DataTables על מנת להציג את הטבלאות ולאפשר סינון של המידע. אומנם בחיפוש זריז לא מצאתי שם אפשרות סינון כמו שאתה מחפש, אבל לפעמים כשאתה לא מצליח לכתוב משהו בצורה שאתה רוצה, כדאי לחשוב מחוץ לקופסא ולחפש פתרונות אחרים.
מה שיש בפלאגין הזה זו אפשרות סינון לפי מילת חיפוש. הוא עובד לא רע בכלל גם במצבים שיש בהם הרבה מאוד רשומות ומסנן מאוד תוך כדי הקלדה. זה יכול להיות תחילף לא רע.

* אגב אני ממליץ לעלות את העמוד בהתחלה ללא המידע ורק אחרי שהוא עלה לגשת ב-AJAX לעמוד ולשלוף את המידע בלבד. ככה הגולש לא יצטרך לחכות מול מסך לבן בזמן שהעמוד עצמו עולה אלא תוכל להציג לו את העמוד מאוד מהר עם איזשהו אייקון של "נטען..." ולהמתין למידע בלבד. מה גם שמידע בלבד לוקח פחות זמן להביא מאשר את ה-markup שלו שניתן לבנות בד"כ מהר בצד לקוח.

** מאוד חשוב - גם אם עכשיו אתה לא רואה בעיה עם הביצועים של השליפה - בכל זאת מומלץ לכתוב אותן כי בסיבבת פרודקשן יהיו לך ביצועים פחות טובים בהכרח וגם לרוב אין אפשרות לצפות את העתיד של המערכת וכמה רשומות היא תחזיק.

תומר, האיטיות היא בטעינת האפשרויות לפילטור או בפילטור עצמו?

עומר, טעינת האפשרויות לפילטור.

מישהו, משהו? :(

הבעיה היא שהמידע שאתה מביא מאוד עמום.. תחשוב על לסרוק את הכל מראש, באמצעות משימה מתוזמנת, וליצור קובץ אינדקס עם הפילטרים המתאימים. אפשר אולי לייעל את הסקריפט אבל בכיוון הזה קשה ללכת בלי לדעת יותר על אופי התוכנה, ואני מבין שאתה לא יכול לפרט.

ציטוט:

נכתב במקור על ידי Tomer (פרסם 804307)

מישהו, משהו? :(

הצעתי לך 2 אפשרויות וכיווני מחשבה, ניסית?

ציטוט:

נכתב במקור על ידי BlueNosE (פרסם 804317)

האפליקציה (PHP, HTML) מציגה נתונים בטבלה (עזוב מה הנתונים עצמם, לא רלוונטי) ואמורה לאפשר לסנן אותם.

מה הכוונה בסינון? כמו אקסל. כמו התמונה שנתתי. כותרת לעמודה שאפשר ללחוץ עליה ולבחור את הנתונים של העמודה - ורק הנתונים האלו יוצגו (לאחר לחיצה על "שלח" לדוגמא וסינון צד-שרת).

הבעיה שלי היא עם ה Plugins של jQuery שהשתמשתי בהם עד עכשיו - הם פשוט איטיים מדי בקליטת הנתונים. הם אמורים להפוך <select multiple...> לעמודה מסודרת שאפשר לבחור כמה אייטמים ולסנן - אבל זה קורה באיטיות ולוקח כמעט 10 שניות כדי שהעמוד יוצג עם אפשרויות הסינון.

אני מחפש דרך יותר מהירה ונוחה לעשות את זה. אני צריך לאפשר סינון מתקדם (לבחור כמה אופציות בכל עמודה).

אם אני לא אמצא פתרון עד שאני אחזור לצבא, אני מקווה שאני אוכל להלבין איזו תמונה מסך, או אפילו את כל הקוד כדי להריץ אותו אצלי בשרת ולהציג לכם בדיוק מה אני צריך שיקרה.

רעיונות?

ציטוט:

נכתב במקור על ידי IgalSt (פרסם 804320)

הצעתי לך 2 אפשרויות וכיווני מחשבה, ניסית?

היי,

בתגובה שלך דיברת על שיפור זמן הטעינה של הנתונים עצמם. זו לא הבעיה שלי. הבעיה היא טעינת הנתונים לתוך ה Plugin שמארגן אותם לאפשרויות סינון כמו אקסל (כמו שרשמתי לעומר :) )

אני ממש לא בטוח שאני יורד לסוף דעתך.

אם הבעיה היא בעיבוד הנתונים על ידי JQUERY והפיכתם לנתונים מסוג אחר, נגיד CHECKBOXים, זה הרי דבר שאפשר גם לתזמן מראש. בכל מקרה, אם האיטיות היא בהמרה של נתונים קבועים (פחות או יותר, נגיד שהנתונים קבועים בטווח של שעה) - אפשר לבצע את ההמרה על ידי השרת (נגיד, פעם בשעה, עם האלגוריתם של הPLUGINים של JQUERY רק בשפת צד שרת).

אבל זה נראה לי פשוט מדי בשביל להיות הבעיה שלך, נראה לי שיש משהו שאני מפספס?

אוף, קיוויתי שאני לא אצטרך להתאמץ יותר מדי כדי להוציא את הקוד מהמחשב בצה"ל. אני אתעסק עם זה ביום שני ואעלה דוגמא לרשת, בתקווה שאולי אז ימצאו הפתרונים :)

קשה להסביר את זה במילים.

ציטוט:

נכתב במקור על ידי Tomer (פרסם 804326)

לדעתי אכן הכי טוב יהיה לראות קצת קוד ולהבין בדיוק איפה הבעיה.

בכל אופן, אם הזנת הנתונים ל-plugin תוקעת את הדפדפן למספר רגעים (ולא משיכת הנתונים ויצירתם ע"י השרת - בין אם זה DB או קוד צד שרת), אז צריך להתחיל לחפור ולחפש בדיוק מה תוקע.
האם זה בגלל הכמות? אם כן, אפשר אולי שכבר בעליית העמוד עצמו הוא יעלה עם הרשימה של האפשרויות מוכנה בתור JS/DOM. אם גם זה לא עוזר אז אפשר לנסות לכתוב או לשנות את הפלאגאין לבד.

מבעיות שנתקלתי בהם בתחום הזה של תקיעת דפדפן ע"י הרבה מידע ושינוי ה-DOM, למדתי שלעשות ככה:

קוד:

var div = $('<div/>'); //create a new div that is not in the DOM

for (var i in myDataArr){

  $('<span/>').appendTo(div); //append the span to the div that is not in the DOM

}

div.appendTo(body); //append to the DOM

עדיף משמעותית מאשר לעשות משהו כזה (לשנותא ת ה-DOM בכל LOOP):

קוד:

var div = $('<div/>').appendTo(body); //create a new div and append to the DOM

for (var i in myDataArr){

  $('<span/>').appendTo(div); //append the span to the div that *is* in the DOM

}

לסיכם, יכול להיות שהפלאגין שאתה משתמש בו לא הכי יעיל ולא כתוב הכי טוב. שינוי קטן כמו שהזכרתי למעלה לדוגמה, יכול לעשות פלאים ליעילות של הקוד.
אין מה לעשות, אם אכפת לך מיעילות צרך ללכלך ידים ואי אפשר לקחת משהו מוכן ולצפות מזה שהוא יעבוד בצורה הכי יעילה.