Tablesorter pager not working correctly

[vrajput]

I am developing android app using Jquery Mobile. I am having some problem with tablesorter plugin with pager.
Here is my HTML page

<div id="mainPager" class="pager">
<form>

<div class="ui-grid-d">
    <div class="ui-block-a"><input type="button" data-inline="true" data-mini="true" value="&lt;&lt;" class="first" /></div>
    <div class="ui-block-b"><input type="button" data-inline="true" data-mini="true" value="&lt;" class="prev" /></div>
    <div class="ui-block-c"><input type="text" data-inline="true" data-mini="true" class="pagedisplay"/></div>
    <div class="ui-block-d"><input type="button" data-inline="true" data-mini="true" value="&gt;" class="next" /></div>
    <div class="ui-block-e"><input type="button" data-inline="true" data-mini="true" value="&gt;&gt;" class="last" /></div>
</div>
<select class="pagesize">
        <option selected="selected"  value="10">10</option>

        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
    </select>
    </form>
    </div>


    <table class="myTable" id="dataTable" >
    <thead>

     </thead> 
     <tbody>
      </tbody>

        </table>

This is my jquery code.

     $(document).on('pagebeforecreate', '#main' ,function(){       

     fillRoTable() ;    

     });



function fillRoTable() 
{ 

 var html = '';
 for (var key=0, size= 1; key<size;key++) {
  html += '<tr><th>'
     + "Ticket #"
     + '</th><th>'
     + "Action"
     + '</th></tr>';
  }

$('#dataTable thead').append(html);


$.ajax({url: "h**p://xyz.com/test/info?client=ig&docId=2313",
dataType: "jsonp",
async: true,
success: function (result) { 

    var html1 = '';
   for (var key=0, size=25; key<size; key++) {

   html1 += '<tr><td>'
     + key
     + '</td><td>'
     + (size-key)
     + '</td></tr>';
  }

  $('#dataTable tbody').append(html1);


          $("#dataTable").tablesorter()
           .tablesorterPager({container: $("#MainPager"), positionFixed: false});    



   },
    error: function (request,error) {
    alert('Network error has occurred please try again!');
  }
 });   

}

My problem is that when main page loads everything is looking fine but if I tap on one of the heading to sort the column then I table becomes empty.

Can anyone suggest me what am I doing wrong here.

Thanks

[thezoggy]

doesnt look like you ever create a 'table'. just pieces of it (th/td). i would recommend just putting in a place holder table with your header, then use your ajax to create its body content...

[vrajput]

Actually I am creating table. Don't know why it was not showing in the post. I updated my post. Please have a look. Thanks

[Mottie]

HI @vrajput!

The code itself looks like it should work, except, are you sure the pager addon is from this repository? From looking at the pager initialization code, positionFixed is no longer supported. Here are the available pager options. Sorry, but I'll add documentation to this effect in the next update.

[vrajput]

Thanks Mottie.
That was the problem. Downloaded new version everything is working fine.
Stupid mistake from my side.