Datatables如何将用户当前的datatable视图数据（包括排序）导出到另一个页面
Datatables how to export a user's current datatable view data (including ordering) to another page
Note: This question uses Datatables 1.11.50
我有一个非常大的数据tables table，它是由最终浏览器用户自定义订购的。我需要实现一个概念，使他们可以在浏览器页面上对他们的数据 table 数据进行排序，例如按年龄降序
排序工资流图
$(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>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,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>,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>3,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>2,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>2,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>7,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>7,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>5,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>3,600</td>
</tr>
</tbody>
</table>
我需要做的就是拿上面的例子来命令：
- 显示的行数（10/25/50 等）
- 数据顺序；源数据
id 按特定顺序排列的点
- 忽略数据上未向用户显示的任何数据table
并以某种方式将此数据传递到另一个页面以供使用；接收页面是一张 Leaflet 地图，它将为 selected;
行的每个 id 值加载 lat/long 个位置
所以；例如上面的例子——让 sat view = 10 并按 age 降序排列，从 Ashton Cox （最旧的）下降到 Cedric Kelly 按此顺序 和然后按顺序获取这些 id（目前在数据 table 中的隐藏字段中）并在 leafletJS 地图上处理它们，然后在地图位置输出这些并且仅输出这些。
绝对清楚 - 数据table 本身非常大，有 50 多个字段和数千行。所有这些都来自数据库数据，但用户需要 select 某些行；即使用搜索框 select 某些类型的行，然后使用箭头对这些行进行相应排序。 然后这个最终结果可以以某种方式传递到另一个页面，该页面将使用这些数据点加载和填充传单 JS 地图。
我看过 "Select" plugin for Datatables 之类的东西，但看不到获取和导出 selected 数据的方法。
我完全没有想法，我在互联网上找不到任何参考点来开始探索这个问题；
如何将当前视图“导出”为 JSON 编码或任何格式，以便有人可以按 Datatables 按钮并完成上述请求？
非常感谢任何关于此的建议。
干杯
Note: this solution uses Datatables 1.11.50
最简洁的工作解决方案是添加一个按钮（使用 Datatables Buttons 插件 Here），自动获取所需数据并将其提交到硬编码目的地。
从数据表收集的数据有两个方面：
- 导出原始数据
- 导出数据的顺序。
导出数据的第一部分可以通过使用 Datatables Select 扩展来实现（Here) and native datatable API functionality can catch the current ordering 使用 table.order()。
第二部分是必需的，因为默认数据表行可以按列值排序 ascending 或 descending。
这提供了两个 objects/arrays（数组是 Javascript 中的对象类型），通过一些处理工作可以将其作为变量导出为 URL 上的 GET 值或 POST 值在 AJAX 请求中。
下面是选择整个当前页面视图（并且仅选择整个当前页面视图）的代码，然后从该数据中保存 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.
Note: This question uses Datatables 1.11.50
我有一个非常大的数据tables table，它是由最终浏览器用户自定义订购的。我需要实现一个概念，使他们可以在浏览器页面上对他们的数据 table 数据进行排序，例如按年龄降序
排序工资流图$(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>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,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>,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>3,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>2,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>2,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>7,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>7,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>5,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>3,600</td>
</tr>
</tbody>
</table>
我需要做的就是拿上面的例子来命令：
- 显示的行数（10/25/50 等）
- 数据顺序；源数据
id按特定顺序排列的点 - 忽略数据上未向用户显示的任何数据table
并以某种方式将此数据传递到另一个页面以供使用；接收页面是一张 Leaflet 地图，它将为 selected;
行的每个 id 值加载 lat/long 个位置所以；例如上面的例子——让 sat view = 10 并按 age 降序排列，从 Ashton Cox （最旧的）下降到 Cedric Kelly 按此顺序 和然后按顺序获取这些 id（目前在数据 table 中的隐藏字段中）并在 leafletJS 地图上处理它们，然后在地图位置输出这些并且仅输出这些。
绝对清楚 - 数据table 本身非常大，有 50 多个字段和数千行。所有这些都来自数据库数据，但用户需要 select 某些行；即使用搜索框 select 某些类型的行，然后使用箭头对这些行进行相应排序。 然后这个最终结果可以以某种方式传递到另一个页面，该页面将使用这些数据点加载和填充传单 JS 地图。
我看过 "Select" plugin for Datatables 之类的东西，但看不到获取和导出 selected 数据的方法。
我完全没有想法，我在互联网上找不到任何参考点来开始探索这个问题；
如何将当前视图“导出”为 JSON 编码或任何格式，以便有人可以按 Datatables 按钮并完成上述请求？
非常感谢任何关于此的建议。
干杯
Note: this solution uses Datatables 1.11.50
最简洁的工作解决方案是添加一个按钮（使用 Datatables Buttons 插件 Here），自动获取所需数据并将其提交到硬编码目的地。
从数据表收集的数据有两个方面：
- 导出原始数据
- 导出数据的顺序。
导出数据的第一部分可以通过使用 Datatables Select 扩展来实现（Here) and native datatable API functionality can catch the current ordering 使用 table.order()。
第二部分是必需的，因为默认数据表行可以按列值排序 ascending 或 descending。
这提供了两个 objects/arrays（数组是 Javascript 中的对象类型），通过一些处理工作可以将其作为变量导出为 URL 上的 GET 值或 POST 值在 AJAX 请求中。
下面是选择整个当前页面视图（并且仅选择整个当前页面视图）的代码，然后从该数据中保存 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.