في عملي السابق ، استخدمت الكثير من ترقيم الصفحات ، لكنه لم يكن صلبًا ، لذلك ليس من السهل استخدامه. هذا هو ترقيم الصفحات مع تحديث جزئي. حاولت كثيرا. كنت أرغب في استخدام MVCPager لتحديث جزئي ، لكن بالنظر إلى أن التكلفة مرتفعة للغاية ، استسلمت. دعونا نلخص ترقيم الصفحات بناءً على bootstrap أولاً ، بحيث يكون من المريح بالنسبة لي استخدامها في المستقبل
عنوان مفتوح المصدر https://github.com/lyonlai/bootstrap-paginator
اقتبس أولا
jQuery
bootstrap.min.js
bootstrap-paginator.min.js
رمز وحدة التحكم
[AuthorizationCodeAttribute] [الوصف ("معلومات التعليق")] [httppost] التعليق الإجراء العام (int id ، int؟ page) {#region list var dal = new carCommentOperator () ؛ int pageIndex = page ؟؟ 1 ؛ // الصفحة الحالية if (! string.isnullorempty (request.querystring ["" pageIndex "])) {if (! int.TryParse (request.querystring [" pageIndex "] ، Out PageIndex)) {pageIndex = 1 ؛}} const int pagesize = 2 ؛ totalcount total ؛ iEnumerable <CarComment> list = dal.getList (pageIndex ، pagesize ، Out TotalPageCount ، Out TotalCount ، "carid =" + id) ؛ var commandipagedlist = new staticpagedlist <carComment> (list ، pageIndex ، pagesize ، convert.toint32 (totalCount) ؛ CompletIpagedList.pageCount + "،/" CurrentPage/":" + commentipagedlist.pagenumber + "،/" list/":" + jsonconvert.serializeObject (list) + "}" ؛ إرجاع JSON (Strresult ، JsonRequestbehavior.allowget) ؛}رمز JS
<script type = "text/javaScript"> $ (document) .Ready (function () {var carid = 1 ؛ $ العنصر) {// transtraigh $ ("#list"). إلحاق ('<sable>') ؛ $ ("#list"). إلحاق ('<tr>') ؛ $ ("#list"). إلحاق ('<td> Completer </td>') ؛ $ ("#list"). oppend ('<td>'+item.Userprofileid+') ") ؛ $ ("#list "). إلحاق ('<tr>') ؛ $ ("#list "). إلحاق ('<td> المحتوى </td>') ؛ $ ("#list "). إلحاق ('<td>' '+item.content+' </td> ') ؛ $ ("#list "). }) eval ("(" + data + ")"). page page ؛ "الصفحة الرئيسية" ؛ الحالة "السابقة": إرجاع "الصفحة السابقة" ؛ الحالة "التالي": العودة "الصفحة التالية" $ .ajax ({url: "/car/comment؟ id =" + carid ، type: "post" ، data: "page =" + page ، success: function (data1) {if (data1! = null) {$ ("#list"). html ( $ (" #list"). إلحاق ('<table style = "الحدود: 1px solid #00ced1 ؛ العرض: 300px "> ') ؛ $ ("#list "). إلحاق (' <tr> ') ؛ $ ("#list "). إلحاق (' <td> Coaterer </td> ') ؛ $ ("#list "). إلحاق (' <td> '+item.userProfileId+' </td> ') ؛ $ ("#list "). $ ("#list"). إلحاق ('<tr>') ؛ $ ("#list"). إلحاق ('<td>') ؛ $ ("#list"). إلحاق ('<td>'+item.content+'</td>') ؛ $ ("#list"). إلحاق ('</tr>') ؛ $ ("#list"). }) ؛}}}) ؛}ما سبق هو تحديث الصفحة بناءً على bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!