根据数组

Question

我有一些自定义报告，用户可以在其中生成表格并通过表格进行预览。用户可以按任意顺序（垂直排在最前面）拖动过滤器以更改列的顺序，也可以通过使用dragTables <拖动表标题来更改表列的顺序。 / p>

我已经有了适当的事件，可以在用户执行任何操作（移动过滤器或表标题）时捕获事件

我想做的是能够在用户更改顺序时订购“过滤器” divs和“表” columns

在进行更改后，我正在使用.each()来捕获订单

$(document).on('mouseup', '.filters', function() {(
    var filters = [];  
    $('.filters').each( function() {
        filters.push($(this).attr('data-id'));
    })

    // I put the filter orders in an array so I can then change the column order.
})

$(document).on('mouseup', '.thead .th', function() {(
    var columns = [];  
    $('.filters').each( function() {
        columns.push($(this).attr('data-id'));
    })

    // I put the columns orders in an array so I can then change the filter order.
})

卡住的地方是如何以它们选择的任何一种方式更改过滤器和列的顺序。我敢肯定，div或th以及相应的td会改变顺序的概念是相同的，只是我不怎么改变顺序。

我的一些尝试是先对.hide()或.filters / th使用td，然后按从创建的数组中的顺序依次显示新数据。事件。

我如何以正确的顺序显示数组中的过滤器div和表th / td？希望这有道理。

过滤器

过滤器如下

<div class="filters" data-id="column1"><input></div>
<div class="filters" data-id="column2"><input></div>
<div class="filters" data-id="column3"><input></div>
<div class="filters" data-id="column4"><input></div>

表格

该表是基本语法

<table>
    <thead>
        <tr>
            <th data-id="column1">Column1</th>
            <th data-id="column2">Column2</th>
            <th data-id="column3">Column3</th>
            <th data-id="column4">Column4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-id="column1"></td>
            <td data-id="column2"></td>
            <td data-id="column3"></td>
            <td data-id="column4"></td>
        </tr>
    </tbody>
</table>