Search Posts

table data not appering on page load using tablesorter

For load table data using ajax in table sorter i follow https://mottie.github.io/tablesorter/docs/example-pager-ajax.html

Load table data using ajax & mysql in tablesorter plugin

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

    <?php echo $header; ?>
    <script id="js">
    $( 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 : '<?php echo SITE_URL."admin/index.php?route=technology/products/get_pro/"?>{page}?{filterList:filter}&{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 += '&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 && 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 < 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 >= 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} & {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

    });

    });
</script>
<section class="page-content">
<breadcrumbs-panel page-title="" class="breadcrumbs" id="menu"></breadcrumbs-panel>
           <div class="module">
              <div class="width100 gold-border-bottom">
                  <div class="floatleft">
                <h1>View Products</h1>
            </div>
         </div>
                <div class="margin-top10">
                   <table id="campanion-product" class="tablesorter display responsive">
                    <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Part Number</th>
                        <th>Product ID</th>
                         <th>Status</th>
                    </tr>
                </thead>
                    <tbody>
                       <tr >
                        <td data-value=">25"> 1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                    </tr>

                </tbody>
            </table>


        </div> 
<style>
.pager input.ts-startRow {
    min-width: 30px;
}
</style>

<!--Pagination!-->
<div class="pager width100">
    <img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-first.png" class="first" alt="First" />
    <img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-prev.png" class="prev" alt="Prev" />
    <!-- the "pagedisplay" can be any element, including an input -->
    <span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows"></span>
    <img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-next.png" class="next" alt="Next" />
    <img src="<?php echo HTTPS_PUBLIC; ?>images/tablesorter-last.png" class="last" alt="Last" />
    <select class="pagesize" title="Select page size">
        <option value="25" selected="selected">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="200">200</option>
        <option value="500">500</option>
        <option value="1000">1000</option>
        <option id="allRowsTablePaginationOption" value="all">All Rows</option>
    </select>
    <!--<select class="gotoPage" title="Select page number"></select>-->
</div>
</div>
    </div>

</section>

<?php echo $footer; ?>

enter image description here
enter image description here

Source: Stackoverflow

Leave a Reply

Your email address will not be published. Required fields are marked *