Bootstrap Paginator Paging Plagin عنوان تنزيل:
مشروع تنزيل في جيثب
1. هذه هي وظيفة JS التي يجب وضعها على الصفحة التي يجب مرفقة:
<span style = "font-size: 14px ؛"> function paging (page) {$ .ajax ({type: "get" ، url: "$ {ctx}/api/v1/user/1/"+(page-1)+"/5" ، dataType: $ .ajax ({type: "get" ، url: "$ {ctx}/api/v1/user/count/1" ، datatype: "json" ، success: function (msg) {var pages = math.ceil (msg.data/5) ؛ // الإجمالي للبيانات في البيانات هنا var = $ ( BootstrapmaJorversion: 3 ، Page ، // رقم الصفحة الحالي: 5 ، // يتم عرض الأزرار العديدة على صفحة (5 LIs يتم إنشاء PAGES: pages // العدد الإجمالي للصفحات} element.bootsstrappaginator (خيارات)}) ؛ } </span>صفحة:
<span style = "font-size: 14px ؛"> <ul id = "pageul"> </ul> </span>
*يتم إنشاؤه تلقائيًا في LI
2. الشيء الأكثر أهمية والأساسي هو تغيير ملف مصدر bootstrap-paginator.js بنفسك ، على النحو التالي:
<span style = "font-size: 14px ؛"> onPageClicked: function (event ، Originalevent ، type ، page) {// عرض الصفحة المقابلة واسترداد العنصر المدمج حديثًا المتعلق بالصفحة التي تم النقر عليها من قبل لإرجاع الحدث var currentTarget = $ (event.currentTarget) ؛ Switch (type) {case "first": currentTarget.BootStRappaginator ("showfirst") ؛ الترحيل (صفحة) ؛ استراحة؛ // حالة الصفحة السابقة "Prev": CurrentTarget.BootStRappaginator ("showprevious") ؛ الترحيل (صفحة) ؛ استراحة؛ الحالة "التالية": CurrentTarget.BootStRappaginator ("disterext") ؛ الترحيل (صفحة) ؛ استراحة؛ حالة "Last": CurrentTarget.BootStRappaginator ("Showlast") ؛ الترحيل (صفحة) ؛ استراحة؛ حالة "صفحة": CurrentTarget.BootStRappaginator ("show" ، page) ؛ الترحيل (صفحة) ؛ استراحة؛ }} ، </span>*اتصل بالطريقة (الصفحة) بعد نمط الصفحة الذي نقرت عليه. المعلمات في ملف مصدر الصفحة هنا متوفرة بالفعل ، لذا تمريرها مباشرة!
التأثير: عندما يتم تغيير النمط ، استخدم مباشرة قيمة صفحة عنصر التحكم لإرسال طلب AJAX! أخيرًا ، يتم تنفيذ ترقيم الصفحات الخالية من التحديث.
ما ورد أعلاه هو المعرفة ذات الصلة التي أدخلها المحرر لدمج المكون الإضافي لترحيل Paginator Bootstrap مع Ajax لتحقيق تأثير تراجع ديناميكي خالي من التحديث. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!