부트 스트랩을 기반으로 한 로컬 새로 고침 페이징 인스턴스 코드 구현

이전 작업에서는 많은 페이지 매김을 사용했지만 견고하지는 않았으므로 사용하기 쉽지 않습니다. 이것은 부분적으로 새로 고침이있는 페이지 매김입니다. 나는 많이 시도했다. 부분 새로 고침을 위해 MVCPager를 사용하고 싶었지만 비용이 너무 높다는 점을 고려하면 포기했습니다. Bootstrap을 기반으로 한 페이지 매김을 먼저 요약하여 나중에 사용할 수 있도록 편리 할 수 있습니다.

오픈 소스 주소 https://github.com/lyonlai/bootstrap-paginator

먼저 견적

jQuery

bootstrap.min.js

Bootstrap-paginator.min.js

컨트롤러 코드

 [AuthorizationCodeAttribute] [설명 ( "댓글 정보")] [httppost] public actionResult 댓글 (int id, int? page) {#지역 댓글 목록 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 pageize = 2; 긴 총 카운트; iEenumerable <CarComment> list = dal.getList (pageIndex, pagesize, out totalpagecount, out totalcount, "carid =" + id); var campleAgagedList = new staticPagedList <carcomment> (목록, pageIndex, pageInd, convert.toint32 (totalcount)); "{/"pagecount/":" + campleipagedList.pageCount + ",/"currentPage/":" + camilIpgingList.pagenumber + ",/"list/":" + jsonConvert.SerializeObject (list) + "}"; Return JSON (Strresult, JsonRequestBehavior.allowget);}

JS 코드

 <script type = "text/javaScript"> $ (document) .ready (function () {var carid = 1; $. {// 반환 된 JSON을 트랜스 트레이니트합니다 $ ( "#list"). Append ( '<table>'); $ ( "#list"). Append ( '<tr>'); $ ( "#list"). Append ( '<td> commenter </td>'); $ ( "#list"). 부록 ( '<td>'+item.userProfileId+'</td>'); $ ( "#lest ("#") '); $ ( "#list"). Append ('<tr> '); $ ( "#list"). Append ('<td> content </td> '); $ ( "#list"). Append ('<td> '+item.content+'</td> '); $ ( "#list"). Append ('#'); "#"); });/"#commentlist"). Append ( '<div id = "pager"> <ul id = "page"> </ul> </div>'); var var pagecount = eval ( " + data +"); Data + ")"). CurrentPage; // 반환 된 JSON Data CurrentPageVar 옵션으로 이동합니다. "HomePage"; case "prev"; Ret $ .Ajax ({url : "/car/comment? id =" + carid, type : "post", data : "page =" + page, success : function (data1) {if (data1! = null) {$ ( "#list"). html ( ""); $. 각 ( " + data1 +"). $ ( " #list"). Append ( '<테이블 스타일 = "테두리 : 1px solid #00ced1; 너비 : 300px "> '); $ ("#list "). Append ('<tr> '); $ ("#list "). Append ('<td> commenter </td> '); $ ("#list "). Append ('<td> '+item.userprofileid+'</td> '); $ ("#list "). $ ( "#list"). Append ( '<tr>'); $ ( "#list"). Append ( '<td>'); $ ( "#list"). Append ( '<td>'+item.content+'</td>'); $ ( "#list"). Append ( '</tr>'); $ ( "#list"). });}}});}}; element.bootstrappaginator (옵션);}});});

위는 편집기가 소개 한 부트 스트랩을 기반으로 한 페이지 새로 고침입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!