Implement partial refresh paging instance code based on BootStrap and bootstrap Paging

Implement partial refresh paging instance code based on BootStrap and bootstrap Paging

In my previous work, I used a lot of paging pages, which were not strong, so I was not very comfortable with using them. This is a partial refresh page. I tried a lot, I wanted to use mvcPager for partial refresh, but considering the high cost, I gave up. Let's take a look at the bootstrap-based Paging for future use.

Open Source Address https://github.com/lyonlai/bootstrap-paginator

First reference

Jquery

Bootstrap. min. js

Bootstrap-paginator.min.js

Controller code

[AuthorizationCodeAttribute] [Description ("Comment")] [HttpPost] public ActionResult Comment (int id, int? Page) {# region comment 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; long totalCount; long totalPageCount; IEnumerable <CarComment> list = dal. getList (pageIndex, pageSize, out totalPageCount, out totalCount, "CarId =" + id); var commentIPagedList = new StaticPagedList <CarComment> (list, pageIndex, pageSize, Convert. toInt32 (totalCount); # endregion // convert to the Json format var strResult = "{\" pageCount \ ":" + commentIPagedList. pageCount + ", \" CurrentPage \ ":" + commentIPagedList. pageNumber + ", \" list \ ":" + JsonConvert. serializeObject (list) + "}"; return Json (strResult, JsonRequestBehavior. allowGet );}

Js Code

<Script type = "text/javascript"> $ (document ). ready (function () {var carId = 1; $. ajax ({url: "/car/Comment", datatype: 'json', type: "Post", data: "id =" + carId, success: function (data) {if (data! = Null) {$. each (eval ("(" + data + ")"). list, function (index, item) {// traverse the returned json $ ("# list "). append ('<table>'); $ ("# list "). append ('<tr>'); $ ("# list "). append ('<td> reviewer </td>'); $ ("# list "). append ('<td>' + item. userProfileId + '</td>'); $ ("# list "). append ('</tr>'); $ ("# list "). append ('<tr>'); $ ("# list "). append ('<td> content </td>'); $ ("# list "). append ('<td>' + item. content + '</td>'); $ ("# list "). append ('</tr>'); $ ("# list "). append ('</Table>');}); // Add select option $ ("# commentList "). append ('<div id = "pager"> <ul id = "page"> </ul> </div> '); var element = $ ("# page"); var pageCount = eval ("(" + data + ")"). pageCount; // retrieve the pageCount in the returned Json data (convert the returned data to the object type) var currentPage = eval ("(" + data + ")"). currentPage; // In the returned Json data, CurrentPagevar options = {bootstrapMajorVersion: 3, // version currentPage: currentPage, // the current page number numberOfPages: 5, // set Number of displayed pages totalPages: pageCount, // total number of pages itemTexts: function (type, page, current) {switch (type) {case "first": return "Homepage "; case "prev": return "previous"; case "next": return "next"; case "last": return "last"; case "page": return page ;} /// pageUrl: function (type, page, current) {// return "/car/Details? Page = "+ page;}, // click the event onPageClicked: function (event, originalEvent, type, page) {$. ajax ({url:"/car/Comment? Id = "+ carId, type:" Post ", data:" page = "+ page, success: function (data1) {if (data1! = Null) {$ ("# list" cmd.html (""); $. each (eval ("(" + data1 + ")"). list, function (index, item) {// traverse the returned json $ ("# list "). append ('<table style = "border: 1px solid #00ced1; width: 300px">'); $ ("# list "). append ('<tr>'); $ ("# list "). append ('<td> reviewer </td>'); $ ("# list "). append ('<td>' + item. userProfileId + '</td>'); $ ("# list "). append ('</tr>'); $ ("# list "). append ('<tr>'); $ ("# list "). append ('<td> content </td>'); $ ("# list "). append ('<td>' + item. content + '</td>'); $ ("# list "). append ('</tr>'); $ ("# list "). append ('</table>') ;}}}) ;}}; element. bootstrapPaginator (options );}}});});

The above section describes how to implement partial refresh pages based on BootStrap. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!