يتطلب أحدث مشروع ASP.NETMVC تصنيف قوائم البيانات. هذا هو في الأصل الواجهة الخلفية التي تم تطويرها استنادًا إلى Bootstrap ، لذلك أتساءل عما إذا كان Bootstrap يحتوي على مكون إضافي للترحيل ، أو وظيفة ترحيل تدعمها JQuery ، بحيث يمكن توحيد نمط الموقع الخلفي العام دون الحاجة إلى كتابة مجموعة من وظائف الترحيل بنفسك.
أول شيء هو تنزيل paginator bootstrap. عنوان التنزيل: مكون الإضافات Paginator Paginator Bootstrap
بادئ ذي بدء ، يجب تقديم ملفات JS و CSS فوق العرض. هناك ثلاثة ملفات رئيسية ، وهي ملفات CSS و JQuery و Paginator JS. لقد بحثت عبر الإنترنت ويبدو أن jQuery يجب أن يكون الإصدار 1.8 أو أعلى ، لم أختبر هذا شخصيًا مطلقًا. لذا فإن مرجع ملف العرض هو:
<link href = "css/bootstrap.css" rel = "stylesheet"> <script type = "text/javaScript" src = "js/jQuery-1.8.1.js"> </script> <script type = "text/javaScript" src = js/boottrap-pagin.js
بعد ذلك ، فإن وظيفة ترقيم الصفحات هي بالطبع تحديثًا محليًا يعتمد على Ajax لجذبنا ، وبالطبع يتطلب هذا دعم jQuery. اعتدت أن أقوم بترحيل Easyui ، وهذه المرة يجب أن تكون مختلفة بعض الشيء.
<script> $ (function () {var carid = 1 ؛ $ .ajax ({url: "/oa/setting/getDate" ، datatype: 'json' ، type: "post" ، data: JSON $ ("#list"). $ (LIST "). $ (#list "). $ (#list "). ) ؛ "> حذف </button> ') ؛ $ ("#list "). إلحاق (' </td> ') ؛ $ ("#list "). إلحاق (' </tr> ') ؛ $ ("#list "). إلحاق (" </tbody>') ؛ $ ("#list"). $ (LIST "). Var CurrentPage = eval ("(" + بيانات + "). صفحة "؛ الحالة" التالية ": إرجاع" الصفحة التالية "؛ الحالة" الأخيرة ": إرجاع" الصفحة الأخيرة "؛ حالة" صفحة ": الإرجاع ؛ الصفحة ، النجاح: الدالة (data1) {if (data1! = null) {$ .each (alual ("(" + data + "). القائمة ، الدالة (الفهرس ، العنصر) {// transtraight json $ returned ("#list "). oplend ('<table id =" data_table ") ؛ $ ("#list ") $ ("قائمة"). $ (#list "). $ (#list "). $ ("#list"). $ (#list "). $ (List ")في الجزء الرئيسي من العرض ، هناك اثنين من divs ، واحدة لتقديم قائمة البيانات والآخر لوضع التنقل في صفحة التحديد.
<div> <blabe> قائمة القسم </label> <hr/> <div id = "list"
طريقة getDate في الخلفية مثل هذا:
الإجراءات العامة getDate (int id ، int؟ page) {int pageIndex = page ؟؟ 1 ؛ // الصفحة الحالية const pagesize = 2 ؛ // يتم استخدام هذا لتعيين عدد البيانات المراد عرضها في كل صفحة. يوصى بكتابة هذا إلى web.config للتحكم العالمي//الحصول على بيانات القسم ليتم عرضها ienumerable <model.qgoa_department> list = operateContext.current.bllsession.iqGoa_departmentBlll.getPagedList (pageIndex ، x = // الحصول على عدد البيانات int rowcount = list.count () ؛ // من خلال الحساب ، من الضروري تقسيم الصفحة إلى عدة صفحات. يتم حساب البيانات التي تقل عن صفحة واحدة وفقًا لصفحة واحدة إذا (RowCount ٪ pagesize! = 0) {rowCount = rowCount / Pagesize + 1 ؛ } آخر {rowCount = rowCount / pagesize ؛ }. Return Json (Strresult ، JsonRequestbehavior.allowget) ؛ }لا تزال هذه الطريقة معيبًا بعض الشيء ويمكن كتابتها بشكل أكثر مثالية ، تمامًا مثل Pagesize أعلاه يمكن تعديلها على مستوى العالم من خلال قراءة ملف Configuration Web.Config ، وهو مريح لإدارته. بالإضافة إلى ذلك ، للحصول على معلومات مثل سمات الصفحة: رقم الصفحة ، الصفحة الحالية ، كمية البيانات ، وما إلى ذلك ، يمكنك عمل فئة لتخزين المعلومات. إذا كان مشروع موقع الويب أكبر ، فسيكون الأمر أكثر ملاءمة بالنسبة لنا لتغيير الكود الخاص بنا.
تأثير العرض النهائي هو كما يلي:
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو استخدام المكون الإضافي لترحيل POOTSTRAP PAGINATOR الذي شاركته معك. آمل أن يكون من المفيد بالنسبة لك إتقان استخدام المكون الإضافي لترحيل Paginator Bootstrap.