Question

我有一个带有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&....

如果这是不使用Ajax的唯一方法，我该如何将这些数据转换为JSON格式？或者是将这些数据转换为对象的另一种方法吗？

Answer 1

关于您不理解的结果的说明。

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>），因此在上面的代码示例中，table.$('input, select').serialize()的结果是{{1}数据表中的{}和<input>元素并将它们序列化（从中创建一个可以发送到服务器的字符串）。

使用它的一个问题是Datatables的分页不会包含dom中的所有元素，因此选择器只能获得其中的一些元素。

如何在使用分页

时从Datatables获取所有数据

使用分页时 - 只显示正在显示的当前页面＆＃34; build＆＃34;在DOM内部，这意味着 - 如果您提交包含该表的表单 - 只会发送该页面内的字段。

为了发送所有数据，您必须使用数据表的API 要从DataTables获取所有数据，即使数据被分成页面，您也可以使用<select>函数：

data()

该函数的结果将是一个对象，您可以使用该对象从数据表中的所有页面中提取所有数据。请注意，您可以使用函数table.DataTable().data()来获取可用于发送到服务器的json-ready字符串。

＆＃13;

JSON.stringify

＆＃13;

$(function() {
    t = $('#example').DataTable( {
        "pagingType": "full_numbers"
    });
    $('#get-result').click(function() {
        $('#result').val(JSON.stringify(t.data()));
    });
});

＆＃13;

JSON.stringify(t.data())

但是 - 如果您的表包含表单字段，则此处仍然存在问题，因为ar = []; for (var i = 0; i < t.data().length; i++) { ar[i] = t.data()[i]; } json = JSON.stringify(ar);函数不会返回值，而是data()字符串。

为了改变这一点，你需要一个特殊的功能来获取表格中的所有元素并转换它们＆＃34;手动＆＃34;：

如何在使用分页

时从表格元素中获取Datatables的所有数据

为了在分页数据表中获取表单元素的值，您需要使用API提取表单元素并从中获取值。

以下是如何执行此操作的示例：

＆＃13;

<input name=X value=Y>

＆＃13;

$(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,input,textarea').each(function(i, el) {
            json_obj[$(el).attr('name')] = $(el).val();
        });
        $('#result-json').val(JSON.stringify(json_obj));
    });
});

＆＃13;

为了将值发布到服务器（例如，使用jquery＆＃39; s ajax post请求），您可以使用以下任一版本：

<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 DataTables表的所有数据发送到服务器端而不是仅当前页

1 个答案:

关于您不理解的结果的说明。

如何在使用分页

如何在使用分页