如何使用jQuery DataTables发布整个表的数据

我有一个使用jQuery DataTables和分页的表

我有超过300个注册表，每页最多50个。 每次我从一个页面更改为另一个页面时，其他250个注册表将从DOM中删除，所以当我提交并对我的控制器执行POST时，我只会获得50个模型的列表，这些模型是我当前页面上的模型。

如何访问其他250，或告诉表格全部发送？ 我搜索过，我已经读过这是分页的正常行为。 但你们是如何解决这个问题的呢？

Answer 1

原因

当使用带有分页的DataTables插件时，DOM中仅存在当前页面行以提高性能和兼容性。 因此，当您提交表单时，仅提交当前页面表单控件值。

解决方案1：直接提交表格

诀窍是在提交表单之前将表单元素从当前页面转换为 。

 var table = $('#example').DataTable(); // Handle form submission event $('#frm-example').on('submit', function(e){ var form = this; // Encode a set of form elements from all pages as an array of names and values var params = table.$('input,select,textarea').serializeArray(); // Iterate over all form elements $.each(params, function(){ // If element doesn't exist in DOM if(!$.contains(document, form[this.name])){ // Create a hidden element $(form).append( $('') .attr('type', 'hidden') .attr('name', this.name) .val(this.value) ); } }); }); 

请参阅jQuery DataTables：如何提交表单数据的所有页面 – 直接提交以获取更多详细信息和示例。

解决方案2：通过Ajax提交表单

另一种解决方案是通过Ajax提交表单。

 var table = $('#example').DataTable(); // Handle form submission event $('#frm-example').on('submit', function(e){ // Prevent actual form submission e.preventDefault(); // Serialize form data var data = table.$('input,select,textarea').serialize(); // Submit form data via Ajax $.ajax({ url: '/echo/jsonp/', data: data, success: function(data){ console.log('Server response', data); } }); }); 

请参阅jQuery DataTables：如何提交表单数据的所有页面 – 通过Ajax提交更多详细信息和示例。

笔记

请注意，这两种解决方案仅适用于客户端处理模式。

链接

请参阅jQuery DataTables：如何提交表单数据的所有页面以获取更多详细信息。