title: table data not appering on page load using tablesorter
body: <p><strong>For load table data using ajax in table sorter i follow</strong> <a href="https://mottie.github.io/tablesorter/docs/example-pager-ajax.html" rel="nofollow noreferrer">https://mottie.github.io/tablesorter/docs/example-pager-ajax.html</a>  </p>
  
  <blockquote>
    <p>Load table data using ajax &amp; mysql in tablesorter plugin  </p>
    
    <blockquote>
      <p>I would prefer to load first 25 record in table when page load . Does the tablesorter pager plugin support this? If so, what am I missing, because the documentation shows this example:i will try to load table data using table sorter.how i will set url
      for page load event when i click on next button table record get
      successfully.here i need to more setting for load table data when page
      load.how i will set total rows ,how to set ajax url it`s not working properly </p>
    </blockquote>
  </blockquote>
  
  <pre><code>    &lt;?php echo $header; ?&gt;
      &lt;script id="js"&gt;
      $( document ).ready(function() {
      // Initialize tablesorter
       // ***********************
       $("table")
        .tablesorter({
           theme: 'blue',
        widthFixed: false,
        sortLocaleCompare: true, // needed for accented characters in the data
        sortList: [ [0,1] ],
        widgets: ['zebra', 'resizable','filter']
  
      })
  
      // initialize the pager plugin
      // ****************************
      .tablesorterPager({
  
        // **********************************
        //  Description of ALL pager options
        // **********************************
  
        // target the pager markup - see the HTML block below
        container: $(".pager"),
  
  
        ajaxUrl : '&lt;?php echo SITE_URL."admin/index.php?route=technology/products/get_pro/"?&gt;{page}?{filterList:filter}&amp;{sortList:column}',
  
        // use this option to manipulate and/or add additional parameters to the ajax url
        customAjaxUrl: function(table, url) {
            // manipulate the url string as you desire
            // url += '&amp;currPage=' + window.location.pathname;
  
            // trigger a custom event; if you want
            $(table).trigger('changingUrl', url);
            // send the server the current page
            return url;
        },
  
  
        ajaxError: null,
  
        // add more ajax settings here
        // see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
        ajaxObject: {
          type: 'GET', // default setting
          dataType: 'json'
        },
  
  
        ajaxProcessing: function(data){
            alert();
          if (data &amp;&amp; data.hasOwnProperty('rows')) {
            var indx, r, row, c, d = data.rows,
            // total number of rows (required)
            total = data.total_rows,
            // array of header names (optional)
            headers = data.headers,
            // cross-reference to match JSON key within data (no spaces)
            headerXref = headers.join(',').replace(/\s+/g,'').split(','),
            // all rows: array of arrays; each internal array has the table cell data for that row
            rows = [],
            // len should match pager set size (c.size)
            len = d.length;
            // this will depend on how the json is set up - see City0.json
            // rows
            for ( r=0; r &lt; len; r++ ) {
              row = []; // new row array
              // cells
              for ( c in d[r] ) {
                if (typeof(c) === "string") {
                  // match the key with the header to get the proper column index
                  indx = $.inArray( c, headerXref );
                  // add each table cell data to row array
                  if (indx &gt;= 0) {
                    row[indx] = d[r][c];
                  }
                }
              }
              rows.push(row); // add new row array to rows array
            }
            // in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
            return [ total, rows, headers ];
          }
        },
  
        // Set this option to false if your table data is preloaded into the table, but you are still using ajax
        processAjaxOnInit: true,
  
        // output string - default is '{page}/{totalPages}';
        // possible variables: {size}, {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
        // also {page:input} &amp; {startRow:input} will add a modifiable input in place of the value
        output: '{startRow} to {endRow} ({totalRows})',
         // call
          initialRows: {
            total: 100,
            filtered: 1
          },
        // apply disabled classname (cssDisabled option) to the pager arrows when the rows
        // are at either extreme is visible; default is true
        updateArrows: true,
  
        // starting page of the pager (zero based index)
        page: 0,
  
        // Number of visible rows - default is 10
        size: 25,
  
        // Saves the current pager page size and number (requires storage widget)
        savePages: true,
        // Saves tablesorter paging to custom key if defined.
        // Key parameter name used by the $.tablesorter.storage function.
        // Useful if you have multiple tables defined
        storageKey: 'tablesorter-pager',
  
        // Reset pager to this page after filtering; set to desired page number (zero-based index),
        // or false to not change page at filter start
        pageReset: 0,
  
        // if true, the table will remain the same height no matter how many records are displayed.
        // The space is made up by an empty table row set to a height to compensate; default is false
        fixedHeight: false,
  
        // remove rows from the table to speed up the sort of large tables.
        // setting this to false, only hides the non-visible rows; needed if you plan to
        // add/remove rows with the pager enabled.
        removeRows: false,
  
        // If true, child rows will be counted towards the pager set size
        countChildRows: false,
  
        // css class names of pager arrows
        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', // page select dropdown - select dropdown that set the "page" option
  
        cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
        cssPageSize    : '.pagesize', // page size selector - select dropdown that sets the "size" option
  
        // class added to arrows when at the extremes; see the "updateArrows" option
        // (i.e. prev/first arrows are "disabled" when on the first page)
        cssDisabled    : 'disabled', // Note there is no period "." in front of this class name
        cssErrorRow    : 'tablesorter-errorRow' // error information row
  
      });
  
      });
  &lt;/script&gt;
  &lt;section class="page-content"&gt;
  &lt;breadcrumbs-panel page-title="" class="breadcrumbs" id="menu"&gt;&lt;/breadcrumbs-panel&gt;
             &lt;div class="module"&gt;
                &lt;div class="width100 gold-border-bottom"&gt;
                    &lt;div class="floatleft"&gt;
                  &lt;h1&gt;View Products&lt;/h1&gt;
              &lt;/div&gt;
           &lt;/div&gt;
                  &lt;div class="margin-top10"&gt;
                     &lt;table id="campanion-product" class="tablesorter display responsive"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Product Name&lt;/th&gt;
                          &lt;th&gt;Part Number&lt;/th&gt;
                          &lt;th&gt;Product ID&lt;/th&gt;
                           &lt;th&gt;Status&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                      &lt;tbody&gt;
                         &lt;tr &gt;
                          &lt;td data-value="&gt;25"&gt; 1&lt;/td&gt;
                          &lt;td&gt;1&lt;/td&gt;
                          &lt;td&gt;1&lt;/td&gt;
                          &lt;td&gt;1&lt;/td&gt;
                      &lt;/tr&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
  
          &lt;/div&gt; 
  &lt;style&gt;
  .pager input.ts-startRow {
      min-width: 30px;
  }
  &lt;/style&gt;
  
  &lt;!--Pagination!--&gt;
  &lt;div class="pager width100"&gt;
      &lt;img src="&lt;?php echo HTTPS_PUBLIC; ?&gt;images/tablesorter-first.png" class="first" alt="First" /&gt;
      &lt;img src="&lt;?php echo HTTPS_PUBLIC; ?&gt;images/tablesorter-prev.png" class="prev" alt="Prev" /&gt;
      &lt;!-- the "pagedisplay" can be any element, including an input --&gt;
      &lt;span class="pagedisplay" data-pager-output-filtered="{startRow:input} &amp;ndash; {endRow} / {filteredRows} of {totalRows} total rows"&gt;&lt;/span&gt;
      &lt;img src="&lt;?php echo HTTPS_PUBLIC; ?&gt;images/tablesorter-next.png" class="next" alt="Next" /&gt;
      &lt;img src="&lt;?php echo HTTPS_PUBLIC; ?&gt;images/tablesorter-last.png" class="last" alt="Last" /&gt;
      &lt;select class="pagesize" title="Select page size"&gt;
          &lt;option value="25" selected="selected"&gt;25&lt;/option&gt;
          &lt;option value="50"&gt;50&lt;/option&gt;
          &lt;option value="100"&gt;100&lt;/option&gt;
          &lt;option value="200"&gt;200&lt;/option&gt;
          &lt;option value="500"&gt;500&lt;/option&gt;
          &lt;option value="1000"&gt;1000&lt;/option&gt;
          &lt;option id="allRowsTablePaginationOption" value="all"&gt;All Rows&lt;/option&gt;
      &lt;/select&gt;
      &lt;!--&lt;select class="gotoPage" title="Select page number"&gt;&lt;/select&gt;--&gt;
  &lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/section&gt;
  
  &lt;?php echo $footer; ?&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Ieng1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ieng1.png" alt="enter image description here"></a>
   <a href="https://i.stack.imgur.com/pYoj4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pYoj4.png" alt="enter image description here"></a></p>