jQuery Tablesorter не сортирует столбцы - PullRequest
2 голосов
/ 19 января 2012

Я анализирую XML-файл в таблице и хочу использовать jQuery TableSorter. Теперь, когда у меня есть ошибка, чтобы убрать табличный сортировщик, мои данные заполняются в таблице, но заголовки не могут быть отсортированы. Есть идеи? Код указан ниже для JS и HTML.

HTML:

<html> 
<head> 
    <title>Read XML</title> 
    <script type="text/javascript" src="jquery-1.7.1.js"></script>  
    <script type="text/javascript" src="jquery.tablesorter.js"></script> 
    <script type="text/javascript" src="custom.js"></script> 
</head> 
<body> 
    <table id="table" border="1"> 
        <thead> 
            <tr> 
                <th>Item #</th> 
                <th>Shape</th> 
                <th>Weight</th> 
                <th>Color</th> 
                <th>Clarity</th> 
                <th>Price($)</th> 
           </tr> 
        </thead> 
        <tbody> 
        </tbody> 
    </table> 
</body> 
</html> 

JS:

$(document).ready(function() { 
$("#table").tablesorter(); 
$.ajax({ 
     type: "GET", 
     url: "tutorial.xml", 
     dataType: "xml", 
     success: parseXml 
}); 
$("#table").trigger("update"); 
}); 

function parseXml(xml) 
{ 
    $(xml).find("diamond").each(function() 
    { 
        $("#table tbody").after("<tr><td>" + $(this).find("id").text() +  
        "</td><td>" + $(this).find("shape").text() + "</td><td>" + $(this).find("weight").text() +  
        "</td><td>" + $(this).find("color").text() + "</td><td>" + $(this).find("clarity").text() +  
        "</td><td>" + $(this).find("price").text() + "</td></tr>"); 
    }); 
} 

Ответы [ 2 ]

2 голосов
/ 19 января 2012

Вам нужно $("#table").trigger("update"); в конце parseXml, чтобы сообщить табличному сортировщику, что таблица обновлена.Это не помогает, если он запускается до того, как возвращается ajaxRequest.

1 голос
/ 19 января 2012

Переместить эту строку:

$("#table").trigger("update");

до конца метода parseXML и измените .after на .append

function parseXml(xml) 
{ 
    $(xml).find("diamond").each(function() 
    { 
        $("#table tbody").append("<tr><td>" + $(this).find("id").text() +  
        "</td><td>" + $(this).find("shape").text() + "</td><td>" + $(this).find("weight").text() +  
        "</td><td>" + $(this).find("color").text() + "</td><td>" + $(this).find("clarity").text() +  
        "</td><td>" + $(this).find("price").text() + "</td></tr>"); 
    }); 
    $("#table").trigger("update");
} 
...