יצירת טבלה דינמית ע"י JS

avr416

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

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

function CreateHeaderTable(HeadersName)
{
    var JsonHeaders = JSON.stringify(HeadersName);

    for (var i = 0; i < JsonHeaders.length; i++)
    {
        $("#table-genery-head").append("<th>" + JsonHeaders[i].ColumnName + "</th>\n");
    }
};

משום מה בlength במקום שזה יהיה ערך של 4 הוא מציב שם ערך של 132... (למרות שיש לי רק 4 אובייקטים בדוגמ' כמו בפידל..)
כמו כן, אני רוצה שהוא יציג את הערך של columnName אבל הוא כותב לי undefined.

אשמח לעזרה!

פורסם במקור בפורום CODE613 ב12/11/2015 23:13 (+02:00)

avr416

הסתדרתי!

בפידל הוא לא מציג כלום.. אבל בתוכנה זה עובד מעולה!! (אותו קוד..)

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

function CreateHeaderTable(HeadersName)
{
//לא לבצע המרה
    var JsonHeaders = HeadersName;
//הוספתי אחרי שם האובייקט את שם המערך
    for (var i = 0; i < JsonHeaders.columnNames.length; i++)
    {
        $("#table-genery-head").append("<th>" + JsonHeaders.columnNames[i].ColumnName + "</th>\n");
    }
};

פורסם במקור בפורום CODE613 ב12/11/2015 23:48 (+02:00)

dovid

בדוק את http://datatables.net/, זה נותן תוצאות נחמדות מאוד וקלות להתאמה אישית וחיסכון ענק בתחזוקת קוד.

פורסם במקור בפורום CODE613 ב15/11/2015 17:53 (+02:00)

avr416

@דוד ל.ט.

בדוק את http://datatables.net/, זה נותן תוצאות נחמדות מאוד וקלות להתאמה אישית וחיסכון ענק בתחזוקת קוד.

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

פורסם במקור בפורום CODE613 ב15/11/2015 20:57 (+02:00)

dovid

אתה אכן חייב ליצור את האלמט table אבל את הכותרות אתה יכול גם להגדיר או בנתונים עצמם (שמות המאפיינים) או בoption.columns.

פורסם במקור בפורום CODE613 ב16/11/2015 11:57 (+02:00)

יאן גולד

@דוד ל.ט.

אתה אכן חייב ליצור את האלמט table אבל את הכותרות אתה יכול גם להגדיר או בנתונים עצמם (שמות המאפיינים) או בoption.columns.

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

זה הקוד המקורי של DATATABE. כולל מה שסימנתי בהערה.
מה צריך לשנות כדי שיפעל על אובייקט כנ"ל?

     $('#example').DataTable({
                    data: rooms
                    //columns: [
                    //    { title: "Name" },
                    //    { title: "Position" },
                    //    { title: "Office" },
                    //    { title: "Extn." },
                    //    { title: "Start date" },
                    //    { title: "Salary" }

                    //]
                } );

פורסם במקור בפורום CODE613 ב07/12/2015 15:01 (+02:00)

avr416

השגיאה שאני רואה היא שלא עשית פסיק אחרי data: rooms
כיון שאתה שולח לו מאפיין נוסף ושמו columns.
כמו כן מהיכן מגיע האובייקט בAjax וכדו' או שזה אובייקט שהJS אמור להכיר מהיכן שהו?
אם התשובה היא כן, עיין כאן:
אם לא, עיין כאן:

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

$(document).ready(function(){
//כאן תכתוב את הפונקציה
});

פורסם במקור בפורום CODE613 ב07/12/2015 23:07 (+02:00)

יאן גולד

באמת היה חסר פסיק, שנשמט מרוב נסיונות להגיע לטקסט הנכסף :roll: :roll:
אבל עדיין השגיאה היא שאני מקבל טבלה בלי שמות עמודות.

האובייקט הוא במבנה כזה:

[{"date_in":null,"date_out":null,"days":0,"hotel_id":1,"reserve_id":0,"room_number":null},{"date_in":null,"date_out":null,"days":0,"hotel_id":2,"reserve_id":0,"room_number":null},{"date_in":null,"date_out":null,"days":0,"hotel_id":1,"reserve_id":0,"room_number":null}

ואני קורא לטבלה ככה:

 $.getJSON(url, function (rooms) {
            $('#example').DataTable({

                data: rooms,
                columns: [
                    { data: 'hotel_id' },
                    { data: 'reserve_id' },
                {data: 'days'}]
                
            });

פורסם במקור בפורום CODE613 ב08/12/2015 00:50 (+02:00)

avr416

@יאן גולד

באמת היה חסר פסיק, שנשמט מרוב נסיונות להגיע לטקסט הנכסף :roll: :roll:
אבל עדיין השגיאה היא שאני מקבל טבלה בלי שמות עמודות.

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

פורסם במקור בפורום CODE613 ב08/12/2015 19:34 (+02:00)

תחומים - פורום חרדי מקצועי

יצירת טבלה דינמית ע"י JS