최신 ASP.NETMVC 프로젝트에는 데이터 목록의 분류가 필요합니다. 이것은 원래 Bootstrap을 기반으로 개발 된 백엔드이므로 Bootstrap에 페이징 플러그인 또는 jQuery가 지원하는 페이징 기능이 있는지 여부는 전체 웹 사이트 백엔드 스타일을 직접 작성하지 않고도 통합 할 수 있습니다.
첫 번째는 Bootstrap Paginator를 다운로드하는 것입니다. 주소 다운로드 : Bootstrap Paginator Paginator 플러그인
우선, JS 및 CSS 파일은보기 위에서 도입되어야합니다. 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> <script type = "text/javascript"src = "js/bootstrap-paginator.js">
그런 다음 Pagination Function은 물론 Ajax를 기반으로 한 로컬 새로 고침으로 우리를 끌어들입니다. 물론 이것은 jQuery의 지원이 필요합니다. 나는 Easyui 페이징을했는데 이번에는 조금 달라야합니다.
<script> $ (function () {var carid = 1; $ .ajax ({url : "/oa/setting/getdate", datatype : 'json', type : "post", data : "id =" + carid, success : function (data) {if (data! = null) {$ .Each (Eval ( " + data +") "). $ ( '#list ". $ ( "#list". $ ( "#list"); $ ( "#list"); $ ( "#list"( "#list"); $ ( "<tr> '); $ ( "#list". ); "> delete </button> '); $ ("#list "). Append ('</td> '); $ ("#list "). Append ('</tr> '); $ ("#list "). Append ('</tbody> '); $ ("#list "). Append ('<tr> '); $ ( "#list". currentPage ( "(" + data + ")". currentPage; "Next Page" "마지막 페이지": "마지막 페이지"; return page}}; (data1) {if (data1! = null) {$ .Each (Eval ( "(" + data + ")"). 목록, 함수 (색인, 항목) {// 반환 된 JSON $ ( "#list")를 transtraight ( '<table = "data_table">'); $ ( "#list"). 부록 ( '<th>'); $ ( "#list". $ ( "#list". $ ( "#list") ( "#list"); '</td>'). ); "> modify </button> '); $ ("#list "). Append ('<button onclick ="edit ( ' + item.id +'); "> delete </button> '); $ ("#list "). Append ('</td> '); $ ("#list "). Append ('</tr> '); $"); $ ( '#list ") ('<td> '); }}}}; $ ( '#example')보기의 주요 부분에는 데이터 목록을 제시하기위한 두 개의 div가 있고 다른 하나는 선택 페이지의 탐색을 배치하기위한 두 개의 div가 있습니다.
<div> <label> 부서 목록 </label> <hr/> <div id = "list"> </div> <div id = "example"> </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, x => x.id! = null, x => x.id); // 데이터 수를 가져옵니다 int rowCount = list.count (); // 계산을 통해 페이지를 여러 페이지로 나눌 필요가 있습니다. 한 페이지 미만의 데이터는 한 페이지에 따라 계산됩니다. } 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 플러그인의 사용을 마스터하는 것이 도움이되기를 바랍니다.