JQuery TableSorter не работает с моей таблицей (динамический AJAX)

Question

Tablesorter не работает с моим столом.Я пытался использовать .trigger('update'), но у меня это не работает.Tru использует тупой и те работают, но не правильно (не сортировать строки)

function tableLoader(){
$.ajax({
    url: 'http://127.0.0.1:8000/index_script'
}).then(function (data) {
    $('#apnd').empty();
    for (var i = 0; i < data.length; i++) {
        if((data[i].autor)==(getname())){
        $('#apnd').append("<tr>"+
            "<th><input value="+data[i].trip_name+" id=trip_name"+data[i].id+"></th>"+
            "<th><input value="+data[i].start_city+" id=start_city"+data[i].id+"\></th>"+
            "<th><input value="+data[i].end_city+" id=end_city"+data[i].id+"\></th>"+
            "<th><input type=\"number\" value="+data[i].days+" id=days"+data[i].id+"\></th>"+
            "<th><input type=\"number\" value="+data[i].day_cost+" id=day_cost"+data[i].id+"\></th>"+
            "<th><input type=\"number\" value="+data[i].hotel_per_day_cost+" id=hotel_per_day_cost"+data[i].id+"\></th>"+
            "<th><input type=\"number\" value="+data[i].air_tickets_cost+" id=air_tickets_cost"+data[i].id+"\></th>"+
            "<th><input type=\"number\" value="+data[i].other_transport_cost+" id=other_transport_cost"+data[i].id+"\></th>"+
            "<th><input type=\"number\" value="+data[i].ticket_to_city_cost+" id=ticket_to_city_cost"+data[i].id+"\></th>"+
            "<th><input type=\"number\" value="+data[i].ticket_from_city_cost+" id=ticket_from_city_cost"+data[i].id+"\></th>"+
            "<th>"+data[i].autor+"</th>"+
            "<th>"+"<button  type=\"button\"  id=\"Edit\" value=\""+data[i].id+"\">Edit</button>\n"+"</th>"+
            "<th>"+"<button type=\"button\"  id=\"Delete\" value=\""+data[i].id+"\">Delete</button>\n"+"</th>"+
            +"</tr>");
    }}
    $(function() {
        $("Table")
            .tablesorter({
                theme : 'default',
                cssInfoBlock : "tablesorter-no-sort",
                widgets: [ 'zebra', 'stickyHeaders' ]
            }).trigger('update')
    });

});
}

   tableLoader();

Answer 1

Проблема была в том, что плагин не мог получить дату от (я проверил его, используя метод отладки TableSorter). Мое решение:

            $(function() {

        // add parser through the tablesorter addParser method
        $.tablesorter.addParser({
            id: 'inputs',
            is: function(s) {
                return false;
            },
            format: function(s, table, cell, cellIndex) {
                var $c = $(cell);
                // return 1 for true, 2 for false, so true sorts before false
                if (!$c.hasClass('updateInput')) {
                    $c
                        .addClass('updateInput')
                        .bind('keyup', function() {
                            $(table).trigger('updateCell', [cell, false]); // false to prevent resort
                        });
                }
                return $c.find('input').val();
            },
            type: 'text'
        });
            $(function() {
            $('table').tablesorter({
                debug: "core filter",
                widgets: ['zebra'],
                headers: {
                    0: {
                        sorter: 'inputs'
                    },
                    1: {
                        sorter: 'inputs'
                    },
                    2: {
                        sorter: 'inputs'
                    },
                    3: {
                        sorter: 'inputs'
                    },
                    4: {
                        sorter: 'inputs'
                    },
                    5: {
                        sorter: 'inputs'
                    },
                    6: {
                        sorter: 'inputs'
                    },
                    7: {
                        sorter: 'inputs'
                    },
                    8: {
                        sorter: 'inputs'
                    },
                    9: {
                        sorter: 'inputs'
                    },
                    10: {
                        sorter: 'inputs'
                    }
                }
            });
        });
        $("table").trigger("update");

Answer 2

Попробуйте следующие изменения:

1. Замените $("Table") на нижний регистр $("table").
2. Последний +"</tr>" не будет работать, потому что предыдущая строка завершилась+ ... это, вероятно, вызывает ошибку JavaScript.
3. Не рекомендуется добавлять строки в таблицу.Лучше собрать всю строку строк, а затем добавить один раз.
4. В этом случае я не думаю, что что-то получается от обертывания инициализации tableorter внутри функции готовности документа.Его можно удалить.
5. Я предполагаю, что #apnd это идентификатор, добавленный к <tbody>?Tablesorter не будет инициализироваться, если нет <thead>.
6. Нет необходимости запускать обновление сразу после инициализации tableorter.Это необходимо только тогда, когда содержимое изменилось после инициализации .
7. Вам не нужно использовать $('#apnd').empty();, если для добавления новых строк используется .html().

Вот обновленный код.Пожалуйста, попробуйте и дайте мне знать, если это работает:

function tableLoader() {
  $.ajax({
    url: 'http://127.0.0.1:8000/index_script'
  }).then(function (data) {
    var tbody = "";
    for (var i = 0; i < data.length; i++) {
      if ((data[i].autor) == (getname())) {
        tbody += "<tr>" +
          "<th><input value=" + data[i].trip_name + " id=trip_name" + data[i].id + "></th>" +
          "<th><input value=" + data[i].start_city + " id=start_city" + data[i].id + "\></th>" +
          "<th><input value=" + data[i].end_city + " id=end_city" + data[i].id + "\></th>" +
          "<th><input type=\"number\" value=" + data[i].days + " id=days" + data[i].id + "\></th>" +
          "<th><input type=\"number\" value=" + data[i].day_cost + " id=day_cost" + data[i].id + "\></th>" +
          "<th><input type=\"number\" value=" + data[i].hotel_per_day_cost + " id=hotel_per_day_cost" + data[i].id + "\></th>" +
          "<th><input type=\"number\" value=" + data[i].air_tickets_cost + " id=air_tickets_cost" + data[i].id + "\></th>" +
          "<th><input type=\"number\" value=" + data[i].other_transport_cost + " id=other_transport_cost" + data[i].id + "\></th>" +
          "<th><input type=\"number\" value=" + data[i].ticket_to_city_cost + " id=ticket_to_city_cost" + data[i].id + "\></th>" +
          "<th><input type=\"number\" value=" + data[i].ticket_from_city_cost + " id=ticket_from_city_cost" + data[i].id + "\></th>" +
          "<th>" + data[i].autor + "</th>" +
          "<th>" + "<button  type=\"button\"  id=\"Edit\" value=\"" + data[i].id + "\">Edit</button>\n" + "</th>" +
          "<th>" + "<button type=\"button\"  id=\"Delete\" value=\"" + data[i].id + "\">Delete</button>\n" + "</th>" +
        "</tr>";
      }
    }
    $('#apnd').html(tbody);
    $("table").tablesorter({
      theme: 'default',
      cssInfoBlock: "tablesorter-no-sort",
      widgets: ['zebra', 'stickyHeaders']
    })
  });
}

tableLoader();