jquery를 사용하여 html로 페이지 매김을 만드는 방법

아래 HTML 태그가 있습니다. 페이지에는 n 개의 버튼과 각 테이블이 있습니다. 페이지가 동적이며 데이터가 공급되는 백엔드마다 데이터가 증가하거나 감소 할 수 있습니다. 페이지 매김을 구현하고 페이지 당 2 개의 버튼과 표만 보여주고 싶습니다. 사용자가 남은 데이터를보기 위해 페이지 매김을 사용해야한다는 것을 알고 싶다면.jquery를 사용하여 html로 페이지 매김을 만드는 방법

<html> 
     <body> 
     <div id="tab"> 
      <div> 
      <button type="button" class="button">Source_1</button> 
      </div> 
      <div class="logtitude"> 
      <table class="data_table"> 
      <tr> 
      <th>111</th> 
      </tr> 
      <tr> 
      <td>111</td> 
      </tr> 
      </table> 
      </div> 
      <div> 
      <button type="button" class="button">Source_2</button> 
      </div> 
      <div class="logtitude"> 
      <table class="data_table"> 
      <tr> 
      <th>222</th> 
      </tr> 
      <tr> 
      <td>222</td> 
      </tr> 
      </table> 
      </div> 
      <div> 
      <button type="button" class="button">Source_3</button> 
      </div> 
      <div class="logtitude"> 
      <table class="data_table"> 
      <tr> 
      <th>333</th> 
      </tr> 
      <tr> 
      <td>333</td> 
      </tr> 
      </table> 
      </div> 
     </div> 
     </body> 
    </html>

누군가 나를 단지 2 <div>buttons</div> 페이지 당 표시 할 페이지 매김을 달성하는 데 도움이 될 수 있습니다.

출처

2017-11-24 ArrchanaMohan

페이징 생성을위한 미리 읽기 플러그인의 경우 https://stackoverflow.com/questions/7000048/slickgrid-vs-jqgrid 및 https://www.slant.co/versus/4837/4840/~jqgrid_vs_datatables를 참조하십시오. jqgrid는 포맷터 옵션을 제공하여 셀에 대한 고유 html을 작성합니다. – Anil

어떻게 다음이 사이트 http://www.learningjquery.com/2017/03/add-pagination-to-html-table-using-jquery 을 시도 묻는 경우가 몇 가지 정보를 가지고 있지만 당신이 자습서를 만드는 경우 .... 잘은

출처

2017-11-24 04:52:41 CryTech

당신은 jQuery를 데이터 테이블을 사용할 수 있습니다 잘못되지 않습니다, 그것은 매우 간단하고 PAGINATION, SORT, SEARCH 기능과 함께 사용하기 쉽습니다.

<link rel="stylesheet"href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> 

<script type="text/javascript" src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 

$(document).ready(function(){ 
    $('.data_table').DataTable(); 
});

위의 샘플 u는 다른 클래스 이름 또는 ID로 여러 데이터 테이블을 만들 수 있습니다.

출처

2017-11-24 05:08:10

정말 고마워요. 내 업데이트를 시도하고 게시하겠습니다. – ArrchanaMohan

아래 오류 메시지가 있습니다. DataTables 경고 : 테이블 노드가 아닌 초기화 (DIV). 이 오류에 대한 자세한 내용은 http://datatables.net/tn/2를 참조하십시오. 나는 버튼 div 태그만으로 테이블을 페이지 매김하는 대신 테이블을 페이지 매김하려고 노력하고있다. – ArrchanaMohan

div와 테이블 모두에 대해 동일한 클래스 이름 또는 ID 이름을 사용하고있을 수 있습니다. –

jquery를 사용하여 html로 페이지 매김을 만드는 방법

답변

관련 문제