Как отсортировать столбец по имени, по возрастанию и по убыванию

Question

Как отсортировать столбец по имени, по возрастанию и по убыванию

Я отчаянно нуждаюсь в помощи по использованию плагинов jQuery и tablesorter из http://tablesorter.com/.

Что я хочу сделать, так это когда я нажимаю кнопку в своем 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>
```
Если я просто хочу отсортировать один столбец, который состоит из имен, в порядке возрастания алфавитного порядка или наоборот, КОГДА Я НАЖИМАЮ ЖАТКУ, есть ли более простой способ сделать это? (Этот вопрос предполагает, если я не использую плагин 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
.
.

HTML-файл, который я использую для всплывающего окна 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 в моем внешнем файле 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()

1

javascript jquery php sorting tablesorter

Решение

Другие решения

Вы можете сделать это с помощью tableorter: 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>

0

Источник

Accepted Answer

Я не знаю о части php, но здесь необходимо кодирование на стороне клиента; 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);
});
};

});

1