أولاً ، انظر إلى عروض التنفيذ. إذا كنت تعتقد أنه ليس سيئًا ، فيرجى الرجوع إلى رمز التنفيذ.
البيانات المذكورة أعلاه تربيها أدناه
كيفية استخدام
1 استيراد CSS Bootstrap
<link Rel = "STYLESHEET" Href = "CSS/V3/BOOTSTRAP.MIN.CSS">
2 استيراد jQuery
<script src = "js/jquery-1.10.1.min.js" type = "text/javaScript"> </script>
3 استيراد جدول الترحيل المكون الإضافي ltable.js
<script src = "js/ltable.js" type = "text/javaScript"> </script>
4 أضف علامة HTML وتعيين القيم إلى المعرف
<!-الجدول-> <div id = "d"> </div> <!-ترقيم الصفحات-> <div id = "u"> </div>
5 احصل على البيانات
هنا ، احصل على البيانات المحاكاة لملف JSON من خلال AJAX
inittable (البيانات) هي طريقة تهيئة الجداول والترحيل
$ .ajax ({url: "json/data.json" ، النوع: "get" ، نوع البيانات: "json" ، النجاح: الوظيفة (البيانات) {inittable (data) ؛} ، خطأ: الدالة (e) {ALERT ("خطأ في الحصول على البيانات) ؛}}) ؛6 تهيئة الجدول
تهيئة الجدول أولاً في طريقة التهيئة
var obj = data ؛ var mytable = $. ltable ('#d' ، {data: obj.list // json data ، title: ["userid" ، "username" ، "password" ، "userrolename" ، "status" ، الاسم: ["userid" ، "username" ، "password" ، "اسم إذن" ، "الحالة" ، "_ OPT"] ، TID: "UserId" ، مربع الاختيار: "userId"}) ؛وصف رمز
6.1 طريقة التهيئة
$ .ltable ('id' ، {data ، title ، name ، tid ، chechbox}) ؛
6.2 وصف السمة
المعرف: كتلة التعبئة المحددة بواسطة الصفحة
البيانات: بيانات JSON معروضة على الصفحة
العنوان: الحقل المقابل لبيانات كل عمود من الجدول
الاسم: يعرض الصف الأول من الجدول الحقل
Tid: قيمة المفتاح المقابلة لكل سطر (يمكن حذفها)
مربع الاختيار: القيمة المقابلة لمربع الاختيار (يمكن حذفها)
6.3 مربع الاختيار الوصف
تنشيط عند إضافة سمة chechbox
مربع الاختيار اسم = "IDS"
احصل على طريقة العمود المحددة: $ .ltable.getCheckboxids () مثال على قيمة الإرجاع "1،2،3،4"
6.4 تعليمات التشغيل
عندما يغير اسم السمة = _opt ، يغير رأس الجدول تلقائيًا الموضع "العملية"
يمكن أن يضيف عنوان السمة المقابل أزرارًا وعمليات أخرى
مثال: "<button onClick = 'Updf (id)'> تعديل </button>"
طريقة النقر هي UPDF (). معرف المعلمة هو الحقل المقابل للسمة TID.
7 تهيئة ترقيم الصفحات
ثم جزء الصفحات
$ .lpaging ('#U' ، // معرف المقابل {pagenumber: obj.pagenumber // رقم الصفحة الحالي ، totalpage: obj.totalpage // إجمالي رقم الصفحة ، countsize: 5 // number of pages (يمكن حذفها) ، العد: obj.count ، inputsearch: districe Quover Dataurl) ؛وصف رمز
7.1 طريقة التهيئة
$ .lpaging ('id' ، {pagenumber ، totalpage ، countsize ، count ، onpagechange (num) ، inputsearch}) ؛
7.2 وصف طريقة السمة
المعرف: كتلة التعبئة المحددة بواسطة الصفحة
الوصلات: رقم الصفحة الحالي
TotalPage: إجمالي عدد الصفحات
Countsize: عدد عروض الصفحة (يمكن حذف الافتراضي 5)
العد: إجمالي عدد البيانات
OnPageChange (NUM): إرجاع حدث النقر
inputsearch: ما إذا كنت تريد عرض مربع إدخال الاستعلام الافتراضي الافتراضي
getInputVal (): إرجاع الرقم في مربع الإدخال
8 الرمز بأكمله
<! doctype html> <html> <head> <meta charset = "utf-"> <meta http-equiv = "x-ua-confliable" content = "ie = edge"> <title> </ithed> <link rel = "stylesheet" href = "css/bootstrap.min id = "d"> </viv> <!-ترقيم الصفحات-> <div id = "u"> </viv> </body> <script src = "js/jquery -... min.js" type = "text/javaScript> </cript> <script src =" js/ltable.js mytable ؛ var dataurl = "" ؛ // تهيئة الصفحة initPage (، pagesize ، "") ؛ // ajax يحصل على وظيفة البيانات initpage (num ، ps ، url) {$. ajax ({url: "json/data.json" ، النوع: "get" ، // النوع: "post" ، // البيانات: "userinfovo.pageid ="+num+" النجاح: الدالة (البيانات) {inittable (data) ؛} ، الخطأ: الوظيفة (e) {console.log (e) تنبيه ("خطأ في الحصول على البيانات") ؛}}) ؛} // تهيئة الجدول ودالة بيانات الصفحات (data) {// var obj = eval ("+data+") ") obj = data ؛ // tablemytable = $. ltable ('#d' ، {data: obj.list // json data ، title: ["userId" ، "username" ، "password" ، "userrolename" ، "status" ، الاسم: ["userid" ، "username" ، "password" ، "اسم إذن" ، "الحالة" ، "_ OPT"] ، TID: "userId" ، مربع الاختيار: "userid"}) ؛ // mytable.getCheckBoxIDS () ؛ // احصل على القيمة المحددة بواسطة checkbox // صفحة $ .lpaging ('#u' ، // معرف المكون {pagenumber: obj.pagenumber // رقم الصفحة الحالي ، totalpage: obj.totalpage // total page number ، countize: // the the the the the procies somies (يمكن حذف). {initPage (num ، pagesize ، dataurl) ؛}}) ؛} // تعديل وظيفة method upda (id) {alert ("modify:يوصي wulin.com بمواضيع ذات صلة بالتمهيد:
مهارات تشغيل مكون Bootstrap
ملخص المعرفة المتعلقة بالتمهيد
ما ورد أعلاه هو التفسير التفصيلي لمؤسس النماذج bootstrap3 و Paging Plug Plug-in Adminted من قبل المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!