数据表 如何将用户的当前数据表视图数据(包括排序)导出到另一个页面

Question

注意：此问题使用Datatables 1.11.50

我有一个非常大的数据表，它是由最终浏览器用户自定义排序的。我需要实现一个概念，让他们可以在浏览器页面上对数据表数据进行排序，例如按年龄递减的排序工资流程图

$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
{
text: 'View These rows on a Map'
/* Do something here when the button is pressed to pass the
currently displayed rows (only) primary id's (only) on 
to another page to work with. */ 
}
]
});
} );

@import url("https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<table id="example" class="display" style="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>
<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>
</tbody>
</table>

我需要做的是采取上面的例子并订购：

• 显示的行数(10/25/50/等(
• 数据顺序；源数据id按特定顺序指向
• 忽略数据表中未显示给用户的任何数据

并以某种方式将这些数据传递给另一个页面使用；接收页面是传单地图，其将加载所选行的每个id值的lat/long位置；

所以；例如上面的例子--让sat视图=10，并按age递减顺序，从Ashton Cox(最旧的(按该顺序向下到Cedric Kelly，然后按该顺序获取这些id(当前位于数据表中的隐藏字段中(，并在leafletJS映射上处理它们，然后在映射位置上输出这些id，并且仅输出这些id。

要绝对清楚的是，数据表本身非常大，有50多个字段和数千行。所有这些都来自数据库数据，但用户需要选择某些行；即使用搜索框选择某些类型的行，然后按箭头顺序排列这些行然后这个最终结果可以以某种方式传递到另一个页面，该页面将加载并填充带有这些数据点的传单JS地图。

---

我看过类似于"；选择"；用于Datatables的插件，但看不到获取和导出所选数据的方法。

我完全没有想法，在互联网上找不到任何参考点来开始探索这一点；

我怎么能"出口"；这个当前视图是JSON编码还是其他格式，这样某人就可以按下Datatables按钮并完成上述请求？

如有任何建议，不胜感激。

干杯

Answer 1

注意：此解决方案使用Datatables 1.11.50

最简洁的工作解决方案是添加一个按钮(在此处使用Datatables Buttons插件(，该按钮会自动获取所需数据并将其提交到硬编码的目的地。

从数据表中收集的数据有两个方面：

• 导出原始数据
• 导出数据的顺序

导出数据的第一部分可以通过使用Datatables Select扩展(此处(实现，本地datatable API功能可以使用table.order()捕获当前排序。

第二部分是必需的，作为默认数据表，行可以按列值ascending或descending排序。

这提供了两个对象/数组(数组是Javascript中的对象类型(，通过一些处理工作，它们可以导出为vars，或者导出为URL上的GET值，或者导出到AJAX请求中的POST值。

下面的代码选择整个当前页面视图(并且仅选择整个当前页视图(，然后保存该数据中的id号以及排序信息(了解这些id为何按此顺序排列(。

示例代码：

$(document).ready(function() {
// set vars for saving data and ordering info.
var saveData = [];
var orderOfData = [];
var tempvar = "";
var t = $('#table').DataTable({
buttons {[
// button display text
text: 'View These rows on a Map',
// action to carry out clicking on this button
action: function ( e, dt, node, config ) {
// Clear any pre selected rows              
if(dt.rows().length > 0 ) {
dt.rows({selected: true}).deselect();
}

// Select current page rows.         
dt.rows({page: 'current'}).select();
var RowobjectData = dt.rows( { selected: true } ).data();
//set order by list from column headers.
// this returns column number, needs to be turned into text (or id)
var ordering = t.order();
// Building ordering Text List.
$.each(ordering, function(indexO, innerOrder) {
// Grab name reference for each column id.  
tempvar = $(t.column( innerOrder[0] ).header()).html();
// Text Processing; optional. 
tempvar = tempvar.replace('<br>',' ');
tempvar = encodeURIComponent(tempvar);
// add this to existing array.
orderOfData.push(tempvar+'-'+innerOrder[1]);
});
// Building row ID list.
$.each(RowobjectData,function( index, currentElement ) {
$.each(currentElement,function( index, innerElement ) {
// Index value is the columns of the row, 
// so in this case we get the first column data.
// Which itself contains a DOM element containing the row
// id to export. 
//
// you could here export the whole row as a JSON.stringify
// object.  
if(index === 0 ) {
innerElement = $(innerElement).filter(".row_id_dom_container_html_element").text();
// Save this content value to the array.
saveData.push(innerElement);
}
});
});
// In THIS instance the array values should be turned into 
// strings and used as GET parameters thus:
// These will be processed by the recieving page 
var dataString = saveData.join(':');
var dataOrder = orderOfData.join(':');
// Finally redirect to the desired destination point. 
// Alternatively an AJAX call can be made here.
window.location.href = '/customMap.php?data='+dataString+'&order='+dataOrder;
return true;
} // close action. 
]}, //close buttons.
}); // close datatables

}); // close document ready.