"التمرير التي لا نهاية لها" تأثير في جدول HTML [مغلقة]

StackOverflow https://stackoverflow.com/questions/216588

سؤال

أنا عرض تمريره بيانات الجدول في صفحة ويب.هذا الجدول يحتوي على عدة آلاف من ديناميكية الصفوف ، لذلك يتم تحميلها من الخادم (عبر AJAX).

يمكن للمستخدم التمرير صعودا وهبوطا ، إذا ما أريد هو أن الكشف عن عندما يصل المستخدم إلى نهاية شريط التمرير (هذا هو الصف الأخير في الجزء السفلي من الجدول) بغية الطلب و عرض المزيد من البيانات.

يمكنك أن تجد هذا التأثير في قارئ جوجل عندما كنت انتقل لأسفل إلى آخر مشاركة في تغذية جوجل طلبات و عروض الوظائف الجديدة بطريقة شفافة, ولكن أنا لا يمكن معرفة كيفية تحقيق ذلك.

بالمناسبة, الآن أنا باستخدام YUI Datatable

هل كانت مفيدة؟

المحلول

شكرا لك على إجاباتك.هذا اخر عمل مدونة (مستوحاة من جريج ، ajaxian.com) ، التي تستخدم بعض مسج وظائف ويعمل مع YUI DataTable.

$(".yui-dt-bd").scroll(load_more);

function load_more() {              
    if ($(this).scrollend()) {
        alert("SCROLL END REACHED !");
        // TODO load more data
    }
}

$.fn.scrollend = function() {
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}

بلدي الخطوة التالية هي تنفيذ بلدي YUI Paginator لتحقيق الاندماج الكامل مع يوي مكونات :)

نصائح أخرى

أنا لم تكن مألوفة مع عنصر معين كنت تستخدم ، لتنفيذ هذا على كامل حجم النافذة ، يمكنك القيام بما يلي:

$wnd.onscroll = function() {
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};

حيث scrollTop هو أساسا "كم بكسل تم تمريره".أفترض تطبيق هذا الجدول كنت تعمل مع قيام بهذه المهمة.

لقد بحثت و وجدت هذا المقال: تنفيذ ديناميكية انتقل مع Ajax, JavaScript, XML.يبدو توضيح شامل.

يمكنك أن ترى العمل هنا YUI فقط.في المقابل مع واحدة من الحلول المقترحة أعلاه ، التمرير يتحرك بشكل مستمر ، موقف وحجم تعكس حقيقة حجم مساحة للعرض ، فإنه لا يتم تحميل الدفعة التالية عند التمرير تصل إلى أسفل.شريط التمرير تصل إلى أسفل فقط عند آخر كل السجلات في الجزء السفلي من مساحة العرض.بالطبع, هذا يعمل فقط إذا كنت لا تعرف كيف العديد من السجلات هناك.

هناك خاصية لاحظت أثناء قراءة دوم خصائص الحرائق في اليوم scrollY (في الحرائق تحت دوم انتقل إلى علامة التبويب content > scrollY) الذي يظهر أن يكون مقدار بكسل اليسار للتمرير على النافذة.حاول معرفة ما إذا كان هذا هو أيضا خلق من أجل تمرير العناصر.ثم يمكنك استخدام يوفال وظيفة لتحميل البيانات الجديدة.

Ick.لا مروحة كبيرة من التمرير التي لا نهاية لها;فإنه يكسر بعض الافتراضات الرئيسية التي تجعل الناس عن كيفية عمل شبكة الإنترنت.أرجوك عديني بأنك لن تنفذ إلا أنه في ظل الظروف التالية:

1) لا والاستعاضة عن ذلك تماما صفحة جيدة بتحميل كل شيء في لطيفة طاولة طويلة و يتيح للمستخدم استخدام Ctrl-F للبحث داخل صفحة أي وقت هامش يأتي على.

2) كنت لا تخطط على إدراج إعلان في أسفل كل قطعة من تمريره البيانات.

3) تقديم تراجع العمل (هناك لطيفة طويلة الجدول مرة أخرى) للمكفوفين والأشخاص تصفح الويب مع جافا سكريبت المعوقين.

إذا كنت تستخدم يوي ، فقد tableScrollEvent هذا يحصل عندما أطلقت الجدول مخطوطات.زوجان هذا مع dataTable هو generateRequest وظيفة يمكن تنفيذ التمرير التي لا نهاية لها من خلال مشاهدة tableScrollEvent و ابتداء من طلب عندما تحصل على قرب نهاية من البيانات.

YUI الطبيب لا يكون مثال محدد لهذه الحالة ولكن لا تظهر لك كيفية التعامل مع البيانات عاد قبل generateRequest

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top