jquery pager tablesorter not working

Question

Im very new in this tablesorter jquery.Now I generate the table using some javascript code .Below is my code :

$(document).ready(function() {

    $.ajax({
                type:"POST",
                url:"../cdc/load/jsonTrack.php?",
                data:dataString,
                dataType: 'json',
                success: function(data){
                    if(data.status === "success") { 
                        var elements = data.elements; 
                        if(elements.length === 0) {
                            $('#cdcTracking-list tbody').append( '<tr>' +
                                '<td colspan="7">No session to display</td>' +
                                '</tr>');
                        }
                        for( var i = 0; i < elements.length; i++){
                            var element = elements[i];

                            //console.log('session id:' + element.vesselCode);
                            $('#cdcTracking-list tbody').append( '<tr>' +
                                '<td style="color: green;">' + element.vesselCode + '</td>' +
                                '<td style="color: black;">' + element.voyage + '</td>' +
                                '<td style="color: black;">' + element.chasisNo + '</td>' +
                                '<td style="color: blue;">' + element.plateNo + '</td>' +
                                '<td style="color: blue;">' + element.bookingRef + '</td>' + 
                                '<td style="color: blue;">' + element.serviceTerm +'</td>'+
                                '</tr>'                                    
                            );
                        }
                    }else { 
                        $('#cdcTracking-list tbody').append( '<tr><td colspan="7">No session to display</td></tr>');
                    }
                }
            }); 
});
//jquery tablesorter 
            $("#cdcTracking-list").tablesorter({
                        widthFixed: false,
                        showProcessing: true,
                        headerTemplate: '{content} {icon}',
                        widgets: ['zebra','columnSelector'],
                        widgetOptions: {
                            columnSelector_container: $('#columnSelector'),
                            columnSelector_columns: {
                                0: ['disable'] /* set to disabled; not allowed to unselect it */
                            },
                            columnSelector_saveColumns: true,
                            columnSelector_layout: '<label><input type="checkbox">{name}</label>',
                            columnSelector_name: 'data-selector-name',
                            columnSelector_mediaquery: true,
                            columnSelector_mediaqueryName: 'Auto: ',
                            columnSelector_mediaqueryState: true,
                            columnSelector_breakpoints: ['20em', '30em', '40em', '50em', '60em', '70em'],
                            columnSelector_priority: 'data-priority'
                        }
                    }).tablesorterPager(pagerOptions);

        var pagerOptions = {
        // target the pager markup - see the HTML block below
        container: $("#pager"),
        ajaxUrl: null,
        ajaxProcessing: function(ajax){
                if (ajax && ajax.hasOwnProperty('data')) {
                // return [ "data", "total_rows" ];
                return [ ajax.data, ajax.total_rows ];
                }
        },
        output: '{startRow} to {endRow} ({totalRows})',
        updateArrows: true,
        page: 0,
        size: 10,
        fixedHeight: true,
        removeRows: false,
        cssNext: '.next', // next page arrow
        cssPrev: '.prev', // previous page arrow
        cssFirst: '.first', // go to first page arrow
        cssLast: '.last', // go to last page arrow
        cssGoto: '.gotoPage', // select dropdown to allow choosing a page
        cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
        cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
        cssDisabled: 'disabled' // Note there is no period "." in front of this class name

    };

And this is a pager for html

            <table id="cdcTracking-list" class="tablesorter-blue" border="0" data-mode="columntoggle">
                <thead>
                    <tr>
                        <th align="center">Vessel </th>
                        <th align="center">Voyage </th>
                        <th align="center">Chasis No</th>
                        <th align="center">Plate</th>
                        <th align="center" >Booking Ref</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
                <table>
                    <tr><td>
                            <div id="pager" class="pager">
                                <form>
                                    <img src="../cdc/table/mottie-tablesorter/addons/pager/icons/first.png" class="first"/>
                                    <img src="../cdc/table/mottie-tablesorter/addons/pager/icons/prev.png" class="prev"/>
                                    <input type="text" class="pagedisplay"/>
                                    <img src="../cdc/table/mottie-tablesorter/addons/pager/icons/next.png" class="next"/>
                                    <img src="../cdc/table/mottie-tablesorter/addons/pager/icons/last.png" class="last"/>       
                                    <select class="pagesize">
                                        <option selected="selected"  value="5">5</option>
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">40</option>
                                    </select>
                                </form>
                            </div>
                        </td></tr>
                </table>

I dont know why pager plugin from jquery tablesorter not working for my table.Did I missing something here?Please help me and I can learn for my mistake.

Answer 1

There are two issues with the code.

1. As @Mohamed-Yousef pointed out, the pagerOptions isn't defined.
2. The tablesorter initialization code is not wrapped inside of a document ready function - it is only wrapping the ajax code.

Answer 2

you used pagerOptions before you define it. so try to put

var pagerOptions = ....

before you order it.hope it will help