如何根据名称，升序和降序对列进行排序

我迫切需要使用来自http://tablesorter.com/的jQuery和tablesorter插件的帮助。如何根据名称，升序和降序对列进行排序

我想要做的是当我点击我的html中的一个按钮，弹出一个新窗口并使用ajax，我也使用PHP在数据库中显示窗口中的数据。

到目前为止，我一直在使用原始的JavaScript代码，所以现在我已经停下来了，因为我必须按照字母升序和降序对列进行排序。所以我的问题是：

我从哪里开始？我已经下载了所需的文件（jqeury.tablesorter.js和jquery-2.1.4.min.js），并且将它包含在用于弹出窗口的html文件中。（我做我的JavaScript代码的外部文件称为function.js）
```
<script type="text/javascript" src="jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.js"></script> 
```
如果我只是想排序一列，其中包括姓名，按字母升序或反之亦然当我点击HEADER，有没有更简单的方法来做到这一点？（这个问题假设我不使用tablesort插件）

注意：请把我当作超级初学者，因为我只知道jQuery的基础知识。

在我的PHP文件：

       . 
           . 
          Some Codes 
           . 
           . 

if($num_row) 
    { 
     $count = 0; 

     echo "<table id='table2' class='table2' border=1>"; 

     //Table headers 
     echo "<tr><th>ID</th>"; 
     echo "<th>Name</th>"; 
     echo "<th>Badge Number</th>"; 
     echo "<th>Category</th>"; 
     echo "<th>Action</th>"; 

     while($row = mysql_fetch_array($result)) 
     { 
      $id = $row['id']; 
      $name = $row['name']; 
      $badge_number = $row['badge_number']; 
      $category = $row['category']; 
      $privilege = $row['privilege']; 
      $count++; 

      echo "<tr>"; 
      echo "<td id=\"row$count\">$id</td>"; 
      echo "<td>$name</td>"; 
      echo "<td>$badge_number</td>"; 
      echo "<td>$category</td>"; 
      echo "<td><input type=\"button\" name=\"delete\" value=\"Delete\" onclick=\"deleteThis($count, $privilege)\"/></td>"; 
      echo "</tr>"; 

     } 
     echo "</table>"; 
          . 
          . 
          Other codes 
          . 
          .

，我使用了弹出窗口又名viewTable.html HTML文件：

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
    <script language="javascript" src="function.js" type="text/javascript"></script> 
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script> 
    <script type="text/javascript" src="jquery.tablesorter.js"></script> 
</head> 

<body> 
     <script>displayTable();</script> 
     <div id="divTable"></div> 
<body> 
</html>

这是在我的外部JavaScript的JavaScript功能之一文件，function.js，使用ajax只是为了显示当前如何显示表格和我目前的知识：

function displayTable() 
{ 
window.onload = function() 
{ 
    var page = "database.php" 
    var parameters = 'action=update'; 
    var xmlhttp = new XMLHttpRequest(); 

    if(xmlhttp==null) 
    { 
     alert("Your browser does not support AJAX!"); 
     return false; 
    } 
    xmlhttp.onreadystatechange=function() 
    {  
     document.getElementById("divTable").innerHTML=xmlhttp.responseText; 
     sorrtable.makeSortable(sortThis); 
    }; 
    xmlhttp.open("GET", page+"?"+parameters, true); 
    xmlhttp.send(null); 
    } 
}//displayTable()

来源

2015-05-19 hzq

你为什么不返回从PHP本身排序的结果？试试看。 –

但我首先需要原始结果，因为它基于ID，所以这就是我返回正常结果的原因。现在，我希望用户能够点击标题，以便对名称进行排序。 – hzq

你可以用tablesorter：sortlist来完成。

<script type="text/javascript"> 
    $(function() { 
     $("#tablesorter-demo").tablesorter({ theme: 'blue', 
              widgets: ['saveSort','zebra','resizable','filter'], 
              initialized: function (table) { 
              //$.tablesorter.setFilters(table, ['', '' ], true); 
             $.tablesorter.setFilters(table, ['', '', '!= USA' ], true); 
    } 

              });//, widgets: ['zebra']}); //sortList:[[0,0],[2,1]], 
     // initialized abc http://jsfiddle.net/Mottie/abkNM/785/ 
     //http://mottie.github.io/tablesorter/docs/example-widget-filter-custom.html 



     //$("#options").tablesorter({sortList: [[0,0]], headers: { 3:{sorter: false}, 4:{sorter: false}}}); 

     //hier staat de input boxes example: http://mottie.github.io/tablesorter/docs/example-widget-grouping.html 
    }); 
    </script>

来源

2015-05-19 08:25:54 tijnn

这个，我根本不懂。首先，你是从哪里得到＃tablesorter-demo，或者从哪里得到/应该是哪里？我需要某种解释才能够理解。 – hzq

我不知道php部分，但这里是客户端编码需要; Ajax请求被设置，使其在工作的jsfiddle这样去改变它为您的网站，删除了ajax method，data并更改url指向PHP页面（demo）

$(function() { 

    $("#dialog").dialog({ 
    autoOpen: false, 
    height: 400, 
    width: 650, 
    modal: true 
    }); 

    $("#open").on("click", function() { 
    $("#dialog").dialog("open"); 
    var page = 1, 
     parameters = 'action=update'; 
    displayTable(page, parameters); 
    }); 

    var initTable = function(data) { 
    var $table = $('#dialog table'); 
    $table.find('tbody').append(data); 
    if ($table[0].config) { 
     // tablesorter already initialized; now update the data 
     $table.trigger('update'); 
    } else { 
     $table.tablesorter({ 
     debug: true, 
     theme: 'blue', 
     widthFixed: true, 
     widgets: ['zebra', 'filter', 'columns'] 
     }); 
    } 
    }, 
    displayTable = function (page, parameters) { 
    $.ajax({ 
     dataType: 'html', 
     url: 'database.php?get=' + page + '&' + parameters 
    }).done(function (data) { 
     initTable(data); 
    }); 
    }; 

});

来源

2015-05-20 18:57:22 Mottie

如何根据名称，升序和降序对列进行排序

回答

相关问题