Сортировка таблиц jQuery не работает - PullRequest
Новая
       30

Сортировка таблиц jQuery не работает

4 голосов
/ 09 августа 2009

Я использую плагин jQuery tablesorter для динамического генерирования таблицы из CSV-файла, и эта часть работает нормально. Однако всякий раз, когда я пытаюсь отсортировать таблицу, нажимая на заголовки таблицы, firebug сообщает об этой проблеме в консоли: 

parsers is undefined
return parsers[i].type;\n

Первоначально я думал, что эта проблема была вызвана тем, что таблица не была готова после загрузки документа, поэтому я исправил это, вручную вызвав tableorter () после того, как моя таблица была отрисована из файла CSV. это не решило проблему.

Кроме того, в самом конце таблицы таблица нарисована искаженной с некоторыми серыми областями в конце. Я полагаю, это связано с ошибкой выше.

Код, о котором идет речь, такой: 

<html>

<head>  
    <link rel="stylesheet" href="blue/style.css" type="text/css" />

   <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
   <script type="text/javascript" src="jquery.tablesorter.js"></script>
   <script type="text/javascript" src="jquery.csv.js"></script>
   <script type="text/javascript" id="js">
   function sortThis() {
         $("#myTable").tablesorter({
            // sortList:[[0,0],[2,1]]
         });
   }; 
    </script> 
    <title>huh!?</title>

</head>

<body>

<table id="myTable" class="tablesorter" cellspacing="1" cellpadding="0" border="0"> 

<thead> 
<tr>    
<th>name</th> 
<th>type</th> 
<th>Date</th> 
</tr>
</thead>

<tbody>

    <script type="text/javascript">

        $.get('myfile.csv', function(data) {
            myfile = jQuery.csv()(data)
            for (var x = 0; x < myfile.length; x++) {
                str = "<tr>";
                for (var y = 0; y < myfile[x].length; y++) {
                    str += "<td>" + myfile[x][y] + "</td>";
                }
                str += "</tr>";
                $('#myTable').append(str);
            }
        });

        sortThis();
    </script>

</tbody>
</table>
</body>
</html>

Заранее спасибо за помощь.

Ответы [ 3 ]

12 голосов
/ 06 мая 2010

Я столкнулся с подобной проблемой, но ошибка была вызвана, потому что таблица была пуста (кроме заголовков). Я думаю, что вы получаете ошибку по той же причине.

Я считаю, что проблема в том, что сортировщик таблиц не знает о данных таблицы, поскольку вы изменяете их после загрузки страницы с помощью метода $ .get (). Чтобы предупредить сортировщик таблиц об изменении данных таблицы, используйте этот вызов перед вызовом sortThis (). 

$('#myTable').trigger("update");

Это должно решить твою проблему.

Как часть вызова TableSorter, вы также можете использовать следующий синтаксис, чтобы избежать этой ошибки: 

$('#myTable:has(tbody tr)').tablesorter({
 ...
});

Я нашел помощь в публикации jQuery Google Group .

2 голосов
/ 09 августа 2009

Я не могу комментировать ошибку JavaScript. Но проблема с отображением состоит в том, что вы добавляете строку к таблице, а не текст.

Изменить это: 

$('#myTable').append(str);

к этому: 

$('#myTable tbody').append(str);
0 голосов
/ 23 августа 2009

Я думаю, вы были на правильном пути, когда таблица не была полностью написана к тому времени, когда вы пытаетесь ее отсортировать. Хотя javascript запускает следующую функцию только после завершения предыдущей, браузер имеет многопоточность, поэтому вы не можете гарантировать, что какие-либо обновления DOM завершены только потому, что завершившая их функция.

Jquery предоставляет метод для ожидания загрузки элементов DOM перед выполнением функции, это метод ready (function () {...}).

Я бы попробовал следующую замену, когда вы вызываете функцию sortThis (): 


$(document).ready( function() {
    sortThis();
});

Это будет ожидать завершения загрузки DOM, прежде чем пытаться выполнить sortThis ().

Когда я писал это, я понял, что вы используете $ .get () для обновления таблицы, поэтому я уверен, что DOM не загружен, однако приведенное выше решение может не выполнить то, что вы хотите, потому что оно может выполняться до того, как таблица полностью заполнится. загружен. Функция $ .get () извлекает данные «в фоновом режиме», поэтому ваша функция sortThis () выполняется, как только ваш запрос на получение запущен , а не после его завершения. У вас есть два возможных решения, одно из которых заключается в предоставлении async = false для вашего запроса get, таким образом, следующая функция не будет выполняться, пока ваш запрос GET не будет выполнен и функция обратного вызова не будет выполнена. 


    $.get('myfile.csv', async=false, function(data) {
            myfile = jQuery.csv()(data)
            for (var x = 0; x ";
                for (var y = 0; y " + myfile[x][y] + "";
                }
                str += "";
                $('#myTable').append(str);
            }
        });

        sortThis();

лучшее решение, на мой взгляд, состоит в том, чтобы поместить ваш вызов sortThis () в функцию обратного вызова. Это должно привести к тому, что страница загружается и обрабатывается быстрее, так как остальная часть вашего сценария может продолжаться, пока происходит обмен данными с сервером. Я бы использовал следующее решение: 


    $.get('myfile.csv', function(data) {
            myfile = jQuery.csv()(data)
            for (var x = 0; x ";
                for (var y = 0; y " + myfile[x][y] + "";
                }
                str += "";
                $('#myTable').append(str);
            }
            sortThis();
        });

Надеюсь, это поможет;) Дайте мне знать, какие результаты вы получите ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...