جدول Bootstrap هو مكون إضافي لخفيفة الوزن يستخدم AJAX للحصول على البيانات بتنسيق JSON. ترقيم ترقيمها وملء البيانات مريحة للغاية ويدعم التدويل. في الآونة الأخيرة ، استخدمت الخلفية هذا المكون الإضافي لجعل تطبيق جدول لتلخيصه.
1. كيفية الاستخدام
يمكنك الحصول على المكونات الإضافية JS وأوراق الأنماط والمكونات الإضافية الدولية من خلال CDN المقدمة من YouPaiyun ، أو تنزيلها مباشرة على الموقع الرسمي. ضع المكونات الإضافية والأنماط التالية في رأس HTML واستخدمها.
// style <link href = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"> </script> // التدويل ، الجدول الصيني <البرنامج النصي src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-cn.min.js"> </script>
2. ملء البيانات
هناك طريقتان للحصول على بيانات من جدول Bootstrap. أحدهما هو تحديد مصدر البيانات من خلال خاصية البيانات-url للجدول ، ولكن لتحديد عنوان URL عند تهيئة الجدول بواسطة JavaScript للحصول على البيانات ، كما هو موضح في المثال التالي.
<table data-toggle = "table" data-url = "data.json"> <tead> ... </tead> </table> $ ('#table'). bootstraptable ({url: 'data.json'}) ؛الطريقة الثانية لتسليم الطريقة الأولى أكثر مرونة عند معالجة البيانات المعقدة. بشكل عام ، يتم استخدام الطريقة الثانية لملء بيانات الجدول.
var $ table = $ ('#table') ؛ $ table.bootstraptable ({url: "duobaoactivitylist" ، datatype: "json" ، pagination: true ، // pagination singlect: false ، data-locale: "zh-us" ، // table incale search: الاسم "، الحقل:" الاسم "، المحاذاة:" المركز "، فالين:" الأوسط "} ، {العنوان:" الحالة "، المحاذاة:" المركز "، فالين:" الأوسط "،} ، {العنوان:" عدد المشاركين "، الحقل: "وقت البدء" ، المحاذاة: "المركز" ،} ، {title: "العملية" ، الحقل: "المعرف" ، المحاذاة: "المركز" ، Formatter: Function (value ، row ، index) {var e = '<a href = "#" mce_href = "#" onclick = "edit (/' + row.id + ') MCE_HREF = "#" onClick = "Del (/'' Row.id+'/')"> حذف </a> '؛يجب أن يتوافق حقل الحقل مع الحقل الذي تم إرجاعه بواسطة الخادم قبل عرض البيانات.
3. ترقيم الصفحات والبحث
عند الترحيل ، يمر طاولة bootstrap بحقلين للترحيل إلى الواجهة الخلفية: الحد والإزاحة. يمثل الأول عدد كل صفحة ، ويتخلف عن السداد إلى 10 ، ويمثل الأخير إزاحة البيانات أثناء الترحيل.
عند البحث ، يتم تمرير حقل البحث إلى الواجهة الخلفية ، مما يشير إلى محتوى البحث المحدد.
يجب أن تتضمن البيانات التي يتم إرجاعها من جانب الخادم أيضًا حقلين: الصفحة (عدد الصفحات) والمجموع (إجمالي البيانات) ، ويجب أن يربط الواجهة الأمامية بناءً على هذين الحقولين.
يظهر تأثير العرض النهائي في الشكل أدناه:
ما ورد أعلاه هو ملخص تطبيق بيانات تطبيق الجدول وتوريده في Bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!