Сортировщик таблиц jQuery для таблиц, получаемых через AJAX - PullRequest
Новая
       4

Сортировщик таблиц jQuery для таблиц, получаемых через AJAX

1 голос
/ 10 сентября 2011

Я пишу скрипт, который позволит мне искать торрент сайты.При загрузке страницы с левой стороны есть текстовая область для поиска, а справа - пустой div.Поиск использует AJAX для извлечения таблицы результатов поиска и добавления к пустому / непустому div справа.Я хочу использовать сортировщик таблиц плагина jQuery для сортировки указанных таблиц.На бэкэнде я зацикливаю строку поиска POST, формирую таблицу, а затем выводу.Ниже находится внутренняя часть цикла: 

$tables .= "<div align='right' style='border:solid 2px grey'>
<div class='subheader'>
    $file
    <input type='button' value='F This' onclick='toggleVis(\"$file.div\")'>
</div>
<div id='$file.div'>
    <table RULES=ROWS FRAME=HSIDES border='1' class='tablesorter' id='$file.table'>
        <thead>
            $headStr
        </thead>
        <tbody>
            $bodyStr
        </tbody>
    </table>

    <input type='button' value='F That--^' onclick='toggleVis(\"$file.div\")'>

</div>
</div>
<br>";

После того, как все данные обработаны, я просто повторяю таблицы $.Ниже приведена инициализация вызова AJAX + jquery: 

function doSearch(){
    var http;  
    try{
            // Opera 8.0+, Firefox, Safari
            http = new XMLHttpRequest();
    } catch (e){
            // Internet Exploder
            try{
                    http = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                    try{
                            http = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e){
                            // Bad 
                            alert("Your browser derped!");
                            return false;
                    }
            }
    }

    http.onreadystatechange = function(){
        if(http.readyState == 4){
            if(document.getElementById('clearResults').checked)
                document.getElementById('searchResults').innerHTML = http.responseText;
            else
                document.getElementById('searchResults').innerHTML += http.responseText;

            $("table").tablesorter();  //  Initialize tablesorting
        }
    }
    search = encodeURIComponent(document.getElementById('search').value);
    document.getElementById('search').value = '';
    http.open("POST", "<?php echo $_SERVER['PHP_SELF']; ?>", true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    http.send('lAct=search&search='+search);
}

Таким образом, приведенный выше код выполняется без сбоев, но новая таблица не имеет сортировки.Интересно, что инициализация сортировщика таблиц фактически меняет класс моих файлов на «заголовок» - что означает, что он работает?Для хихиканья я добавил статическую таблицу на страницу;он становится сортируемым после вызова функции поиска (вместе с измененными классами).Кто-нибудь сталкивался с чем-нибудь подобным?Я могу опубликовать больше кода, если это необходимо;любая помощь будет принята с благодарностью: D

На всякий случай, ниже приведена завершенная таблица, которая выводится: 

<div id="ubuntu.div">
    <table rules="ROWS" frame="HSIDES" border="1" class="tablesorter" id="ubuntu.table">
        <thead>
            <tr><th class="header">Type</th><th class="header headerSortDown">Size</th><th class="header">SE</th><th class="header">LE</th><th class="header">name</th><th class="header">dl</th></tr>
        </thead>
        <tbody>
            <tr class="highlight" id="ubuntu.0"></tr><tr class="highlight" id="ubuntu.0"><td>Video(Other)</td><td><b>267.45MiB</b></td><td>7</td><td>1</td><td>VTC Ubuntu Certification</td><td>

    </td>
</tr><tr class="highlight" id="ubuntu.1"><td>Video(Other)</td><td><b>10.62MiB</b></td><td>1</td><td>1</td><td>Nelson Mandela explains Ubuntu (ideology)</td><td>

    </td>
</tr>
        </tbody>
    </table>

    <input type="button" value="F That--^" onclick="toggleVis(&quot;ubuntu.div&quot;)">

</div>

Я также только что заметил, что, нажимая на заголовки таблицы,класс меняется на SortDown или SortUp ... странно, что это не сортировка ...

1 Ответ

0 голосов
/ 11 сентября 2011

Есть две строки с одинаковым идентификатором, первая из которых пуста: 

<tr class="highlight" id="ubuntu.0"></tr>
<tr class="highlight" id="ubuntu.0">...</tr>
...