はDataTableをここでonClickイベント

Question

後fnCreatedCellを失う問題を示しフィドルです：http://jsfiddle.net/LkqTU/32602/

あなたはフィドルに行く場合は、最後の列がリンクになって気づくでしょう。最初の列のチェックボックスをクリックすると、リンクが失われます。私はリンクを維持したいと思います。私はそうのようなDataTableのリンクを作成してい

...私は私のリンク（と思う）負けていますどこ

{ 
    data: 'dept', 
    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 
     $(nTd).html("<a href='Freight_ITN.aspx?scn=" + oData.dept + "' target='_blank'>" + "ITN ENTRY" + "</a>"); 
} 

チェックボックスのonClickイベントは次のとおりです。

$('#mytable tbody').on('click', 'input[type="checkbox"]', function (e) { 
    var active = $(this).prop('checked'); 
    var $row = $(this).closest('tr'); 
    console.log($row); 
    var record = oTable.row($row).data(); 
    record.active = active; 
    //console.log(record); 
    oTable.row($row).data(record).draw(false); 
}); 

IをDataTableにfnDrawCallbackがあることに気付きましたが、非難されているようですが、私のリンクを元に戻す方法は不明です。

Answer 1

DataTableの列定義構成にレンダリング機能を追加する必要があります。 http://jsfiddle.net/34ufp3ps/1/

columnDefs: [{ 
    render: function(value, type, record, cellIndex) { 
    if (record.active) { 
     return value; // If selected, show the value instead of a link. 
    } else { 
     return '<a href="Freight_ITN.aspx?scn=' + value + '" target="_blank">' + 'ITN ENTRY</a>'; 
    } 
    }, 
    targets: 4 // Column #4 (Dept) 
}] 

---

コード

私はあなたのクラス名を大文字作られ、あなたのモデルオブジェクトの適切なOOPのカプセル化のための利便insert()方法を追加しました：

は、次の例を参照してください。

function Employee(id, firstName, lastName, dept, active, displayAsLink) { 
 
    var self = this; 
 
    this.id = id; 
 
    this.firstName = firstName; 
 
    this.lastName = lastName; 
 
    this.dept = dept; 
 
    this.active = active; 
 
    this.displayAsLink = displayAsLink; 
 
} 
 

 
function EmployeeModel() { 
 
    var self = this; 
 
    this.employees = []; 
 
} 
 
EmployeeModel.prototype.insert = function(employee) { 
 
    this.employees.push(employee); 
 
} 
 

 
var myModel = new EmployeeModel(); 
 

 
$(document).ready(function() { 
 
    myModel.insert(new Employee('1', 'Clara', 'Dellinger', 'IT', false, true)); 
 
    myModel.insert(new Employee('2', 'John', 'Smith', 'HR', false, true)); 
 
    myModel.insert(new Employee('3', 'Fred', 'Jones', 'Finance', false, false)); 
 
    myModel.insert(new Employee('4', 'Mary', 'Jans', 'Finance', false, false)); 
 
    myModel.insert(new Employee('5', 'Bob', 'Jones', 'IT', false, false)); 
 
    myModel.insert(new Employee('6', 'Fred', 'Thebes', 'HR', false, true)); 
 
    myModel.insert(new Employee('7', 'Sally', 'Jane', 'HR', false, true)); 
 
    myModel.insert(new Employee('8', 'Patrick', 'Roberts', 'HR', false, true)); 
 
    myModel.insert(new Employee('9', 'Lisa', 'Myers', 'Lab', false, true)); 
 
    myModel.insert(new Employee('10', 'Roscoe', 'Coletrain', 'Security', false, true)); 
 

 
    var table = $('#mytable').DataTable({ 
 
    data: myModel.employees, 
 
    columns: [{ 
 
     data: 'active', 
 
     render: function(data, type, row) { 
 
     if (type === 'display') { 
 
      return '<input type="checkbox" class="editor-active">'; 
 
     } 
 
     return data; 
 
     }, 
 
     className: "dt-body-center" 
 
    }, { 
 
     data: 'id' 
 
    }, { 
 
     data: 'firstName' 
 
    }, { 
 
     data: 'lastName' 
 
    }, { 
 
     data: 'dept' 
 
    }], 
 
    columnDefs: [{ 
 
     render: function(value, type, record, cellIndex) { 
 
     if (record.active) { 
 
      return value; 
 
     } else { 
 
      return '<a href="Freight_ITN.aspx?scn=' + value + '" target="_blank">' + 'ITN ENTRY</a>'; 
 
     } 
 
     }, 
 
     targets: 4 // Column #4 (Dept) 
 
    }], 
 
    rowCallback: function(row, data) { 
 
     // Set the checked state of the checkbox in the table 
 
     $('input.editor-active', row).prop('checked', data.active); 
 
    }, 
 
    aaSorting: [ 
 
     [3, 'asc'] 
 
    ], 
 
    }); 
 

 
    $('#mytable tbody').on('click', 'input[type="checkbox"]', function(e) { 
 
    var active = $(this).prop('checked'); 
 
    var $row = $(this).closest('tr'); 
 
    var employee = table.row($row).data(); 
 
    employee.active = active; 
 
    //console.log(employee); 
 
    table.row($row).data(employee).draw(false); 
 
    }); 
 

 
    $.fn.dataTable.ext.search.push(
 
    function(oSettings, aData, iDataIndex) { 
 
     var isSelected = aData[0]; 
 
     var keywords = $("#mysearch").val().toLowerCase().split(' '); 
 
     var matches = 0; 
 
     for (var k = 0; k < keywords.length; k++) { 
 
     var keyword = keywords[k]; 
 
     for (var col = 0; col < aData.length; col++) { 
 
      if (aData[col].toLowerCase().indexOf(keyword) > -1) { 
 
      matches++; 
 
      break; 
 
      } 
 
     } 
 
     } 
 
     return (matches == keywords.length) || (isSelected === 'true') 
 
    } 
 
); 
 

 
    $('#mysearch').keyup(function() { 
 
    table.draw(); 
 
    }); 
 
});

.dataTables_filter { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css" rel="stylesheet" /> 
 

 
<div> 
 
    <input type="text" id="mysearch" name="mysearch" placeholder="search" /> 
 
</div> 
 

 
<table class="table" id="mytable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Select</th> 
 
     <th>Id</th> 
 
     <th>First</th> 
 
     <th>Last</th> 
 
     <th>Dept</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>

Answer 2

私は次のようにコメントし

//table.row($row).data(employee).draw(true); 

更新されたデータを持っているために、再び描画するnecesssaryではありません。あなたが確認するために、次の2行を追加することができます

employee.active = active;//this line updates the data. 

：あなたのDataTableの列定義の構成にレンダリング機能

e = table.row($row).data(); 
console.log(e); 

も正しいです。