5

我正在使用 jquery 数据表插件在 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": []
    }
  });
}

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

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;
},

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

类型错误：this.s.dt.aoData[pos] 未定义

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

4

3 回答 3

4

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

我认为调用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();
于 2014-01-30T15:51:14.383 回答
2

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

所以问题是点击这个按钮后它可能会带回更多的行。看起来这button是一个filter，它可能包含也可能不包含新行。

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

我知道这似乎有点矫枉过正，但这是过去对我有用的方法。在这种情况下，调用redraw或设置bDestroy标志对我不起作用。

在注入新行之前..

  1. 销毁表
  2. 注入行
  3. 重新初始化数据表

再一次，这可能对你有用，也可能对你不起作用，但这是我过去必须做的。

$('#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": []
    }
  });
}
于 2014-01-27T23:46:24.603 回答
1

测试和工作！

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

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

起初，一切正常，但是当添加额外的行时，以前的行仍然可以选择，但新的行是不可能的，并且 browser 没有出现错误console。

但是，我会建议以下可能帮助您“解决”问题的方法：

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

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

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

这样，您将能够选择已添加的新行。

只是要知道，.live()已弃用，但它被一些旧插件（如datatables和其他插件）使用，所以我将jQuery版本更改为1.7.2。

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

老实说，我无法详细解释为什么会发生此问题（这似乎是一个错误），但我得到了一个可能的“解决方案”，希望它对您有所帮助。

请阅读代码中的注释，检查它（也许这可以让您从另一个角度了解您需要做什么）并在需要时检查您的浏览器console。

于 2014-01-27T23:17:15.027 回答