如何将具有数据搜索属性的行移动到另一个表?

时间:2018-01-15 17:37:14

标签: javascript jquery datatables

我正在尝试将DataTable中的选定行移动到另一个DataTable。我有这个几乎工作但问题是在他们有数据搜索属性的单元格。该数据只会作为[object Object]放入我的另一个表中。我试过在文档中找到一个如何处理这个案例的例子,但我没有运气。这就是我的......

https://jsfiddle.net/dmcgrew/x85o0mgL/5/

HTML ..

<table id="selected_items">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Description</th>
                        <th>Crest Allowed</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>

                <tbody>

                </tbody>
            </table>



<table id="select_items">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Description</th>
                        <th>Crest Allowed</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>

                <tbody>
                    <tr id="1">
                        <td data-search="test">1</td>
                        <td>Testing Bowl</td>
                        <td data-search="nocrest">NO</td>
                        <td><button class="button select">Select</button></td>
                    </tr>
                    <tr>
                        <td data-search="test">32</td>
                        <td>Cup Test</td>
                        <td data-search="nocrest">NO</td>
                        <td><button class="button select">Select</button></td>
                    </tr>
                    <tr>
                        <td data-search="pristine">3335</td>
                        <td>Bowl Test</td>
                        <td data-search="nocrest">NO</td>
                        <td><button class="button select">Select</button></td>
                    </tr>
                    <tr>
                        <td data-search="pristine">120</td>
                        <td>Plate Test</td>
                        <td data-search="yescrest">YES</td>
                        <td><button class="button select">Select</button></td>
                    </tr>
                    <tr>
                        <td data-search="test">1000</td>
                        <td>Mug Test</td>
                        <td data-search="yescrest">YES</td>
                        <td><button class="button select">Select</button></td>
                    </tr>
                    <tr>
                        <td data-search="pristine">65</td>
                        <td>Ramekin Test</td>
                        <td data-search="yescrest">YES</td>
                        <td><button class="button select">Select</button></td>
                    </tr>
                </tbody>
            </table>

... JS

var select_items = $('.select_items').dataTable();
var selected_items = $('#selected_items').DataTable();

$('.select_items').on("click", "button.select", function(){
    var selectedRow = select_items.api().row( $(this).parents("tr") ).data();   
    selected_items.row.add(selectedRow).draw(true);
});

1 个答案:

答案 0 :(得分:0)

您的基本问题是数据 当td具有数据属性(数据搜索)时,它包含在数据对象中,因此您的数据数组如下所示: [{display:“1”,@ data-search:“test”},“Testing Bowl”,{display:“NO”,@ data-search:“nocrest”},“Select”]所以第一和第三项数组实际上是对象,因此[object,object]

所以最快(在我看来不是最好的)是在添加数据之前更改数据。

select_items.on("click", "button.select", function(){
    var selectedRow = select_items.api().row( $(this).parents("tr") ).data();
    console.log(selectedRow);
        selectedRow[0] = selectedRow[0].display;
      selectedRow[2] = selectedRow[2].display;
    selected_items.row.add(selectedRow).draw(true);
});

https://jsfiddle.net/x85o0mgL/12/