Javascript 排序表格时，第一列中的按钮消失

我有一个datatable，显示从文本文件检索的模拟json数据。我删除了第一列，因为它包含id，在表中显示id并不理想。我只在第一列的每一行附加了一个购买按钮。但是，当我对表格进行排序时，按钮消失，原始的第一列数据也出现

脚本：

    $(document).ready(function() {

    $.getJSON('/apps/mchp/clientlibs/clientlib-site/components/parametrictable/data.txt', function(json) {


    var data = json.data;
    var $thead = $('#parametrictable').find('thead');
    var tr = $("<tr>");
    $thead.append(tr);
    var columns = [];
    var obj = Object.keys(data[0]);
    console.log(data[0])
    var button = '<div class="left-btn"><i class="download fas fa-file-download"></i></div><div class="right-btn"><div class="input-group"><div class="input-group-area"><input type="text" value="100"></div><div class="input-group-icon">BUY</div></div></div>';


    $.each(data[0], function(name, value) {
      var column = {
        "data": name,
        "title":name
      };
    $('tr').find('th:first-child',).remove();

      columns.push(column);

    });

    for (i=1; i<obj.length; i++) {
        $(".dropdown-content").append('<li><input type="checkbox" class="dropcheck" data-column="'+i+'"/>'+obj[i]+'</li>');
    }   

    var table= $('#tableId').DataTable({
      data: data,
      columns: columns,
        columnDefs: [ {
            orderable: true,
            className: 'select-checkbox',
            targets:   1
        } ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    });

    $('tr').find('th:first-child').remove();
    $('tr').find('td:first-child').remove();
    $('tr').find('td:first-child').append(button);


  $('tr').on('change', function(e){
    e.preventDefault();
    console.log('change!');
  });

  $('input[type=checkbox]').on( 'change', function (e) {
    e.preventDefault();
    var column = table.column( $(this).attr('data-column') );
    column.visible( ! column.visible() );
    } );

  $('.show-all').on( 'click', function (e) {
     e.preventDefault();
    var obj = Object.keys(data[0])
    for (i=1; i<obj.length; i++) {
        var col = table.columns([i]);
        if (col.visible().join(', ') == 'false') {
            col.visible(true);
             $(".dropcheck").prop("checked", false);
        }
    }
    } ); 

   });
  })

$（文档）.ready（函数（）{
$.getJSON（'/apps/mchp/clientlibs/clientlib site/components/parametrictable/data.txt'，函数（json）{
var data=json.data；
var$thead=$（'#parametrictable'）。查找（'thead'）；
var tr=$（“”）；
$thead.append（tr）；
var列=[]；
var obj=Object.keys（数据[0]）；
console.log（数据[0]）
var按钮=‘买入’；
$.each（数据[0]，函数（名称，值）{
变量列={
“数据”：名称，
“头衔”：姓名
};
$（'tr'）.find（'th:first child'，）.remove（）；
columns.push（column）；
});
对于（i=1；i首先，通过.remove（）隐藏datatable列不是一个好的做法，datatables有一个内置的代码，该代码由columnDefs引用：

其次，这不是在datatable列中追加data/html的正确方法，请使用datatable的rowCallback函数，请参见：

            columnDefs: [
                 {
                   "targets": [ 0 ],
                   "visible": false,
                   "searchable": false
                },
            ],
            rowCallback: function(row, data, index) {

                if($('td:eq(1)', row).find('.download').length == 0)
                {
                    $('td:eq(1)', row).append(button);
                }
            },

当使用datatable sort或search或任何datatable操作时，它总是刷新表，因此，除非再次执行，否则操作之前的任何初始化都将被忽略。
嘿，谢谢！但是，当我再次对表进行排序时，它一直将按钮附加到每行。如何阻止它添加多个按钮？哦，我是ee，只需在追加之前检查行中是否存在按钮：if（$（'td:eq（1）”，行）。查找（'.download'）。长度==0）{$（'td:eq（1）”，行）。追加（按钮）；}