عرض طول الصفحة في أسفل الجدول

Question

الجميع،

أنا أستخدم جداول بيانات jQuery. أنا أستخدم المثال التالي:

Datatables مع ترقيم الصفحات

كنت أتساءل عما إذا كانت هناك طريقة لعرض "عرض 10 إدخالات" في الأسفل بدلاً من الأعلى. يجب عرضه مباشرة قبل "إظهار 1 إلى 10 من 51 إدخالات" .. في أسفل الجدول.

كيف أقوم بذلك؟

شكرًا

Answer 1

طريقة القيام بذلك هي تغيير SDOD في .js ، حيث تحدد الجدول:

$('#TABLE_ID').dataTable({`
    "sDom": 'Rfrtlip'`    
 });

بالإضافة إلى ذلك ، يجب عليك تغيير .CSS لتظهر بجوار "إدخال ... إدخالات" ، لأنه بهذه الطريقة تظهر فوقها.

هذا هو شرح خيارات SDOD:

الخيارات التالية مسموح بها:

• "ل" - تغيير الطول
• 'F' - تصفية الإدخال
• 't' - الجدول!
• "أنا" -معلومات
• "P" - ترقيم الصفحات
• "R" - المعالجة

الثوابت التالية مسموح بها:

• 'H'-jqueryui header "header" ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-colerfix')
• 'F'-jQueryui them "Fooler" ("FG-Toolbar UI-Widget-Header Ui-Corner-Bl-bl Ui-Corner-Br-br-helper-colerfix")

من المتوقع بناء الجملة التالية:

• '<' و '>' - عناصر div
• '<"class" و ">' - div مع فصل دراسي
• "<"#id "و"> " - div مع أمثلة معرف:
• "<" wrapper "flipt> '' ip> '

ملاحظة: هذا يمكن أن يساعدك أيضًا:

datatables sdom

الإضافات بين الطول-الطول

Answer 2

واجهت مشكلة مماثلة (أراد إزالة بعض الضوابط غير الضرورية) والطريقة الوحيدة للتعامل معها يبدو أنها تعدل الطاولة بنفسك. لقد استخدمت رد اتصال FndrawCallback (http://datatables.net/usage/callbacks).

سيكون شيئًا كهذا في قضيتك

$('#tableId').dataTable({
    "fnDrawCallback": function () {
        $('#tableId_info').prepend($('#tableId_length'));
    }
});

ما عليك سوى التحقق من الكود الذي تم إنشاؤه في هذا العرض التوضيحي ، إنه بسيط للغاية (باستثناء أنه لا يحتوي على تنسيق أو مسافة بادئة).

يمكنك أيضًا استخدام أسماء الفصول الدراسية بدلاً من المعرفات ، إذا لم تكن خائفًا من التأثير على الجداول الأخرى في الصفحة. انهم في الشكل dataTables_length.

استخدم CSS لتصميم إضافي.

Answer 3

هنا مثال. هذه الوثائق تساعد كثيرًا: https://datatables.net/release-datatables/examples/basic_init/dom.html

يبدو أن جدول البيانات الخاص بي:

اضطررت أيضًا إلى إضافة CSS هذا الخط:

.dataTables_length {
    margin-top: 10px;
    margin-left: 20px;
}

الرمز هو:

  $('.data_table').DataTable({
            "iDisplayLength": 20,
            "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
            "pagingType": "simple_numbers",
            "language": {
                searchPlaceholder: "Search",
                search: "",

            },
            "dom": '<"top"f>rt<"bottom"ilp><"clear">'
        });