부트 스트랩을 사용하여 페이지 매김을 만드는 방법

부트 스트랩, 아약스 및 jQuery를 사용하여 페이지 매김 페이지를 만들었습니다. 그러나 그것을 보는 데 문제가 있습니다. 버튼 1,2,3, 그리고 컨테이너 div를 만들었습니다. 처음에는 jQuery와 Ajax를 사용하여 5 개의 행을 표시했습니다. 하지만 2 (두 번째 버튼) 버튼을 클릭하면 컨테이너 div에 처음 표시된 5 개의 행과 함께 5 개의 새 행이 표시됩니다. 버튼을 클릭 할 때 새 행이 이전 행 아래에 추가됩니다. 버튼을 클릭하면 이전 행을 어떻게 제거 할 수 있습니까?부트 스트랩을 사용하여 페이지 매김을 만드는 방법

아래 주어진 내 코드입니다 :

<html> 
<body> 
<div class="container"> 
    </div> 
    <ul id="btns" class="pagination"></ul> 
    </body> 
<script> 
      var current_page=1; 
      function change_page(page_no) 
       { 
       student(page_no); 
       } 
      $(document).ready(function() 
       {   
       student(1); 
      }); 
      function student(page_no){ 
      var data1 = "" 
      var total_rows=""  
      $.ajax({ 
       type: "POST", 
       data:{ "page": page_no}, 
       url: "ajax_connect.php",    
       dataType: "html", 
      success: function(rows) 
      { 
       console.log(JSON.parse(rows)) 
       rows = JSON.parse(rows) 
       total_rows=rows.data; 
       table(total_rows); 
       total_buttons=rows.count/5; 
       total_buttons=total_buttons+1; 
       button(total_buttons); 
        } 
       }) 
      } 

function table(total_rows) 
    { 
     html+= "<div class='table-responsive' id='keywords'>"; 
     html+= "<table class='table table-bordered table-striped'>"; 
     html+= "<thead>" + 
       "<tr>" + 
        "<th><a id='emp_id'>Employee Id</a></th>" + 
        "<th><a id='emp_name'>Employee Name</a></th>" + 
        "<th><a id='email'>Email</a></th>" + 
        "<th><a id='message'>Message</a></th>" + 
        "<th><a id='date'>Date</a></th>" + 
       "</tr>" + 
       "</thead>"; 
     //function table(total_rows) 
     for (var i in total_rows) 
     { 
      var row = total_rows[i]; 
      //var row = rows[i]; 
      var employee_id = row[0]; 
      var employee_name = row[1]; 
      var email = row[2]; 
      var message = row[3]; 
      var date = row[4]; 
      html+= "<tr>" + 
        "<td width='25%'>" + employee_id + "</td>" + 
        "<td width='25%'>" + employee_name + "</td>" + 
        "<td width='25%'>" + email + "</td>" + 
        "<td width='25%'>" + message + "</td>" + 
        "<td width='25%'>" + date + "</td>" + 
       "</tr>";     
     } 
     html+= "</table>"; 
     html+= "</div>"; 
     $(".container").html(html); 
    } 
    function button(total_pages) 
    {  
    var buttons = "<ul class='pagination' align='center' >" 
    for (var i = 1; i<=total_pages; i ++) 
     { 
     buttons += "<li><a id= "+i+" onclick= 'change_page(" +i+ ")' href= '#'>"+i+"</a></li>" 
     } 
    buttons += "</ul>"; 
    $(".pagination").html(buttons); 
    } 
    </script> 
    </html>

들이 잘 작동하는 아약스 URL 부분을 무시합니다.

출처

2017-01-13 Birju

함수 내에서 var 키워드를 사용하여 html을 선언하지 않았으므로 전역 범위에서 선언되었습니다. 함수 테이블()을 실행할 때마다 html의 내용이 + = assignment로 확장됩니다.

귀하의 수정 테이블() 함수 정답이다

var html = "<div class='table-responsive' id='keywords'>";

출처

2017-01-13 10:40:47

의 첫 번째 줄에있을 것입니다. 새 테이블을 추가 할 때 html로 이전에 추가 된 항목을 지우고 새 항목을 추가하려는 경우. –

대단히 감사합니다. 지금 작동합니다. – Birju

부트 스트랩을 사용하여 페이지 매김을 만드는 방법

답변

관련 문제