Динамическое добавление столбцов в таблицу, управляемую с помощью сортировщика таблиц jQuery.

На веб-странице с таблицей, которая сортируется сортировщиком таблиц jQuery, есть функциональные возможности для динамического добавления столбцов в таблицу. Когда это происходит, я вызываю триггер («обновление») и триггер («appendCache»), чтобы заставить таблицы сортировать по новому столбцу (я также пытался снова вызвать таблицы). Однако виджеты для сортировки не появляются в новых столбцах, пока я не щелкну в ячейках заголовка.

Мой вопрос: кто-нибудь знает, как заставить виджеты появляться сразу? Спасибо С уважением Джейсон


jquery tablesorter
person Jason    schedule 17.01.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward 

   <head>

    <title>jQuery plugin: Tablesorter 2.0</title>

    <link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />

    <link rel="stylesheet" href="../themes/blue/style.css" type="text/css" media="print, projection, screen" />

    <script type="text/javascript" src="../jquery-latest.js"></script>

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

    <script type="text/javascript">

    $(function() {      

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


    }); 
    function append(){
        var table = $("#myTable");
        $(table).remove();
        var tr = $("<tr></tr>");
        $("<td></td>").html('Test').appendTo(tr);
        $("<td></td>").html('test').appendTo(tr);
        $("<td></td>").html('[email protected]').appendTo(tr);
        $("<td></td>").html('$5.00').appendTo(tr);
        $("<td></td>").html('http://www.test.com').appendTo(tr);
        $(tr).appendTo(table);
        $(table).appendTo($('#tableholer'));
        $("#tableholer table").tablesorter();
    }

    </script>

</head>
<body>
    <div id="tableholer">
    <table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Email</th>
        <th>Due</th>
        <th>Web Site</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>[email protected]</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>[email protected]</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>[email protected]</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>[email protected]</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
    </tr>
    </tbody>
    </table>
    </div>
    <input type="button" onclick="append()" value="append"/>
</body>

В случае добавления это сработает. в случае удаления попробуйте то же самое, хотя я никогда не уверен

person Santosh Linkha    schedule 17.01.2011
comment
Я понимаю. Вы в основном удаляете таблицу, вносите изменения, а затем снова подключаете ее. Я попробовал, и это сработало. Спасибо. - person Jason; 18.01.2011
comment
добро пожаловать .. но вы должны сообщить другим, приняв ответ. - person Santosh Linkha; 18.01.2011

arrow_upward
0
arrow_downward

Согласно этой функции GitHub:

Теперь вы можете использовать метод updateAll для обновления кеша таблицы после добавления нового столбца. данных. Вот демонстрация:

var $table = $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'columns']
    }),
    // column index
    index = 0,
    // column data to add to the table
    columns = ['firstName', 'lastName', 'phone|format', 'streetAddress',
        'email', 'city', 'usState|abbr'];

$('button').click(function () {
    var url = "http://www.filltext.com/?callback=?";
    $.getJSON(url, {
        'rows': 10, // number of rows in the table
        'data': '{' + columns[index] + '}'
    })
    .done(function (data) {
        // add new header cell
        $table.find('thead tr').append('<th>' + columns[index].split('|')[0] + '</th>');
        // increment index to next column
        index = (index + 1) % columns.length;
        // add new cell to each tbody row
        $.each(data, function (i, item) {
            var html = "<td>" + item.data + "</td>";
            $table.find('tbody tr').eq(i).append(html);
        });
        // update cache
        $table.trigger('updateAll');
    });
});
person Matthew Steven Monkan    schedule 13.11.2018

arrow_upward
0
arrow_downward

Другой вариант — вызвать метод destroy, чтобы полностью удалить функциональность tablesorter, включая все виджеты, связанные данные и обработчики событий из таблицы.

$('#myTable').trigger('destroy');

Затем добавьте соответствующую разметку для новых столбцов в таблице и просто вызовите

$("#myTable").tablesorter()

как обычно.

person Matthew Steven Monkan    schedule 17.11.2018