DataTable לא פעל

יאן גולד

הבעיה נפתרה אבל בשביל אל תמנע טוב אשתף את חברי הפורום

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

א. DATATABLE חייב תגית thead ותגית tbody, המימוש האוטומטי של MVC לא מייצר, צריך להוסיף לבד.

ב. צריך להוציא את ההגדרה לסקריפט נפרד כזה:
לא:

<script type="text/javascript">
    $(function () {
        $('#tableID').dataTable();
    });
</script>

אלא:

<script type="text/javascript">
    $('#tableID').dataTable();
</script>

פורסם במקור בפורום CODE613 ב23/06/2016 01:23 (+03:00)

avr416

בהתחלה חשבתי שאתה מתכוון לאובייקט datatable של C#, עד שהבנתי שאתה מתכוון לספרייה.

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

**For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a body (tbody). An optional footer (tfoot) can also be used.**If you are generating your HTML document using a server-side program, such as a PHP script, a Ruby script, a C# program or anything else - all they need to do is output your table like this. This is exactly what you would have for a normal HTML table, although sometimes you might need to add the thead and tbody tags, as these aren't always used (they allow DataTables to know what should be used for the column headers and the click-to-order controls).

Note that DataTables can actually generate the thead and tbody for you, along with all of the rows and cells of the table, if you are using Ajax sourced data, but for the moment we'll focus on a plain HTML. For more information about the different data sources DataTables can use, please see the data sources section of this manual.

לפעמים התשובות נמצאות בתיעוד

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

$(document).ready(function(){
    $('#myTable').DataTable();
});

בהצלחה גדולה!

פורסם במקור בפורום CODE613 ב23/06/2016 09:55 (+03:00)

יאן גולד

א. צודק בענין התיעוד צריך לזכור את זה.

ב. לא צריך לכתוב document.ready עיין כאן

פורסם במקור בפורום CODE613 ב23/06/2016 13:00 (+03:00)

avr416

@יאן גולד

ב. לא צריך לכתוב document.ready עיין כאן

נראה לי שלא הבנת אותי.
document.ready נועד כדי שהקוד שאתה כותב יתבצע רק לאחר שכל המסמך נטען (דהיינו כל אובייקטי הHTML כבר נטענו ע"י הדפדפן.) כיון שאחרת הדפדפן מבצע את הקוד לפי המיקום בו הוא נכתב, ואם הסקריפט שלך נכתב בעמוד לפני שכתבת את הטבלה (כפי שעשה השואל בסטאק בקישור שהבאת..) אז הוא פשוט לא יבצע כלום, כיון שהוא לא מכיר את הID או הclass של האובייקט שרצית להפעיל עליו את הסקריפט. לכן או שכותבים את כל הקוד בתחתית המסמך, או שמשתמשים בפונקציה document.ready.

בקישור שהבאת נראה שהבעיה של השואל הייתה שהוא כלל לא טען את הספרייה של dataTable ולכן השגיאה שלו הייתה שהוא לא מכיר פונקציה כזאת, שזה בעיה אחרת. (גם היא עשויה לקרות בגלל שינוי בסדר הופעת הסקריפטים בעמוד, כגון שקודם הוא כתב את הסקריפט שלו, ורק אח"כ הוא הביא את הקישור לספריה.
-- תיקון טעות: הבעיה שלו הייתה שהוא לא כלל את הספריה Jquery.

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

פורסם במקור בפורום CODE613 ב23/06/2016 14:29 (+03:00)

יאן גולד

קיצרתי וכללתי שני נושאים ביחד. לא צריך לכתוב במפורש document.ready זה דיפולט.
בדוגמא שצירפתי הראתי שאף אחד לא מקפיד על זה, ועל הדרך את הפיתרון שעזר לי.
מה יהיה כתוב לשיטתך בלייבל OLD DATA או NEW DATA? נסה ותיווכח:

<!DOCTYPE html>
<html>
<head>
    <script  src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <script>
        $(function ()
        {
            $('label').text('new_data');
        });
    </script>
    <title></title>

	<meta charset="utf-8" />
</head>
<body>
    <label>old_data</label>
</body>
</html>

פורסם במקור בפורום CODE613 ב23/06/2016 15:05 (+03:00)

dovid

יאן גולד,
הקוד הזה:

$(function () {
    $('label').text('new_data');
});

והקוד הזה:

$(document).ready(function(){
    $('#myTable').DataTable();
})

עושים אכן אותו הדבר, וזה אולי avr416 פספס (אני לא ידעתי עד לרגע זה, ואני ממש שמח ללמוד על כך. ראו פה https://learn.jquery.com/using-jquery-core/document-ready/, שם כתוב בין היתר If you are writing code that people who aren't experienced with jQuery may see, it's best to use the long form. ).
אבל אתה כתבת אחרת:

<script type="text/javascript">
    $('#tableID').dataTable();
</script>

ועל זה הערתו הצודקת של avr416.

פורסם במקור בפורום CODE613 ב23/06/2016 15:28 (+03:00)

יאן גולד

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

אבל אם הוא בסוף (כמו שהיה אצלי) הוא עובד גם בלי לכתוב סקריפט שקורא לfuction של JQUERY

<!DOCTYPE html>
<html>
<head>
    <script  src="https://code.jquery.com/jquery-3.0.0.js"></script>
 
    <title></title>

	<meta charset="utf-8" />
</head>
<body>
    <label>old_data</label>
</body>
</html>
<script>

            $('label').text('new_data');
</script>

פורסם במקור בפורום CODE613 ב23/06/2016 15:55 (+03:00)

dovid

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

פורסם במקור בפורום CODE613 ב23/06/2016 19:45 (+03:00)

יאן גולד

יישר כח שאתה אומר לי.
האמת היא ששמתי אותם שם בטעות על פי הסרט

(פתוח בנטפרי) רק לא שמתי לב ששם הדף הוא VIEW, העיקר שזה גם עבד

פורסם במקור בפורום CODE613 ב23/06/2016 20:10 (+03:00)

avr416

יאן גולד, אכן כתבתי במפורש בדברי שיש ב' אפשרויות, או לשים אחרי הHTML שאתה צריך (כמובן בתוך התגית של HTML, אך לאחר התגית שעליה אתה רוצה להפעיל את הקוד..) או בצורה יותר ישרה ונכונה (כמו שבד"כ רצוי שקוד הJS יהיה בקובץ נפרד מקובץ הHTML, לשם תחזוקה וקריאות קוד. וכמו כן קובץ הגדרות הCSS. למעט מצבים בהם אין ברירה אלא לשתול את הJS והCSS בתוך הקוד HTML, כמו למשל כשאתה שולח מייל שמכיל HTML ואתה לא יכול לצרף לו הפניות לקבצים נוספים) להשתמש בdocument.ready.
אכן טעיתי וחשבתי שהאפשרות הראשונה של שימוש בפונקציה אנונימית שעטופה בסוגריים לא תעבוד אם לא תכתוב עוד סוגריים בסוף, כך:

$(function () {
    $('label').text('new_data');
})();

וכן לא ידעתי שזה מבצע אותו דבר כמו document.ready.

פורסם במקור בפורום CODE613 ב23/06/2016 21:36 (+03:00)

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

DataTable לא פעל