25-09-2007, 00:17
|
|
|
חבר מתאריך: 15.08.06
הודעות: 1,561
|
|
אני לא מאמין שבאמת ישבתי לכתוב את זה
זה הרעיון בגדול:
קוד PHP:
<?php
$data = array(); $data[] = array('id'=>3, 'name'=>'bbbb', 'phone'=>'2222'); $data[] = array('id'=>2, 'name'=>'aaaa', 'phone'=>'11111111111'); $data[] = array('id'=>1, 'name'=>'cccc', 'phone'=>'7050505050'); $data[] = array('id'=>4, 'name'=>'dddd', 'phone'=>'33333'); $jsonObj = json_encode($data);
?>
<html> <head> <script type="text/javascript"> var dataObj = eval('(<?php echo $jsonObj; ?>)');
function sortTable(sortFunc) { var resTable = document.getElementById('resTable'); var table = '<table>\ <th><span style="cursor:pointer;" onclick="sortTable(sortById);">ID</span></th>\ <th><span style="cursor:pointer;" onclick="sortTable(sortByName);">Name</span></th>\ <th><span style="cursor:pointer;" onclick="sortTable(sortByPhone);">Phone</span></th>'; dataObj.sort(sortFunc); for (var i in dataObj) { table += '<tr>\ <td>' + dataObj[i].id + '</td>\ <td>' + dataObj[i].name + '</td>\ <td>' + dataObj[i].phone + '</td>\ </tr>'; } table += '</table>'; resTable.innerHTML = table; }
function sortById(a, b) { return a.id - b.id; }
function sortByName(a, b) { var x = a.name.toLowerCase(); var y = b.name.toLowerCase(); return ((x < y) ? -1 : ((x > y) ? 1 : 0)); }
function sortByPhone(a, b) { var x = a.phone.toString().toLowerCase(); var y = b.phone.toString().toLowerCase(); return ((x < y) ? -1 : ((x > y) ? 1 : 0)); } </script> </head> <body onload="sortTable(sortById)"> <div id="resTable"> </div> </body> </html>
ככה - בחלק של הPHP סתם נתתי לו מערך כאשר כל איבר במערך הוא מערך בפני עצמו עם הערכים ID, Name, Phone (שאותם אתה לוקח מהדאטאבייס). אחרכך העברתי את זה לפורמט JSON כדי שיהיה קל לעבוד עם זה בג'אווהסקריפט (אם אתה לא מכיר, json.org).
עכשיו החלק של הטבלה הוא די פשוט. יש פונקציה אחת שנקראת sortTable שהיא כותבת את הטבלה (עזוב כרגע את הסדר, כי הטבלה תמיד תהיה באיזהשהו סדר). הפונקציה פשוט יוצרת סטרינג ארוך של HTML עם עמודות ושורות של טבלה וממלאת את הערכים (לפי הסדר של המערך dataObj - אותו אני מקבל מחלק של הPHP).
עכשיו למיון - קיימת פונקציה sort ב JS שעובדת על מערכים ולכן השתמשתי בה. רק צריך לכל שדה להגדיר את הפונקציה שעל פיה היא ממיינת. תחשוב שכדי למיין היא עוברת על הערכים וכל פעם בודקת מתוך 2 ערכים מי יותר קטן/גדול/שווה וככה היא ממיינת. לכן כאשר תרצה למיין לפי שדה מסוים, תיתן לה פונקציה שממיינת לפי אותו שדה (אי אפשר לא לתת לה פונקציה, כי המערך dataObj הוא לא מערך של מספרים/מחרוזות. הוא מערך של אובייקטים שJS לא יודעת איך למיין אותם). נתתי לך דוגמאות שם למיון שמות ולמיון לפי ID
מקווה שעזרתי
אם אתה רוצה לראות את זה בפעולה - http://wizi.spunk.co.il/h/
|