最新のASP.NETMVCプロジェクトでは、データリストの分類が必要です。これはもともとブートストラップに基づいて開発されたバックエンドであるため、ブートストラップにはページングプラグインがあるのか、それともjQueryによってサポートされているページング機能があるのだろうか、そのため、自分で一連のページング機能を書くことなく、ウェブサイト全体のバックエンドスタイルを統合できます。
最初のことは、Bootstrap Paginatorをダウンロードすることです。アドレスをダウンロード：Bootstrap Paginator Paginatorプラグイン
まず、JSおよびCSSファイルをビューの上に紹介する必要があります。 3つの主要なファイル、つまり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> <"text/javascript" src = "js/boottrap-paginator.js"> </script>
その後、ページネーション関数はもちろん、Ajaxに基づいたローカルリフレッシュです。以前はEasyUiページングをしていましたが、今回は少し違うはずです。
<Script> $（function（）{var carid = 1; $ .ajax（{url： "/oa/sited/getdate"、datatype： 'json'、タイプ： "post"、data： "id =" + carid、success：function（data）{if（data！= null）{$ .each）{$ crime（ " + date +"） "） $（ "<table id =" data_table "> '）; $（ '<th> remarks </th>'）; $（ "<tbody> '）; $（ "＃list"）。 ）; "> delete </button> '）; $（"＃list "）。append（' </td> '）; $（"＃list "）。 $（ '<td>' + '</td>'）。 currentPage = eval（ "（" + data + "））。ケース「次のページ」：return "last page" page "：return event。 function（data1）{if（data1！= null）{$ .each（eval（ "（" + data + "）"）。リスト、function（index、item）{//返されたjson $（ "＃list"）。 $（ "<th> id </th> '）; $（ "<th> remarks </th> '）; '</td>'）; append（ '<td>'）; ）; "> modify </button> '）; $（"＃list "） $（ '<tr>'）; }};ビューの主な部分には、2つのDIVがあります。1つはデータリストを提示するためのもの、もう1つは選択ページのナビゲーションを配置するためです。
<div> <label>部門リスト</label> <hr/> <div id = "list"> </div> <div id = "emple"> </div> </div>
バックグラウンドのgetDateメソッドは次のようなものです。
public ActionResult getDate（int id、int？page）{int pageindex = page ?? 1; //現在のページconst int pagesize = 2; //これは、各ページに表示されるデータの数を設定するために使用されます。グローバルコントロールのためにこれをweb.configに書き込むことをお勧めします//部門データを表示するienumerable <model.qgoa_department> list = operatecontext.current.bllsession.iqgoa_departmentbll.getPagedList（pageindex、pagesize、x => x.id！= x => x.id）; //データの数を取得int rowcount = list.count（）; //計算により、ページを複数のページに分割する必要があります。 1ページ未満のデータは、1ページの場合（rowcount％pagesize！= 0）{rowcount = rowcount / pagesize + 1; } else {rowcount = rowcount / pagesize; } // json形式に変換var strresult = "{/" pagecount/"："+rowcount+"、/" currentPage/"："+pageindex+"、/" list/"："+jsonconvert.serializeObject（list）+"}"; return json（strresult、jsonrequestbehavior.allowget）; }この方法はまだ少し欠陥があり、上記のページサイズが構成ファイルweb.configを読み取ることでグローバルに変更できるように、より完全に書くことができます。さらに、ページ属性などの情報については、ページ番号、現在のページ、データ数量など、情報を保存するクラスを作成できます。ウェブサイトのプロジェクトが大きい場合、独自のコードを変更する方が便利です。
最終的なディスプレイ効果は次のとおりです。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記は、私があなたと共有したブートストラップページネーターページングプラグインの使用です。 Bootstrap Paginator Pagingプラグインの使用を習得することが役立つことを願っています。