如何在jQuery中取消选择选定的固定列数据表

Question

我有一个可以在特定单元格上使用onclick event选择的表，也可以使用checkbox选择随机行或全部选择。然后，我也有fixed column header垂直列和第一水平列。

问题是当我选择一行并使用按钮删除插入的单元格的内容时，它将清空单元格，从数据库中删除数据并删除所选的类但不会删除fixedcolumn所选类和checkbox类。那么如何解决呢？

这是我的数据表代码：

var table1 = $('#table1').DataTable(
{                    
   pageLength : 500,      
   lengthChange: false,
   deferRender: true,
   scrollY:  800,
   scrollCollapse: true,
   scrollX: true,
   bSort: false,
   cache: true,
   autoWidth: false,                    
   columnDefs: [
      {
         targets: 0,                            
         checkboxes: 
         {
            selectRow: true
         }
      }
   ],
   select: {
      style: 'multi',
      selector: 'td:not(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(8), :nth-child(9), :nth-child(12), :nth-child(13), :nth-child(14), :nth-child(15), :nth-child(16), :nth-child(17), :nth-child(18), :nth-child(19), :nth-child(20), :nth-child(21), :nth-child(22), :nth-child(23), :nth-child(24))'
   },
   fixedColumns:   {
      leftColumns: 2
   }
});

这是我的jquery代码：

$('.btnN2').click(function(){
   var answer = confirm('Delete N2 : Are you sure you want to delete selected items?');
   if (answer)
   {
      console.log('yes');
      var rows = $(table1.rows({selected: true}).$('input[type="checkbox"]').map(function()
      {
         return $(this).prop("checked") ? $(this).closest('tr').attr('data-getstockcode') : null;
      }));

      var getstockcodes = [];

      $.each(rows, function(index, rowId) 
      {
         console.log(rowId) 
         getstockcodes.push(rowId);
      });

      $.ajax({
         url: 'del_n2',
         type: 'GET',
         data: {"getstockcodes": JSON.stringify(getstockcodes)},
         dataType: 'JSON',
         success:function(data){                                 
            console.log(data);
            $(table1.rows({selected: true}).$('input[type="checkbox"]').map(function()
            {
                if($(this).prop("checked"))
                {
                   $(this).parents("tr:eq(0)").find(".note2").val('');
                   $(this).prop("checked", false);
                   table1.$('tr.selected').removeClass('selected'); 
                   table1.fixedColumns().update();
                   console.log('reset');
                }  
            }));
         }
      });
    }
    else
    {
       console.log('cancel');
    }
 }); 

在此之前，我单击删除按钮：

在这里，单击删除按钮后：

以下是Gyrocode.com解决方案：

Answer 1

原因

FixedColumns扩展创建一个单独的表，以创建固定列的效果。 $() DataTables API方法无法访问该表。

解决方案

在操作完主表以更新FixedColumns中显示的数据后，请使用fixedColumns().update() API方法。

table1.$('tr.selected').removeClass('selected');
table1.fixedColumns().update();

演示

有关代码和演示，请参见this example。