jquery.serialize() 无法使用 dataTables 插件从第二页开始工作
Posted
技术标签:
【中文标题】jquery.serialize() 无法使用 dataTables 插件从第二页开始工作【英文标题】：jquery.serialize() not working from 2nd page using dataTables Plugin 【发布时间】：2018-06-24 00:26:15 【问题描述】：我正在尝试在不刷新页面的情况下将 woocommerce 产品字段提交到购物车。所以我使用 jquery serialize() 将表单发布到购物车。问题是
-
仅适用于第一页。
如果我没有在字段中输入任何内容，它会绕过验证错误检查并使用它所拥有的信息提交产品。
如果我单击“添加到购物车”按钮，则从第二页页面刷新并提交产品或如果字段为空则显示错误。
代码如下：
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%;" 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" 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" >
</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 基本分页并在表格行中显示产品。
控制台登录成功：
// 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
【问题讨论】：
【参考方案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;
);
);
【讨论】：
【参考方案2】：如果你只是使用它，它会解决你的问题。
$("#TableID").on("submit", "#FormID", function(e)
// Your Ajax Codes Here
这是一种非常易于使用的数据表方法。
【讨论】：
以上是关于jquery.serialize() 无法使用 dataTables 插件从第二页开始工作的主要内容，如果未能解决你的问题，请参考以下文章
jQuery serialize() 省略了 textarea
使用 jquery serialize 和 formvalidation.io 时如何防止表单重复发布？
jquery serialize()方法可以序列化表单值为字符串
怎么用jquery serialize只获取到value部分的值
ajax中push,在jQuery serialize()或serializeArray()中添加/ push()值到Ajax POST