DataTable的onClick事件

Question

这里后失去fnCreatedCell是小提琴，显示问题：http://jsfiddle.net/LkqTU/32602/

如果你去拨弄你会发现最后一列是一个链接。如果您点击第一列的复选框，则会丢失链接。我想保持链接。

我创造了像这样的数据表的链接...

{ 
    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); 
}); 

我注意到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) 
}] 

---

代码

我做你的类名首字母大写，并增加了便利insert()方法为你的模型对象的正确OOP封装。

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，以便有更新的数据再次战平。

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

您可以添加以下两行来验证：

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

渲染功能，为您的数据表列定义的配置也是正确的。