how to call jquery .on method in data table sorting

Question

May be this question is asked before but i am stuck in a position where i am able to sort my data table at the time of page loading.But when i replace the whole table with data populated by ajax then it stops working.Please help me.

i am using the following code according to jQuery table sort

$('#loc_sort, #rate_sort')  // these are the th ids that i want to sort
.wrapInner('<span title="sort this column"/>')
.each(function(){       
    var th = $(this),
        thIndex = th.index(),
        inverse = false;

    th.click(function(){

        table.find('td').filter(function(){

            return $(this).index() === thIndex;

        }).sortElements(function(a, b){

            return $.text([a]) > $.text([b]) ?
                inverse ? -1 : 1
                : inverse ? 1 : -1;

        }, function(){

            // parentNode is the element we want to move
            return this.parentNode; 

        });

        inverse = !inverse;

    });

});

please tell me how can i use this code with .on method.I append the html code that coming from ajax to

<div id="outer_all_div"></div>

div.Which is not replacing.Please help me.Thanks in advance.

score 1 · Answer 1 · answered Oct 01 '13 at 14:43

1

Simply bind your event to the parent. Then it only needs to be bound once and it won't get lost when you replace the inner table.

$('#outer_all_div').on('click', '#loc_sort, #rate_sort', function() {
    ...
});

answered Oct 01 '13 at 14:43

Matt S

14,976
6
57
76

yes this should work but first time its sorting the data but from second time its not working. – ABorty Oct 01 '13 at 15:03
Show us your code using the "on" function and we can further debug. – Matt S Oct 01 '13 at 15:32

how to call jquery .on method in data table sorting

1 Answers1