jquery.serialize() 使用 dataTables 插件无法从第二页开始工作

Question

我正在尝试在不刷新页面的情况下将 woocommerce 产品字段提交到购物车。所以我使用 jquery serialize() 到 post 的形式到购物车。问题是

它只适用于第一页。
如果我不在字段中输入任何内容，它会绕过验证错误检查并提交包含其信息的产品。

从第 2 页开始，如果我单击“添加到购物车”按钮，页面会刷新并提交产品，或者如果字段留空则显示错误。

代码如下：

HTML

        <div id="wh_table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
            <div class="row">
                <div class="col-sm-12">
                    <table id="wh_table" class="table table-hover dataTable no-footer" role="grid" aria-describedby="wh_table_info" style="width: 100%;" width="100%" cellspacing="0">
                        <thead>
                            <tr role="row">
                                <th></th>
                                <th>PRODUCT</th>
                                <th>Message Box</th>
                                <th>PRICE</th>
                                <th>Product Total Quantity</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="product-178 variations_form odd" data-role="product" role="row">
                                <form action="/testsite/wholesale-product-page-template-custom/?add-to-cart=178" class="cart" method="post" enctype="multipart/form-data"></form>
                                <td class="image">
                                    <img src="https://localhost/testsite/wp-content/uploads/2016/10/1471481461.png" class="attachment-wh_catalog size-wh_catalog wp-post-image" alt="Jewelry Keys" srcset="https://localhost/testsite/wp-content/uploads/2016/10/1471481461.png 500w, https://localhost/testsite/wp-content/uploads/2016/10/1471481461-100x76.png 100w, https://localhost/testsite/wp-content/uploads/2016/10/1471481461-350x266.png 350w" sizes="(max-width: 500px) 100vw, 500px" width="500" height="380">                        
                                </td>
                                <td class="title">
                                    <h3>Gothic Key</h3>
                                    <b>Silver</b>
                                </td>
                                <td class="note">
                                    <label>Front</label><input class="msg-note wh-input" name="_message_front" value="" maxlength="15" placeholder="Up to 15 Letters or Numbers">
                                    <label>Back</label><input class="msg-note wh-input" name="_message_back" value="" maxlength="15" placeholder="Up to 15 Letters or Numbers">             
                                </td>
                                <td class="wh-price">
                                    <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>2,500.00</span>                          
                                </td>
                                <td class="quantity-field">
                                    <div class="quantity">
                                        <input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" placeholder="Type Your Keyway " type="number">
                                    </div>
                                </td>
                                <td class="button">
                                    <input name="add-to-cart" value="178" type="hidden">
                                    <input name="product_id" value="178" id="product_id" type="hidden">
                                    <input value="1" id="product_quantity" type="hidden">
                                    <button type="submit" class="single_add_to_cart_button btn btn-primary button alt ajax_add_to_cart add_to_cart_button product_type_simple"><span class="glyphicon glyphicon-tag"></span> ADD TO CART</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5">
                    <div class="dataTables_info" id="wh_table_info" role="status" aria-live="polite">Showing page 1 of 6</div>
                </div>
                <div class="col-sm-7">
                    <div class="dataTables_paginate paging_full_numbers" id="wh_table_paginate">
                        <ul class="pagination">
                            <li class="paginate_button first disabled" id="wh_table_first"><a href="#" aria-controls="wh_table" data-dt-idx="0" tabindex="0">«</a></li>
                            <li class="paginate_button previous disabled" id="wh_table_previous"><a href="#" aria-controls="wh_table" data-dt-idx="1" tabindex="0">‹</a></li>
                            <li class="paginate_button active"><a href="#" aria-controls="wh_table" data-dt-idx="2" tabindex="0">1</a></li>
                            <li class="paginate_button "><a href="#" aria-controls="wh_table" data-dt-idx="3" tabindex="0">2</a></li>
                            <li class="paginate_button "><a href="#" aria-controls="wh_table" data-dt-idx="4" tabindex="0">3</a></li>
                            <li class="paginate_button "><a href="#" aria-controls="wh_table" data-dt-idx="5" tabindex="0">4</a></li>
                            <li class="paginate_button "><a href="#" aria-controls="wh_table" data-dt-idx="6" tabindex="0">5</a></li>
                            <li class="paginate_button "><a href="#" aria-controls="wh_table" data-dt-idx="7" tabindex="0">6</a></li>
                            <li class="paginate_button next" id="wh_table_next"><a href="#" aria-controls="wh_table" data-dt-idx="8" tabindex="0">›</a></li>
                            <li class="paginate_button last" id="wh_table_last"><a href="#" aria-controls="wh_table" data-dt-idx="9" tabindex="0">»</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

在functions.php

function enqueue_scripts_styles_init() {
        wp_enqueue_script( 'ajax-script', get_template_directory_uri().'/js/test.js', array('jquery'), 1.0 ); 
        //wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl
    }
    add_action('init', 'enqueue_scripts_styles_init');

并在test.js

    jQuery(document).ready(function($) {

        $( 'form' ).on( 'submit', function( evt ) {

            evt.preventDefault();

            $theForm = $(this).closest('form');
            //var $inputs = $theForm.find('input');
            //var serializedData = $inputs.serialize();

            url = $theForm.attr('action');

            // send xhr request
            $.ajax({
                type: $theForm.attr('method'),
                url: $theForm.attr('action'),
                data: $theForm.serialize(),
                success: function(data) {
                    //console.log('Yay! Form sent.');
                    //console.log(data);
                    console.log( $theForm.serialize() );
                }

            });

            // prevent submitting again
            return false;

        });

    });

我目前正在使用 jquery 插件 dataTables 用于 AJAX 基本分页并在table 行。

这是控制台登录成功：

// input with text filled
_message_front=abc&_message_back=def&quantity=2&add-to-cart=178&product_id=178

// input without text filled. No error message thrown.
_message_front=&_message_back=&quantity=1&add-to-cart=178&product_id=178

Answer 1

好的，我找到了解决方案。将它张贴在这里以防它对任何人有帮助。

数据表插件似乎只序列化它最初看到的 tr 节点。因此，当我转到下一页时，节点保持隐藏状态，因此序列化不起作用。

由于遗留代码，dataTables 插件代码无法正常工作的原因。我使用 DataTable 和 fnGetNodes() 不兼容。

    /*
        // DataTable = row().node()  // newSchool after 1.10
        // dataTable = fnGetNodes()  // oldSchool
        var table = $('#example').DataTable();

        table
            .rows( '.ready' )
            .nodes()
            .to$()      // Convert to a jQuery object
            .removeClass( 'ready' );
        );

    */

您可以阅读有关 dataTable vs DataTable Here. 的更多信息来自官方forum

        $(document).ready(function(){   

        //$( 'form' ).on( 'submit', function( evt ) {
        $( 'form' ).submit( function( evt ) {

            evt.preventDefault();
            var oTable = $('#wh_table').dataTable();
            var sData = $('input', oTable.fnGetNodes()).serialize();
            $theForm = $(this).closest('form');

            url = $theForm.attr('action');

            // send xhr request
            $.ajax({
                type: $theForm.attr('method'),
                url: $theForm.attr('action'),
                //data: $theForm.serialize(),
                data: $theForm.sData,

                success: function(data) {
                    //console.log('It's Working....');
                    console.log(sData);
                }

            });

            // prevent submitting again
            return false;

        });

    });

Answer 2

如果你只用这个，它会解决你的问题。

$("#TableID").on("submit", "#FormID", function(e){
// Your Ajax Codes Here
}

这是一种非常易于使用的数据表方法。

jquery.serialize() 使用 dataTables 插件无法从第二页开始工作

jquery.serialize() not working from 2nd page using dataTables Plugin

ajax

jquery

datatables

woocommerce

datatables-1.10

HTML