Para cargar datos de tablas usando ajax en el clasificador de tablas, sigo https://mottie.github.io/tablesorter/docs/example-pager-ajax.html

Cargar datos de la tabla usando ajax y mysql en el complemento tablesorter

Preferiría cargar los primeros 25 registros en la tabla cuando se carga la página. ¿El plugin de buscapersonas de tablesorter admite esto? Si es así, ¿qué me estoy perdiendo? Porque la documentación muestra este ejemplo: intentaré cargar los datos de la tabla usando el clasificador de tablas. ¿Cómo estableceré la URL? para el evento de carga de la página cuando hago clic en el siguiente botón, obtener el registro de la tabla con éxito.Aquí necesito más configuración para cargar datos de la tabla cuando la página load.cómo estableceré filas totales, cómo configurar la url ajax no funciona correctamente

    <?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

1
Reena Mori 12 oct. 2017 a las 09:47

2 respuestas

La mejor respuesta

Puede que me equivoque, pero al mirar la URL en la captura de pantalla, hay un segundo ? que podría estar causando algunos problemas si no se analiza correctamente:

index.php?route=technology/products/get_pro/0?filter&column[0]=1
         ↑                                   ↑

Es posible que el botón de la página siguiente no esté activo (no se ve en las capturas de pantalla) ya que el servidor está devolviendo un valor total_rows de 25, que es igual a la configuración size. El código del buscapersonas asume que se muestran todas las filas; establezca esto en el número total de entradas en la base de datos.

0
Mottie 12 oct. 2017 a las 15:34

es debido al widget que estableceré que no funcionan actualmente. Necesito mantener solo el widget de cebra, que es el predeterminado y también configuré carritos de url incorrectos. Resolví el problema de la URL usando esta URL: stackoverflow.com/a/15303766/8064611
Una demostración más http://jsfiddle.net/Mottie/uwZc2/44/

$("table")
      .tablesorter({
         theme: 'blue',
      widthFixed: false,
      sortLocaleCompare: true, // needed for accented characters in the data
      sortList: [ [0,1] ],
      widgets: ['zebra'] 

    })
0
Reena Mori 16 oct. 2017 a las 07:50