时间戳

首页 > 解决方案 > 分页时数据表每页增加行数

javascript - 分页时数据表每页增加行数

问题描述

我在 Lottery for Woocommerce 插件中有表格分页代码。目前它每页显示 10 行。我正在尝试增加每页的行数。但仍然没有运气。（我试图查找是否有任何与此相关的 Jquery。但在插件中，我找不到任何相关内容。

我想做两件事 - 1. 在表格中排序和搜索。这是成功的。但它仅适用于该特定页面。不适合整张桌子。这就是为什么我想增加行数以在单个页面中显示所有数据。

<!-- Sort Customisation -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet">

<!-- Bootstrap core JavaScript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Page level plugin JavaScript--><script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>

<script>
    $(document).ready(function() {
          $('#dataTable').DataTable();
    });
</script>

<script>
function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[2];
      y = rows[i + 1].getElementsByTagName("TD")[2];
      //check if the two rows should switch place:
      if (Number(x.innerHTML) > Number(y.innerHTML)) {
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
</script>


<script>
    $(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#myTable tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#myTable').DataTable({
        initComplete: function () {
            // Apply the search
            this.api().columns().every( function () {
                var that = this;
 
                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        }
    });
 
} );

$(document).ready(function() {
    $('#myTable').DataTable( {
        "paging":   false
    } );
} );
</script>

<script type="text/javascript">
    jQuery(document).ready(function() {
        $("#myTable")
        .tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]})
        .tablesorterFilter({filterContainer: "#filter-box",
                            filterClearContainer: "#filter-clear-button",
                            filterColumns: [0]});
    });
</script>

Search: <input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text">
<input id="filter-clear-button" type="submit" value="Clear"/>

<!-- Sort Ends -->
<?php
/**
 * This template is used for pagination.
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit ; // Exit if accessed directly.
}
?>
<nav class="pagination pagination-centered woocommerce-pagination">
    <ul>
        <li>
            <span class="lty-pagination lty-first-pagination">
                <a href="<?php echo esc_url( lty_get_endpoint_url( $query_args , '1' ) ) ; ?>"> << </a>
            </span>
        <li>
            <span class="lty-pagination lty-prev-pagination">
                <a href="<?php echo esc_url( lty_get_endpoint_url( $query_args , $prev_page_count ) ) ; ?>"> < </a>
            </span>
        </li>
        <?php
        for ( $i = 1 ; $i <= $page_count ; $i ++ ) {
            $display = false ;
            $classes = array( 'lty-pagination' ) ;

            if ( $current_page <= $page_count && $i <= $page_count ) {
                $page_no = $i ;
                $display = true ;
            } else if ( $current_page > $page_count ) {

                $overall_count = $current_page - $page_count + $i ;

                if ( $overall_count <= $current_page ) {
                    $page_no = $overall_count ;
                    $display = true ;
                }
            }

            if ( $current_page == $i ) {
                $classes[] = 'current' ;
            }

            if ( $display ) {
                ?>
                <li>
                    <span class="<?php echo esc_attr( implode( ' ' , $classes ) ) ; ?>">
                        <a href="<?php echo esc_url( lty_get_endpoint_url( $query_args , $page_no ) ) ; ?>"> <?php echo esc_html( $page_no ) ; ?> </a>
                    </span>
                </li>
                <?php
            }
        }
        ?>
        <li>
            <span class="lty-pagination lty-next-pagination">
                <a href="<?php echo esc_url( lty_get_endpoint_url( $query_args , $next_page_count ) ) ; ?>"> > </a>
            </span>
        </li>
        <li>
            <span class="lty-pagination lty-last-pagination">
                <a href="<?php echo esc_url( lty_get_endpoint_url( $query_args , $page_count ) ) ; ?>"> >> </a>
            </span>
        </li>
    </ul>
</nav>

/**
 * This template is used for displaying the ticket logs.
 * /
<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit ; // Exit if accessed directly.
}
?>

<p><button onclick="sortTable()">Sort By Ticket Numbers</button></p>

<div class="lty-ticket-logs-wrapper">
    <?php
    if ( lty_check_is_array( $ticket_ids ) ) :
        ?>
        <table id="dataTable" class="lty-frontend-table shop_table shop_table_responsive lty-ticket-logs-table">
            <thead>
                <tr>
                    <?php foreach ( $_columns as $column_name ) : ?>
                        <th><?php echo esc_html( $column_name ) ; ?></th>
                    <?php endforeach ; ?>
                </tr>
            </thead>
            <tbody>
                <?php foreach ( $ticket_ids as $ticket_id ) : ?>
                    <tr>
                        <?php
                        $ticket = lty_get_lottery_ticket( $ticket_id ) ;
                        foreach ( $_columns as $key => $val ) :
                            ?>
                            <td data-title="<?php echo esc_html( $val ) ; ?>">
                                <?php
                                switch ( $key ) {

                                    case 'date':
                                        echo esc_html( $ticket->get_formatted_created_date() ) ;
                                        break ;

                                    case 'answer':
                                        echo esc_html( $ticket->get_answer() ) ;
                                        break ;

                                    case 'user_name':
                                        echo esc_html($ticket->display_first_name_and_last_name()) ;
                                        break ;

                                    case 'ticket_number':
                                        echo esc_html( $ticket->get_lottery_ticket_number() , true ) ;
                                        break ;

                                    default:
                                        do_action( 'lty_lottery_ticket_log_' . $key , $ticket_id , $ticket ) ;
                                        break ;
                                }
                                ?>
                            </td>
                        <?php endforeach ; ?>
                    </tr>
                <?php endforeach ; ?>
            </tbody>

            <?php if ( $pagination[ 'page_count' ] > 1 ) : ?>
                <tfoot>
                    <tr>
                        <td colspan="<?php echo esc_attr( count( $_columns ) ) ; ?>" class="footable-visible">
                            <?php lty_get_template( 'pagination.php' , $pagination ) ; ?>
                        </td>
                    </tr>

                </tfoot>
            <?php endif ; ?>
        </table>
    <?php else : ?>
        <div class="lty_log_empty_container"><?php esc_html_e( 'No Ticket Log Found.' , 'lottery-for-woocommerce' ) ; ?></div>
        <?php
    endif ;
    ?>
</div>
<?php

标签： javascriptwordpresswoocommercedatatable

解决方案

推荐阅读