Question

我使用bootstrap，ajax和jQuery创建了一个分页页面。但我在查看它时遇到了问题。我创建了一个按钮1,2,3，......和一个容器div。我最初使用jQuery和Ajax显示了5行。但是，当我单击2（第二个按钮）按钮时，将显示新的5行以及最初在容器div中显示的前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>

忽略他们工作正常的ajax网址部分。

Answer 1

由于您未在函数内使用var关键字声明您的html，因此在全局范围内声明了它。每次运行函数表（）时，html的内容都会扩展为+ =赋值。

您的修复将位于table（）函数的第一行

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

如何使用bootstrap进行分页

1 个答案: