这里是小提琴http://jsfiddle.net/LkqTU/32440/
我有一个jquery数据表,每行都有一个复选框。我希望如果选中该行上的复选框,那么在使用搜索框时,所选行将不会被隐藏。因此,例如,如果选择John并且搜索框为空,然后我在搜索框Fred中键入,则John在数据表中仍然可见,因为他已被选中。所以搜索框过滤器不适用于选定的行。
这是javascript。
function employee(id, firstName, lastName, dept, active) {
var self = this;
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
this.dept = dept;
this.active = active;
}
function model() {
var self = this;
this.employees = [];
}
var mymodel = new model();
$(document).ready(function() {
mymodel.employees.push(new employee('1', 'Clara', 'Dellinger', 'IT', false));
mymodel.employees.push(new employee('2', 'John', 'Smith', 'HR', false));
mymodel.employees.push(new employee('3', 'Fred', 'Jones', 'Finance', false));
mymodel.employees.push(new employee('4', 'Mary', 'Jans', 'Finance', false));
mymodel.employees.push(new employee('5', 'Bob', 'Jones', 'IT', false));
mymodel.employees.push(new employee('6', 'Fred', 'Thebes', 'HR', false));
mymodel.employees.push(new employee('7', 'Sally', 'Jane', 'HR', false));
mymodel.employees.push(new employee('8', 'Patrick', 'Roberts', 'HR', false));
mymodel.employees.push(new employee('9', 'Lisa', 'Myers', 'Lab', false));
mymodel.employees.push(new employee('10', 'Roscoe', 'Coletrain', 'Security', false));
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'
}],
rowCallback: function(row, data) {
// Set the checked state of the checkbox in the table
$('input.editor-active', row).prop('checked', data.active);
}
});
$('#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();
});
});
这是html
<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>