אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery Scripts » מיון טבלה באמצעות jQuery

מיון טבלה באמצעות jQuery

רן בר-זיק אפריל 13, 2010 4:27 pm תגובה אחת

כך יוצרים טבלה שהמשתמש יכול למיין אותה לפי רצונו

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

שם התלמיד ציון במבחן תאריך מבחן
משה 92 01/01/2010
יעקב 86 16/03/2009
ברוך 94 13/03/2010
אברהם 74 01/02/2006
נחום 99 01/12/2002

מה שאחראי על הפלא הקטן הזה הוא jQuery ותוסף ל-jQuery שנקרא tablesorter. קל ופשוט ליישם את התוסף עם jQuery.

ראשית אנו נכלול את jQuery בדף שלנו:


<script type="text/javascript" src="jquery.js"></script>

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


<script type="text/javascript" src="jquery.tablesorter.min.js"></script>

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


<table id="myTable" border="1" cellpadding="10">
<thead>
<tr>
	<th style="cursor: pointer;">שם התלמיד</th>
	<th style="cursor: pointer;">ציון במבחן</th>
	<th style="cursor: pointer;">תאריך מבחן</th>
</tr>
<tbody>
<tr>
	<td>משה</td>
	<td>92</td>
	<td>01/01/2010</td>
</tr>
<tr>
	<td>יעקב</td>
	<td>86</td>
	<td>16/03/2009</td>
</tr>
<tr>
	<td>ברוך</td>
	<td>94</td>
	<td>13/03/2010</td>
</tr>
<tr>
	<td>אברהם</td>
	<td>74</td>
	<td>01/02/2006</td>
</tr>
<tr>
	<td>נחום</td>
	<td>99</td>
	<td>01/12/2002</td>
</tr>
</tbody>
</thead>
</table>

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


$('#myTable').tablesorter();

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


(document).ready(function() 
	{ 
		$("#myTable").tablesorter(
				{ 
				dateFormat: 'uk',			        
				headers: { 
						1:{sorter: 'digit'},
						2:{sorter: 'Date'}
					} 
				}
				); 			
	} 
); 

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


text
integer
currency
floating
ipAddress
url
isoDate
percent
usLongDate
shortDate
time

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


(document).ready(function() 
	{ 
		$("#myTable").tablesorter(
				{ 
				dateFormat: 'uk',			        
				headers: { 
						0: false,
						1:{sorter: 'digit'},
						2:{sorter: 'Date'}
					} 
				}
				); 			
	} 
); 

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ספרית jQuery סקריפטים פתרונות

תגובה אחת

  1. https://internet-israel.com/cwsd.php?Z3AuPTQ0MQ/NDI/aWAhPzRdNDU-KWAjOzo1MSQgOTQ5PSYxPH51dQ.jpg הגב יוני 26, 2019 בשעה 11:20 am

    akua

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד