Wie man Paginierung mit Bootstrap

machen Ich machte eine Seitenumbruch Seite mit Bootstrap, Ajax und jQuery. Aber ich habe ein Problem beim Betrachten. Ich habe einen Knopf 1,2,3, ...... und einen Container div. Erstellt. Ich habe anfangs 5 Zeilen mit jQuery und Ajax angezeigt. Aber wenn ich auf die Schaltfläche 2 (zweite Schaltfläche) klicke, werden neue 5 Zeilen zusammen mit den vorherigen 5 Zeilen angezeigt, die anfänglich in einem Container-Div angezeigt werden. Die neuen Zeilen werden unterhalb der vorherigen Zeilen hinzugefügt, wenn ich auf Schaltflächen klicke. Wie kann ich die vorherigen Zeilen entfernen, wenn ich auf Schaltflächen geklickt habe?Wie man Paginierung mit Bootstrap

Die unten angegebene ist mein Code:

<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>

Ignorieren Sie die Ajax-URL Teil sie fein arbeiten.

Quelle

2017-01-13 Birju

Da Sie Ihr HTML nicht mit dem Schlüsselwort var in einer Funktion deklariert haben, wird es im globalen Gültigkeitsbereich deklariert. Jedes Mal, wenn Sie die Funktion table() ausführen, wird der Inhalt von html um + = Zuweisung erweitert.

Ihr fix würde

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

Quelle

2017-01-13 10:40:47

in der ersten Zeile der Tabelle() Funktion sein, die die richtige Antwort ist. Wenn Sie eine neue Tabelle anhängen möchten, löschen Sie die zuvor angefügten Einträge in HTML und fügen Sie dann neue hinzu. –

Vielen Dank, es funktioniert jetzt. – Birju

Wie man Paginierung mit Bootstrap

Antwort

Verwandte Themen