Search code examples
javascriptjqueryajaxhtml-tabletablesorter

Jquery tablesorter does not work with my table (dynamic ajax)


Tablesorter does not work with my table. I tried to use .trigger('update') but it does not work for me. Tru use stupidtable and theu work but not correct(not sort string )

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();

Solution

  • Problem was with that the plugin could not get date from the (I checked its using debug metod of tablesorter). My solution :

                $(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");