Geek asks and answers

Jquery datatables cannot select rows after redrawing

I am using a jQuery datatable plugin to display a table in a jquery user interface dialog. Below is the function that I call to draw the table.

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": []
    }
  });
}

This function is called immediately after the call to open a dialog. Here are the lines of code that open the dialog box and then load the table.

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

In the dialog box, I have another button with an event handler with a filter value and calling the same function with a new filter. A newly loaded table always displays more rows on the server.

Everything is fine, except for a strange problem. Whenever a new table is created with a large number of rows, only the number of rows equal to the previous table can be selected.

, 5 , , . 8 . 5 . firebug, .

.

EDIT: , .

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

jquery datatables, 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.tt.aoData [pos] - undefined

, aodata - , , .

+5
3

, .

, 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();
+4

, 5 , , . 8 . 5 . firebug, .

, , . , button - filter, .

, datatable . datatable , , , , .

, , , . redraw bDestroy .

.

  • datatable

, , , .

$('#filterButton').click(function()
{
  //revert table to it 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": []
    }
  });
}
+2

!

Live Demo: 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.

, fnAddData() fnDraw(), , , , "" ( , " " ).

, , (, ), "" , .

Read the comments that are in the code, check it (maybe this can give you another perspective for what you need to do), and check your browser consoleif necessary.

+1
source

More articles:


All Articles