Question

我有一个代码从数据库中提取数据并使用jQuery显示数据列表。我想在我的代码中进行一些修改，即如果我单击一个表头，它应该按升序和降序切换列表。

下面给出的是我的PHP代码。

<html>
 <head>
  <link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css">
  <script src="bootstrap/jquery-3.1.1.min.js"></script>
  <script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
 </head>
<body>
 <div class="container">
 </div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script id="source" language="javascript" type="text/javascript">
   $('#output').append("<br /><h3><center>Employee Table</center></h3>");
  // function explode(){
   $('#output').append("<input type='hidden' id='sort' value='asc'>");
    var html = "<br /><h1><center><b>Employee Table</b></center></h1>";
    $.ajax({                                      
     url: 'test2db.php', data: "", dataType: 'json', success: function(rows)       
      {
        html+= "<div class='table-responsive'>";
        html+= "<table  class='table table-bordered table-striped'>";
        html+=  "<tr>" +
                  "<th>Employee Id</th>" +
                  "<th>Employee Name</th>" +
                  "<th>Email</th>" +
                  "<th>Message</th>" +
                  "<th>Date</th>" +
                "</tr>"
        for (var i in rows)
         {
          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);
      }
     });
</script>
</body>
</html>

以下给出的是我的数据提取代码

<?php 
  mysql_connect("localhost", "root", "password") || die(mysql_error());
  mysql_select_db("emp") || die(mysql_error());
  $result = mysql_query("SELECT * FROM employee ORDER BY id DESC LIMIT 5");
  $data = array();
  while ( $row = mysql_fetch_row($result) )
   {
    $data[] = $row;
   }
  echo json_encode( $data );
?>

Answer 1

您可以使用Datatable Plugin来实现此目的。

这非常容易，您可以添加更多功能，例如搜索，导入到csv，pdf等到您的表格（如果需要）。

我强烈建议您使用Datatable Plugin

Answer 2

http://blog.teamtreehouse.com/how-to-code-sortable-tabular-data-with-jquery

查看上面链接的逻辑并使用它。它的简单和源代码可用。

在点击表头上用ajax排序表

2 个答案: