ブートストラップに基づいてローカルリフレッシュページングインスタンスコードの実装

私の以前の作品では、私は多くのページネーションを使用しましたが、それは堅実ではなかったので、使いやすいことではありません。これは、部分的な更新を伴うページネーションです。たくさん試しました。 mvcpagerを使用して部分的に更新したかったのですが、コストが高すぎると考えると、あきらめました。最初にブートストラップに基づいてページネーションを要約してみましょう。

オープンソースアドレスhttps://github.com/lyonlai/bootstrap-paginator

最初に引用

jquery

bootstrap.min.js

bootstrap-paginator.min.js

コントローラーコード

[AutherizationCodeAttribute] [説明（ "コメント情報"）] [httppost] public ActionResultコメント（int id、int？page）{＃regionコメントリスト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 totalpagecount; IEnumerable <Carcomment> list = dal.getList（pageindex、pagesize、out totalpagecount、out totalcount、 "carid =" + id）; var commentipagedlist = new staticpagedlist <carcomment>（list、pageindex、pagesize、convert.toint32（total -count = rres/sprus form to json form to json forc "{/" pagecount/"：" + commentipagedlist.pagecount + "、/" currentPage/"：" + commentipagedlist.pageNumber + "、/" list/"：" + jsonconvert.serializeObject（list） + "}"; return json（strresult、jsonrequestbehavior.allowget）;}

JSコード

<script type = "text/javascript"> $（document）.ready（function（）{var carid = 1; $。ajax（{url： "/care/comment"、datacype： 'json'、 "post"、data： "id =" + carid、success：function（data）{if！ {//返されたjsonを翻訳します$（ "＃list"）。append（ '<table>'）; $（ "＃list"）。append（ '<tr>'）; $（ "＃list"）。append（ '<td> commenter </td>'）; $（ "＃list"） '）; $（ "＃list"）。append（' <tr> '）; $（ "＃list"）。 // select option $（ "＃commentlist"）。 data + "）"）。 "Homepage"; case "prev"：return "pregious page"; case "next"：return "next page"; case "last"; case "page"：return page "：return page;} // pageurl：function（type、page、current）{// return"/car/details？page = " + page;}、 $ .ajax（{url： "/car/comment？id =" + carid、type： "post"、data： "page =" + page、success：function（data1）{if（data1！= null）{$（ "＃list"）。 $（ "＃list"）。append（ '<table style = "border：1px solid＃00ced1; width： 300px "> '）; $（"＃list "）。append（' <tr> '）; $（"＃list "）。append（' <td> commenter </td> '）; $（"＃list "）。 $（ "＃list"）。append（ '<tr>'）; $（ "＃list"）。append（ '<td>'）; $（ "＃list"）。 }）;}}

上記は、編集者が紹介したブートストラップに基づくページの更新です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！