如何使用jQuery DataTables将列重新排序到另一个位置？
如何使用jQuery DataTables将列重新排序到另一个位置？
提问于 2020-07-27 16:29:53
我正在使用jQuery DataTables和应用单独的列搜索(选择输入)。因此，在表页脚上，每个列上都有一个select来筛选数据。
我实现了ColReorder扩展，它使您能够通过单击和拖动操作重新排序DataTable中的列。
它工作得很好，但是当我在我的示例中拖动一个列(比如'Office‘)并将它作为第一列删除时，我会选择一个选项，例如'London’，我会得到‘’。
原因是:在重新排序之前，搜索仍然使用初始列索引。因此，它基本上是在“名称”栏中搜索“London”，因为这是重新排序之前的第一列。
我找到了一些关于如何将列重新排序为这里的列过滤应用的线程，但无法使其工作。
我用了column.index( 'visible' ).search( val ? val : '', true, false ).draw();
也是
var column = this;
var columnIndex = column.index();
table.column( columnIndex+':visible' ).search( val ? val : '', true, false ).draw();但没有结果。有什么建议吗?我做错了什么？非常感谢!
$(document).ready(function() {
var table = $('#example').DataTable( {
"colReorder": { realtime: false },
initComplete: function () {
this.api().columns().every( function () {
//for each column I add bootstrap selectpicker to the footer
var column = this;
var select = $('<select class="form-control show-tick dropup" data-dropup-auto="false" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
//everytime the options change I join the selected options as my select is multiple and search those values in that column and draw my DataTable
var data = $(this).val() ;
if (data.length === 0) { data = [""]; }
var val = data.join('|');
console.log(val);
column.search( val ? val : '', true, false ).draw(); } );
//Here I get unique values of current column and append them as options inside my select
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' ) } );
//apply bootstrap selectpicker on my select
$("select").selectpicker({ dropupAuto: false });
} );
}
} );
} ); <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">
<link href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<table id="example" class="table table-bordered table-hover nowrap" 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>
<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>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-27 22:46:11
可以使用column-reorder事件跟踪对列排序的更改。
这需要一些逻辑，因为每一列重新排序只会按照与前一次顺序的区别来进行跟踪，在这里，我们需要跟踪它与原始列顺序的变化情况。
下面是一个事件函数来处理这个问题：
// This section tracks the location of each column as it is
// reordered. the colIndexes array holds the original column
// index values in the order in which they are now displayed:
var colCount = 6;
// start a with [0...n] array, where n is the number of columns:
var colIndexes = [...Array(colCount).keys()];
// see https://datatables.net/reference/event/column-reorder
table.on( 'column-reorder', function ( e, settings, details ) {
var curr = details.mapping;
var temp = new Array(colCount);
for ( var i = 0; i < curr.length ; i++ ) {
// This uses the change event to determine the impact on the
// original column ordering.
temp[curr[i]] = colIndexes[i];
}
colIndexes = temp;
console.log("idx : " + colIndexes);
} );现在，在您现有的initComplete函数中，我们可以使用它。首先，我需要从列循环中访问API：
var dtApi = this.api();然后，我在列循环中使用以下内容：
var currentColIdx = colIndexes[column.index()];
var dataColumn = dtApi.columns(currentColIdx);这可以确保我们得到正确的列数据，而不管列是如何重新排序的。
最后，在执行搜索时，我们使用以下列数据：
dataColumn.search( val ? val : '', true, false ).draw(); } );下面是测试的完整脚本。我将它与问题中的HTML数据一起使用：
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable( {
//colReorder: true,
"colReorder": { realtime: false },
initComplete: function () {
var dtApi = this.api();
this.api().columns().every( function () {
//for each column I add bootstrap selectpicker to the footer
var column = this;
var select = $('<select class="form-control show-tick dropup" data-dropup-auto="false" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
//everytime the options change I join the selected options as my select is multiple and search those values in that column and draw my DataTable
var data = $(this).val() ;
if (data.length === 0) { data = [""]; }
var val = data.join('|');
var currentColIdx = colIndexes[column.index()];
//console.log(val);
//console.log(column.data());
var colValues = dtApi.columns(currentColIdx).data()[0];
var dataColumn = dtApi.columns(currentColIdx);
console.log(dataColumn);
console.log(colValues);
dataColumn.search( val ? val : '', true, false ).draw(); } );
//Here I get unique values of current column and append them as options inside my select
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' ) } );
//apply bootstrap selectpicker on my select
$("select").selectpicker({ dropupAuto: false });
} );
}
} );
// This section tracks the location of each column as it is
// reordered. the colIndexes array holds the original column
// index values in the order in which they are now displayed:
var colCount = 6;
// start a with [0...n] array, where n is the number of columns:
var colIndexes = [...Array(colCount).keys()];
// see https://datatables.net/reference/event/column-reorder
table.on( 'column-reorder', function ( e, settings, details ) {
var curr = details.mapping;
var temp = new Array(colCount);
for ( var i = 0; i < curr.length ; i++ ) {
// This uses the change event to determine the impact on the
// original column ordering.
temp[curr[i]] = colIndexes[i];
}
colIndexes = temp;
console.log("idx : " + colIndexes);
} );
} );
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63119510
复制相关文章
相似问题
腾讯云开发者
