テーブルソートAJAXテーブルをソートしない

AJAXを使用してCSVファイルからテーブルを作成しています。テーブルは上手く見える。しかし、私が何を試みても、私はテーブル・ソーターにそれを分別可能にすることはできません。私はここでstackoverflowで見つけることができるすべてのソリューションを試してみました。助言がありますか？テーブルソートAJAXテーブルをソートしない

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://tablesorter.com/themes/blue/style.css"> 
<link rel="stylesheet" type="text/css" href="http://tablesorter.com/docs/css/jq.css"> 
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "MovieList.csv", 
     dataType: "text", 
     success: function(data) {processData(data);} 
    }); 

}); 

function processData(allText) { 
    var allTextLines = allText.split(/\r\n|\n/); 
    var headers = allTextLines[0].split(","); 
    var lines = []; 
var thelist 
var columns = []; 
//thelist = "<thead><tr>" 
//for (i in headers) { 
//headers[i] = headers[i].replace(/"/g,"") 
//thelist += "<th>"+headers[i]+"</th>" 
//} 
//thelist += "</tr></thead><tbody>" 
for (i in allTextLines) { 
thelist +="<tr>" 
columns = allTextLines[i].split(",") 
if (i > 0) { 
for (i in columns) { 
columns[i] = columns[i].replace(/"/g,"") 
thelist += "<td>" 
thelist += columns[i] 
thelist += "</td>" 
} } 
thelist += "</tr>" 
} 
//thelist += "</tbody>" 


$("#test").append(thelist); 

}; 

$(document).ready(function() { 
$("#myTable").tablesorter(); 
});

出典

2016-04-02 JNRoberts

あなたはあなたのコードで問題の多くを持っていますが、正しい方向に向かった。

は、ここでは、コードです。

1：たくさんのセミコロンがありません。指摘するにはあまりにも多くのことがありますが、プランカをチェックしてください。

2：TablesorterはjQueryを使用しているため、Tableshopをインクルードする前にjQueryをインクルードする必要があります。

3：表でTablesorterを使用するには、表には<thead>と<tbody>が必要です。私はあなたのテーブルにそれを追加するコードをコメントアウトしたが、あなたはそれを必要としているのを見ることができます。 docsはとてもうまく強調表示されていませんが、「はじめに」の下にあります。

4：AJAX呼び出しは非同期です。つまり、コードが必ずしも順番に実行されるわけではありません。データを処理した後、AJAX呼び出し内のTableshopを初期化する必要があります。

$.ajax({ 
    type: "GET", 
    url: "MovieList.csv", 
    dataType: "text", 
    success: function (data) { 
     processData(data); 
     $("#myTable").tablesorter(); 
    } 
});

5：あなたはTBODYに行を追加する場合は、あなたが開始i === 0に余分な行を追加しています。ループとif文の中にこのコードthelist += "<tr>";を移動してください。

for (var i in allTextLines) { 
    var columns = allTextLines[i].split(","); 
    if (i > 0) { 
     thelist += "<tr>"; 
     for (var j in columns) { 
      thelist += "<td>"; 
      thelist += columns[j]; 
      thelist += "</td>"; 
     } 
    } 
    thelist += "</tr>"; 
}

6： "＃test"と呼ばれるテーブルに行を追加しますが、 "#myTable"でTablesorterを初期化します。

Plunker

出典

2016-04-02 08:06:31 Jaydo

セミコロンは、あなたが知っているだけのようにJSの多くの例では必要ありません。 – Terry

@Terryあなたは正しいですが、コードの可読性の面では、作成者がそのステートメントを終了することを意図したものを読者に明確に示すために重要です。著者がいくつかのステートメントでそれらを含むが、同様のステートメントではない場合、それは読者（または少なくとも私）がそこでステートメントを終了することを意味するのか疑問に思う。 – Jaydo

ニースの答え！私はあなたが私の[tablesborderのフォーク]（http://mottie.github.io/tablesorter/docs/）を使っているなら、[ignore articles parser]（http：// mottie）を使うこともできます。並べ替え中にタイトルの「The」、「A」、「An」を無視するように設定します（github.io/tablesorter/docs/example-parsers-ignore-articles.html）。 – Mottie

テーブルソートAJAXテーブルをソートしない

答えて

関連する問題