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

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

4 голосов
/ 17 января 2011

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

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

Ответы [ 3 ]

2 голосов
/ 17 января 2011 
   <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('test@gmail.com').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>jsmith@gmail.com</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>fbach@yahoo.com</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>jdoe@hotmail.com</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>tconway@earthlink.net</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
    </tr>
    </tbody>
    </table>
    </div>
    <input type="button" onclick="append()" value="append"/>
</body>

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

0 голосов
/ 17 ноября 2018

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

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

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

$("#myTable").tablesorter()

, как обычно.

0 голосов
/ 13 ноября 2018

Согласно эта функция 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');
    });
});
...