排序表Jquery的问题答案

【问题标题】：Problems with sorting table Jquery排序表Jquery的问题
【发布时间】：2014-04-11 08:18:25
【问题描述】：

我有一个表并使用 tablesort 插件，该表对表中已有的数据进行排序，但不会对我添加的任何新数据进行排序。急于解决这个问题。只要我能正确排序所有数据，任何不同的方法甚至完全不同的表都会很棒。

 !DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

           <meta name="viewport" content="width=device-width"/>
 <link rel="stylesheet" href="themes/theme1.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta charset="utf-8">



    <link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />


    <script src="jqm/demos/js/jquery.js">
    </script>

<script type="text/javascript" src="__jquery.tablesorter/jquery.tablesorter.js"></script> 

    <script src="jqm/demos/js/jquery.mobile-1.3.2.min.js">
    </script>


        <script>


            $(document).ready(function () {
                $('#btn1').on('click', AddScore);
                $("#myTable").tablesorter();



            });

            function AddScore() {
                var jqTableBody = $('#myTable tbody');
                var sTRTemplate = '<tr>' +

                                  '    <td>{Id}</td>' +
                                  '    <td>{Course}</td>' +
                                  '    <td>{Target}</td>' +
                                  '    <td>{Points}</td>' +
                                  '</tr>';

                var sTRAppend = sTRTemplate;

                $('div[data-role="fieldcontain"] input:text').each(function () {
                    switch (this.id) {

                        case 'ScoreID': sTRAppend = sTRAppend.replace('{Id}', this.value); break;
                        case 'ScoreCourse': sTRAppend = sTRAppend.replace('{Course}', this.value); break;
                        case 'ScoreTarget': sTRAppend = sTRAppend.replace('{Target}', this.value); break;
                        case 'ScorePoints': sTRAppend = sTRAppend.replace('{Points}', this.value); break;
                    }
                })
                jqTableBody.append(sTRAppend);
            }


        </script>
    </head>
    <body>

    <div data-role="collapsible" data-collapsed="true">
         <h1>Current Top 10</h1>


<div data-role="fieldcontain">
    <label for="ScoreID">Column 1:</label>
    <input type="text" name="ScoreID" id="ScoreID" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScoreCourse">Column 2:</label>
    <input type="text" name="ScoreCourse" id="ScoreCourse" value=""  />
</div>  

<div data-role="fieldcontain">
    <label for="ScoreTarget">Column 3:</label>
    <input type="text" name="ScoreTarget" id="ScoreTarget" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScorePoints">Column 4:</label>
    <input type="text" name="ScorePoints" id="ScorePoints" value=""  />
</div>  
        <button id="btn1">Add</button>



    <table data-role="table" id="myTable" class="tablesorter" data-mode="columntoggle" border="1" class="ui-responsive table-stroke">
      <thead>
        <tr>

       <th>Student ID</th>
          <th data-priority="3">Course</th>
          <th data-priority="1">Target</th>
          <th data-priority="5">Score (pts)</th>
      </thead>

      <tbody>
        <tr>

          <td>Bg10xb</td>
          <td>golf</td>
          <td>101</td>
          <td>229</td>
        </tr>
        <tr>

          <td>Bg12we</td>
          <td>tennis</td>
          <td>200</td>
          <td>201</td>
        </tr>
        <tr>

          <td>Bg56gf</td>
          <td>football</td>
          <td>91</td>
          <td>194</td>
        </tr>
        <tr>
       </tbody>
    </table>

  </div>
</div>

【问题讨论】：

我不知道这个插件是如何工作的。将所有数据保存在一个数组中，对其进行排序，清空表，然后将所有数据放回原处。或者按照@Mottie 说的做 :-)

标签： jquery jquery-mobile jquery-plugins tablesorter

【解决方案1】：

添加新行后，确保触发表上的更新，以便 tablesorter 知道刷新其缓存数据。

jqTableBody.append(sTRAppend);
// add the code below
$("#myTable").trigger('update');

另外，上面贴的代码有几个问题：

<!DOCTYPE html> 中缺少左括号
在关闭</thead> 之前缺少</tr>
结束前的额外<tr></tbody>

这似乎没什么大不了的，但请尝试在 IE 中使用该 HTML...

【讨论】：