Question

我正在使用jquery datatable插件在jquery UI对话框中显示一个表。下面是我打电话来绘制表格的函数。

function listPtCharges(filter){
var chgTable;
chgTable =
  $('#chargeTable').dataTable({
    "bJQueryUI": true,
    "bDestroy": true,    
    "sDom": 'tT',
    "bSort": false,
    "bAutoWidth": false,
    "sAjaxSource": "/ajax/ptchglist.php",
    "sAjaxDataProp": "Records",
    "fnServerData": function ( sSource, aoData, fnCallback ) {
      aoData.push( { "name": "acctno", "value": $("#curAcctno").val() } );
      aoData.push( { "name": "ins_id", "value": $("#ins_id").val() } );
      aoData.push( { "name": "filter", "value": filter } );
      $.ajax( {
        "dataType" : 'json',
        "type" : "POST",
        "url" : sSource,
        "data" : aoData,
        "success" : fnCallback
        } );
    } ,
    "aoColumns":
    [
     {"bVisible":false},
     {"sWidth": 55},
     {"sWidth": 30},
     {"sWidth": 40},
     {"sWidth": 125},
     {"sWidth": 50},
     {"sWidth": 50},
     {"sWidth": 20},                
     {"bVisible":false}  // allowed
    ],
    "oTableTools": {
      "sRowSelect": chgSelctionTyp,
      "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
      "aButtons": []
    }
  });
}

在调用open对话框后调用此函数。以下是打开对话框然后加载表的代码行。

var oTT = TableTools.fnGetInstance( 'chargeTable' );
      if(oTT)
        oTT.fnSelectNone();
      $( "#chargeList" ).dialog( "open" );
      listPtCharges();

在对话框中，我有另一个按钮，带有过滤器值的事件处理程序，并使用新过滤器调用相同的函数。新加载的表总是从服务器带来更多的行。

除了一个奇怪的问题，一切都很好。每当绘制具有更多行的新表时，只能选择与前一个表相等的行数。

我的意思是假设我加载了5行的表格，按下按钮为表格带来新的数据集。表加载了8行。但现在我只能选择前5行。休息都将导致与未识别位置相关的萤火虫出错。

这方面的任何帮助都非常值得注意。

修改以下是尝试访问所选行的代码。

    var oTT = TableTools.fnGetInstance( 'chargeTable' );
    var aData = oTT.fnGetSelectedData();

这也是jquery数据表的一部分，它在firebug中显示错误。

"fnIsSelected": function ( n )
{
var pos = this.s.dt.oInstance.fnGetPosition( n );
return (this.s.dt.aoData[pos]._DTTT_selected===true) ? true : false;
},

点击不可点击的行后，会显示以下错误。

TypeError：this.s.dt.aoData [pos]未定义

我猜aodata的长度在某种程度上仍然与之前加载的表相同。

Answer 1

你不应该破坏和重建你的表，你应该只有数据表重新获取数据。

我认为调用fnDraw足以触发刷新 - 但未测试过：

 $('#chargeTable').dataTable().fnDraw();

在您的fnServerData函数中，您可能需要更改加载filter参数的方式：

// keep this variable in some shared scope :
var filterPtr = {value: ''};

$('#chargeTable').dataTable({
    ....
    "fnServerData": function(...){
         ...
         aoData.push({ "name": "filter", "value": filterPtr.value });
         ...
     }
});

// if you need to update the filter :
filterPtr.value = 'newValue';
$('#chargeTable').dataTable().fnDraw();

Answer 2

我的意思是假设我装了5行表，按下按钮表的新数据集。表加载了8行。但现在我会能够只选择前5行。休息都会导致错误与不明身份相关的萤火虫。

所以问题是单击此按钮后可能会带回更多行。看来此button是filter，可能包含也可能不包含新行。

听起来你需要在修改后重新初始化datatable。我在初始化后将新行注入datatable时遇到了问题，这是我能够做的唯一修复它。

我知道这看起来有点矫枉过正，但这是过去对我有用的东西。在这种情况下，调用redraw或设置bDestroy标志对我来说不起作用。

在注入新行之前..

销毁表
注入行
重新初始化数据表

再一次，这可能适用于您，也可能不适合您，但这是我过去必须做的事情。

$('#filterButton').click(function()
{
  //revert table to it's original state
  $('#chargeTable').dataTable().fnDestroy();

  //do some stuff, inject rows and get new filter value
  var filter = 'new filter value';

  //re-initialize the datatable
  listPtCharges(filter);
});

function listPtCharges(filter){
var chgTable;
chgTable =
  $('#chargeTable').dataTable({
    "bJQueryUI": true,
    "bDestroy": true,    
    "sDom": 'tT',
    "bSort": false,
    "bAutoWidth": false,
    "sAjaxSource": "/ajax/ptchglist.php",
    "sAjaxDataProp": "Records",
    "fnServerData": function ( sSource, aoData, fnCallback ) {
      aoData.push( { "name": "acctno", "value": $("#curAcctno").val() } );
      aoData.push( { "name": "ins_id", "value": $("#ins_id").val() } );
      aoData.push( { "name": "filter", "value": filter } );
      $.ajax( {
        "dataType" : 'json',
        "type" : "POST",
        "url" : sSource,
        "data" : aoData,
        "success" : fnCallback
        } );
    } ,
    "aoColumns":
    [
     {"bVisible":false},
     {"sWidth": 55},
     {"sWidth": 30},
     {"sWidth": 40},
     {"sWidth": 125},
     {"sWidth": 50},
     {"sWidth": 50},
     {"sWidth": 20},                
     {"bVisible":false}  // allowed
    ],
    "oTableTools": {
      "sRowSelect": chgSelctionTyp,
      "sSwfPath": "/swf/copy_csv_xls_pdf.swf",
      "aButtons": []
    }
  });
}

Answer 3

经过测试和工作！

现场演示： http://jsfiddle.net/oscarj24/c9m3s/

我只是尝试通过创建datatable来复制该问题，然后使用click添加一些带有button事件的额外硬编码数据。

起初，一切都运行正常，但是当添加额外的行时，之前的行仍然可以选择，但新的那些是不可能的，浏览器console不会出现错误。

但是，我建议以下内容可以帮助您“解决”问题：

1 .- 在 datatable初始化后添加“选择行” 的事件处理程序因为行已经加载到DOM。

2 .- 而不是使用.click()，.on('click')或.live('click')来“选择行”事件处理程序，像这样使用.delegate()：

$('#parent').delegate('children', 'click', function() { /* do something */ });

这样您就可以选择已添加的新行。

要知道，.live()已被弃用，但某些旧插件（如datatables和其他插件）使用它，因此我将 jQuery 版本更改为 1.7.2 < / strong>即可。

另外，我使用的是fnAddData()而不是fnDraw()，但这没关系，它也导致了同样的问题，我找到了一个“解决方案”根据（这就是为什么我认为这是“经过测试和工作”）。

说实话，我不能详细解释为什么会出现这个问题（看起来像个bug）但是我得到了一个可能的“解决方案”并希望它能帮助你。

请阅读代码中的注释，检查（也许这可以为您提供另外的视角）还可以在需要时检查您的浏览器console。 p>

jquery数据表在重绘后无法选择行

3 个答案:

经过测试和工作！