大佬教程收集整理的这篇文章主要介绍了将分页的jQuery DataTables表的所有数据发送到服务器端,而不是仅当前页面，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我试图这样做，
$('#uploadClicked').click(function() {
var table = $('#dataTable-ageGroup').DataTable();
var data = table.$('input,SELEct').serialize();
var json = JSON.Stringify(data);
document.getElementById('json').setAttribute('value',json);
alert("The following data would have been submitted to the server:\n\n" + data);
document.getElementById('UploadDb').submit();
return false;
});
但结果是一种我不明白的形式。
LOCATIOn=Barangay+1&ageGroup=All+Ages&bothSexes=2197&male=1086&female=1111&LOCATIOn=Barangay+1&ageGroup=Under+1&bothSexes=42&male=17&female=25&LOCATIOn=Barangay+1&ageGroup=1+-+4&bothSexes=169&male=88&....
LOCATIOn=Barangay+1&ageGroup=All+Ages&bothSexes=2197&male=1086&female=1111&LOCATIOn=Barangay+1&ageGroup=Under+1&bothSexes=42&male=17&female=25&LOCATIOn=Barangay+1&ageGroup=1+-+4&bothSexes=169&male=88&....
jQuery的serialize函数采用表单元素，并从中创建一个可以发送到服务器的字符串。序列化函数仅适用于表单元素(< input>< textarea>，< SELEct>)，所以在上面的代码示例中 – 表的结果$(‘input，SELEct’)。采取< input>和< SELEct>元素在数据表内，并将它们序列化(使它们成为准备发送到服务器的字符串)。
使用它的一个问题是Datatables的分页不会在dom中提供所有元素，所以选择器只会得到其中的一些。
当使用分页时 – 只有正在显示的当前页面在DOM内部是“构建”，这意味着 – 如果您提交包含表的表单，则只会发送该页面内的字段。
为了发送所有数据，您将必须使用数据表的API。
要从DataTable获取所有数据，即使数据被分为页面，也可以使用data()函数：
table.DataTable().data()
该函数的结果将是您可以使用的对象，以便从datatable中的所有页面中提取所有数据。请注意，您可以使用JSON.Stringify函数来获取可用于发送到服务器的json-ready字符串。
$(function() { t = $('#example').DataTable( { "pagingType": "full_numbers" }); $('#get-result').click(function() { $('#result').val(JSON.Stringify(t.data())); }); });
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> <script src="http://code.jquery.com/jquery-1.12.4.js"></script> <script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Herrod Chandler</td> <td>SALEs Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>Sonya Frost</td> <td>Software ENGIneer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> <tr> <td>jena Gaines</td> <td>Office Manager</td> <td>London</td> <td>30</td> <td>2008/12/19</td> <td>$90,560</td> </tr> <tr> <td>Quinn Flynn</td> <td>Support Lead</td> <td>Edinburgh</td> <td>22</td> <td>2013/03/03</td> <td>$342,000</td> </tr> <tr> <td>Charde Marshall</td> <td>Regional Director</td> <td>San Francisco</td> <td>36</td> <td>2008/10/16</td> <td>$470,600</td> </tr> <tr> <td>Haley Kennedy</td> <td>Senior MarkeTing Designer</td> <td>London</td> <td>43</td> <td>2012/12/18</td> <td>$313,500</td> </tr> <tr> <td>Tatyana Fitzpatrick</td> <td>Regional Director</td> <td>London</td> <td>19</td> <td>2010/03/17</td> <td>$385,750</td> </tr> <tr> <td>Michael Silva</td> <td>MarkeTing Designer</td> <td>London</td> <td>66</td> <td>2012/11/27</td> <td>$198,500</td> </tr> <tr> <td>Paul Byrd</td> <td>Chief Financial Officer (CFO)</td> <td>New York</td> <td>64</td> <td>2010/06/09</td> <td>$725,000</td> </tr> <tr> <td>Gloria Little</td> <td>Systems Administrator</td> <td>New York</td> <td>59</td> <td>2009/04/10</td> <td>$237,500</td> </tr> <tr> <td>Bradley Greer</td> <td>Software ENGIneer</td> <td>London</td> <td>41</td> <td>2012/10/13</td> <td>$132,000</td> </tr> <tr> <td>Dai Rios</td> <td>Personnel Lead</td> <td>Edinburgh</td> <td>35</td> <td>2012/09/26</td> <td>$217,500</td> </tr> <tr> <td>jenette Caldwell</td> <td>Development Lead</td> <td>New York</td> <td>30</td> <td>2011/09/03</td> <td>$345,000</td> </tr> <tr> <td>Yuri Berry</td> <td>Chief MarkeTing Officer (CMO)</td> <td>New York</td> <td>40</td> <td>2009/06/25</td> <td>$675,000</td> </tr> <tr> <td>Caesar Vance</td> <td>Pre-SALEs Support</td> <td>New York</td> <td>21</td> <td>2011/12/12</td> <td>$106,450</td> </tr> <tr> <td>Doris Wilder</td> <td>SALEs Assistant</td> <td>Sidney</td> <td>23</td> <td>2010/09/20</td> <td>$85,600</td> </tr> <tr> <td>Angelica Ramos</td> <td>Chief Executive Officer (CEO)</td> <td>London</td> <td>47</td> <td>2009/10/09</td> <td>$1,200,000</td> </tr> <tr> <td>Gavin Joyce</td> <td>Developer</td> <td>Edinburgh</td> <td>42</td> <td>2010/12/22</td> <td>$92,575</td> </tr> <tr> <td>jennifer Chang</td> <td>Regional Director</td> <td>Singapore</td> <td>28</td> <td>2010/11/14</td> <td>$357,650</td> </tr> <tr> <td>Brenden Wagner</td> <td>Software ENGIneer</td> <td>San Francisco</td> <td>28</td> <td>2011/06/07</td> <td>$206,850</td> </tr> <tr> <td>Fiona Green</td> <td>Chief Operating Officer (COO)</td> <td>San Francisco</td> <td>48</td> <td>2010/03/11</td> <td>$850,000</td> </tr> <tr> <td>Shou Itou</td> <td>Regional MarkeTing</td> <td>Tokyo</td> <td>20</td> <td>2011/08/14</td> <td>$163,000</td> </tr> <tr> <td>MicHelle House</td> <td>Integration Specialist</td> <td>Sidney</td> <td>37</td> <td>2011/06/02</td> <td>$95,400</td> </tr> <tr> <td>Suki Burks</td> <td>Developer</td> <td>London</td> <td>53</td> <td>2009/10/22</td> <td>$114,500</td> </tr> <tr> <td>Prescott Bartlett</td> <td>Technical Author</td> <td>London</td> <td>27</td> <td>2011/05/07</td> <td>$145,000</td> </tr> <tr> <td>Gavin Cortez</td> <td>Team Leader</td> <td>San Francisco</td> <td>22</td> <td>2008/10/26</td> <td>$235,500</td> </tr> <tr> <td>Martena Mccray</td> <td>Post-SALEs support</td> <td>Edinburgh</td> <td>46</td> <td>2011/03/09</td> <td>$324,050</td> </tr> <tr> <td>Unity Butler</td> <td>MarkeTing Designer</td> <td>San Francisco</td> <td>47</td> <td>2009/12/09</td> <td>$85,675</td> </tr> <tr> <td>HoWARD Hatfield</td> <td>Office Manager</td> <td>San Francisco</td> <td>51</td> <td>2008/12/16</td> <td>$164,500</td> </tr> <tr> <td>Hope Fuentes</td> <td>Secretary</td> <td>San Francisco</td> <td>41</td> <td>2010/02/12</td> <td>$109,850</td> </tr> <tr> <td>Vivian Harrell</td> <td>Financial Controller</td> <td>San Francisco</td> <td>62</td> <td>2009/02/14</td> <td>$452,500</td> </tr> <tr> <td>Timothy Mooney</td> <td>Office Manager</td> <td>London</td> <td>37</td> <td>2008/12/11</td> <td>$136,200</td> </tr> <tr> <td>Jackson Bradshaw</td> <td>Director</td> <td>New York</td> <td>65</td> <td>2008/09/26</td> <td>$645,750</td> </tr> <tr> <td>Olivia Liang</td> <td>Support ENGIneer</td> <td>Singapore</td> <td>64</td> <td>2011/02/03</td> <td>$234,500</td> </tr> <tr> <td>Bruno Nash</td> <td>Software ENGIneer</td> <td>London</td> <td>38</td> <td>2011/05/03</td> <td>$163,500</td> </tr> <tr> <td>Sakura Yamamoto</td> <td>Support ENGIneer</td> <td>Tokyo</td> <td>37</td> <td>2009/08/19</td> <td>$139,575</td> </tr> <tr> <td>Thor Walton</td> <td>Developer</td> <td>New York</td> <td>61</td> <td>2013/08/11</td> <td>$98,540</td> </tr> <tr> <td>Finn Camacho</td> <td>Support ENGIneer</td> <td>San Francisco</td> <td>47</td> <td>2009/07/07</td> <td>$87,500</td> </tr> <tr> <td>Serge Baldwin</td> <td>Data Coordinator</td> <td>Singapore</td> <td>64</td> <td>2012/04/09</td> <td>$138,575</td> </tr> <tr> <td>Zenaida Frank</td> <td>Software ENGIneer</td> <td>New York</td> <td>63</td> <td>2010/01/04</td> <td>$125,250</td> </tr> <tr> <td>Zorita Serrano</td> <td>Software ENGIneer</td> <td>San Francisco</td> <td>56</td> <td>2012/06/01</td> <td>$115,000</td> </tr> <tr> <td>jennifer Acosta</td> <td>Junior Javascript Developer</td> <td>Edinburgh</td> <td>43</td> <td>2013/02/01</td> <td>$75,650</td> </tr> <tr> <td>Cara Stevens</td> <td>SALEs Assistant</td> <td>New York</td> <td>46</td> <td>2011/12/06</td> <td>$145,600</td> </tr> <tr> <td>Hermione Butler</td> <td>Regional Director</td> <td>London</td> <td>47</td> <td>2011/03/21</td> <td>$356,250</td> </tr> <tr> <td>Lael Greer</td> <td>Systems Administrator</td> <td>London</td> <td>21</td> <td>2009/02/27</td> <td>$103,500</td> </tr> <tr> <td>Jonas Alexander</td> <td>Developer</td> <td>San Francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</td> </tr> <tr> <td>Shad Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$183,000</td> </tr> <tr> <td>Michael Bruce</td> <td>Javascript Developer</td> <td>Singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> </table> <button id="get-result">Get Result</button><br /> <textarea id="result" style="width: 200px; height: 100px;"></textarea>
JSON.Stringify(t.data())还将为您提供有关Datatable实例的更多信息。如果你只想纯粹的数据，你可以过滤掉它：
ar = []; for (var i = 0; i < t.data().length; i++) { ar[i] = t.data()[i]; } json = JSON.Stringify(ar);
为了改变，你将需要一个特殊的函数来获取表中的所有元素，并将它们“手动”转换：
为了获取分页数据表中的表单元素的值，您将需要使用API提取表单元素，并从中获取值。
以下是一个如何做的例子：
$(function() { t = $('#example').DataTable( { "pageLength" : 5,"pagingType": "full_numbers" }); $('#get-result').click(function() { ar = $() for (var i = 0; i < t.rows()[0].length; i++) { ar = ar.add(t.row(i).node()) } $('#result-serialized').val(ar.find('SELEct,input,textarea').serialize()); json_obj = {} ar.find('SELEct,textarea').each(function(i,el) { json_obj[$(el).attr('name')] = $(el).val(); }); $('#result-json').val(JSON.Stringify(json_obj)); }); });
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> <script src="http://code.jquery.com/jquery-1.12.4.js"></script> <script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td><input name="a1" value="Tiger Nixon" /></td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td><input name="a2" value="Garrett Winters" /></td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td><input name="a3" value="Ashton Cox" /></td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td><input name="a4" value="Cedric Kelly" /></td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td><input name="a5" value="Airi Satou" /></td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td><input name="a6" value="Brielle Williamson" /></td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td><input name="a7" value="Herrod Chandler" /></td> <td>SALEs Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td><input name="a8" value="Rhona Davidson" /></td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td><input name="a9" value="Colleen Hurst" /></td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td><input name="a10" value="Sonya Frost" /></td> <td>Software ENGIneer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> </tbody> </table> <button id="get-result">Get Result</button><br /> <textarea id="result-serialized" style="width: 200px; height: 100px;"></textarea> <textarea id="result-json" style="width: 200px; height: 100px;"></textarea>
为了将值发布到服务器(例如使用jquery的ajax发布请求)，您可以使用以下任一版本：
$('#submit-form-btn').click(function() {
// Option 1: using the serialized version
ar = $()
for (var i = 0; i < t.rows()[0].length; i++) {
ar = ar.add(t.row(i).node())
}
$.ajax({
type: "POST",url: 'url-to-post',data: ar.find('SELEct,textarea').serialize(),success: function() {
//do something
}
});
// Option 2: using the object we just created:
json_obj = {}
ar.find('SELEct,el) {
json_obj[$(el).attr('name')] = $(el).val();
});
$.ajax({
type: "POST",data: json_obj,success: function() {
//do something
}
});
});
以上是大佬教程为你收集整理的将分页的jQuery DataTables表的所有数据发送到服务器端,而不是仅当前页面全部内容，希望文章能够帮你解决将分页的jQuery DataTables表的所有数据发送到服务器端,而不是仅当前页面所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。