如何根据名称对列进行排序，升序和降序 [英] How to sort column according to name, ascending and descnding
问题描述
我迫切需要使用 http://tablesorter.com/上的jQuery和tablesorter插件的帮助.
I am in desperate need help on using jQuery and tablesorter plugin from http://tablesorter.com/.
我想做的是，当我单击html中的一个按钮时，一个新窗口弹出并使用ajax，我也使用PHP在数据库中显示该数据.
What I want to do is when I click a button in my html, a new window pops up and using ajax, I display the data in the window from the database, using PHP as well.
到目前为止，我一直在使用原始的javascript代码，所以现在我已经停下来了，因为我必须根据字母的升序和降序对列进行排序.所以我的问题是:
So far I've been using raw javascript codes so now I've come to a stop as I have to sort a column according to alphabetical ascending and descending order. So my questions are:
-
我从哪里开始?我已经下载了所需的文件(jqeury.tablesorter.js和jquery-2.1.4.min.js)，并将其包含在用于弹出窗口的html文件中. (我在名为function.js的外部文件上执行javascript代码)
Where do I start? I have downloaded the files required (jqeury.tablesorter.js and jquery-2.1.4.min.js) and I have included it in the html file that I used for my pop up window. (I am doing my javascript codes on an external file called function.js)
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
如果我只想按字母升序对由名称组成的一列进行排序，或者反之亦然.单击标题时，是否有更简单的方法呢? (这个问题是假设我是否不使用tablesort插件)
If I just want to sort one column, which consists of names, according to ascending alphabetical order or vice versa WHEN I CLICK THE HEADER, is there an easier way to do it? (This question is assuming if I do not use the tablesort plugin)
注意:请不要将我视为超级初学者，因为我只了解jQuery的基础知识.
Note: Please do treat me as a super beginner as I only know the basics of 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
.
.
我用于弹出窗口的html文件又称为viewTable.html:
The html file that I use for the pop up window aka viewTable.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文件function.js中的javascript函数之一，它使用ajax来显示当前如何显示表格和当前知识:
This is one of the javascript functions in my external javascript file, function.js, using ajax just to show currently how I display the table and my current knowledge:
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()
推荐答案
我不了解php部分，但这是需要的客户端编码.设置了ajax请求使其可以在jsFiddle中运行，因此要针对您的网站进行更改，请删除ajax method，data并将url更改为指向php页面(
I don't know about the php part, but here is the client-side coding needed; the ajax request is set up to make it work in jsFiddle so to change it for your site, remove the ajax method, data and change the url to point to the php page (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);
});
};
});
这篇关于如何根据名称对列进行排序，升序和降序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
