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/.

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.

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:

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>
```
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)

Note: Please do treat me as a super beginner as I only know the basics of jQuery.

In my PHP file:

                               .
                               .
                          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>
 <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:

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:

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);
    });
  };

});

回答2:

You can do it with 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>

来源：https://stackoverflow.com/questions/30320216/how-to-sort-column-according-to-name-ascending-and-descnding

标签

javascript

php

jquery

sorting

tablesorter