如何根据名称对列进行排序，升序和降序
[英]How to sort column according to name, ascending and descnding
问题描述
I am in desperate need help on using jQuery and tablesorter plugin from http://tablesorter.com/ . 
我非常需要使用http://tablesorter.com/上的jQuery和tablesorter插件的帮助。
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. 我想做的是，当我单击html中的一个按钮时，一个新窗口弹出并使用ajax，我也使用PHP在数据库中显示数据。
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. 到目前为止，我一直在使用原始的javascript代码，所以现在我已经停下来了，因为我必须根据字母的升序和降序对列进行排序。 So my questions are: 所以我的问题是：
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. 我已经下载了所需的文件（jqeury.tablesorter.js和jquery-2.1.4.min.js），并将其包含在用于弹出窗口的html文件中。 (I am doing my javascript codes on an external file called function.js) （我在名为function.js的外部文件上执行我的javascript代码） <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"></script>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) （这个问题是假设我不使用tablesort插件）
Note: Please do treat me as a super beginner as I only know the basics of jQuery. 注意：因为我只了解jQuery的基础知识，所以请务必将我视为超级初学者。
In my PHP file: 在我的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
.
.
The html file that I use for the pop up window aka viewTable.html: 我用于弹出窗口的html文件又称为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>
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: 这是我的外部javascript文件function.js中的javascript函数之一，使用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()
2 个解决方案
解决方案1
1 2015-05-20 18:57:22
I don't know about the php part, but here is the client-side coding needed; 我不了解php部分，但这是所需的客户端编码。 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 ) 设置了ajax请求使其可以在jsFiddle中运行，因此要针对您的网站进行更改，请删除ajax method ， data并更改url以指向php页面（ 演示 ）
$(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);
});
};
});
解决方案2
0 2015-05-19 08:25:54
You can do it with tablesorter: sortlist. 您可以使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.