[英]How to filter Table row with multiple condition .ie on checkbox selection show respected row. each checkbox represent Column and row value
[英]How to show Checkbox against each Row based on Column value - JQuery DataTable
我使用下面的代码在 Jquery 数据表中显示复选框。
var table = $('#example').DataTable({
'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
'select': {
'style': 'multi',
'selector': 'td:first-child'
},
'order': [[1, 'asc']]
});
https://jsfiddle.net/09yLegu3/
我有一个新要求,我希望仅基于列值显示复选框。我有名为 Office 的列。仅当 Office 值为“东京”时才应显示复选框。我怎样才能实现这个 jquery 数据表。 任何人都可以帮助提供示例代码。
您可以通过在初始化DataTable
时调用drawCallback()
function 来实现这一点,并在其中检查每一行是否办公室的列包含“东京”; 如果是这样,请从第一列中删除复选框:
$(document).ready(function() {
var table = $('#example').DataTable({
'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
'columnDefs': [{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}],
'select': {
'style': 'multi',
'selector': 'td:first-child'
},
'order': [
[1, 'asc']
],
"drawCallback": function() {
$("#example tr").each(function() {
if ($(this).find("td:eq(3)").text() != "Tokyo") {
$($(this)).find("td:eq(0)").find("input[type='checkbox']").remove();
}
});
}
});
});
工作小提琴。
我已经执行了这段代码,它工作正常,正如你所期望的那样,在你的代码中你只需要根据下面提到的“office”参数的特定行来设置条件,这将帮助你在绑定时实现数据。
Here is the fiddle link : [https://jsfiddle.net/nzL39dye/3/][1]
Or
$(document).ready(function() {
var table = $('#example').DataTable({
ajax: 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
columnDefs : [
{
targets : [0],
render : function (data, type, row) {
if (row[3] == "Tokyo")
{
return '<input type="checkbox" selectRow="true" class="dt-checkboxes">'
}
else {
return '';
}
}
}
],
select: {
style: 'multi',
selector: 'td:first-child'
},
order: [[1, 'asc']]
});
});
}
该解决方案简单易懂。
在列渲染期间,您可以阻止复选框渲染。
您的columnDefs变为(为了删除London的复选框):
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true
},
'render': function(data, type, row, meta){
data = '<input type="checkbox" class="dt-checkboxes">'
if(row[3] === 'London'){
data = '';
}
return data;
},
'createdCell': function (td, cellData, rowData, row, col){
if(rowData[3] === 'London'){
this.api().cell(td).checkboxes.disable();
}
}
}
],
var table = $('#example').DataTable({ 'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json', 'columnDefs': [ { 'targets': 0, 'checkboxes': { 'selectRow': true, 'selectAllCallback': function(nodes, selected, indeterminate) { if (indeterminate == false) { $(nodes).closest('tr').toggleClass('selected', selected ); } }, 'selectCallback': function(nodes, selected) { if (selected == false) { $(nodes).closest('table').find('thead tr').removeClass('selected'); } } }, 'render': function(data, type, row, meta){ data = '<input type="checkbox" class="dt-checkboxes">' if(row[3] === 'London'){ data = ''; } return data; }, 'createdCell': function (td, cellData, rowData, row, col) { if(rowData[3] === 'London'){ this.api().cell(td).checkboxes.disable(); } else { td.classList.add('dt-checkboxes-cell-visible'); } } } ], 'select': { 'style': 'multi', 'selector': 'td:first-child' }, 'order': [[1, 'asc']] });
table.dataTable thead th.dt-checkboxes-select-all input[type="checkbox"], table.dataTable tbody td.dt-checkboxes-cell-visible input[type="checkbox"] { visibility: hidden; } table.dataTable td.dt-checkboxes-cell-visible, table.dataTable th.dt-checkboxes-select-all { position: relative; } table.dataTable td.dt-checkboxes-cell-visible:before, table.dataTable td.dt-checkboxes-cell-visible:after, table.dataTable th.dt-checkboxes-select-all:before, table.dataTable th.dt-checkboxes-select-all:after { display: block; position: absolute; top: 1.2em; left: 50%; width: 12px; height: 12px; box-sizing: border-box; } table.dataTable td.dt-checkboxes-cell-visible:before, table.dataTable th.dt-checkboxes-select-all:before { content: ' '; margin-top: -6px; margin-left: -6px; border: 1px solid black; border-radius: 3px; } table.dataTable tr.selected td.dt-checkboxes-cell-visible:after, table.dataTable tr.selected th.dt-checkboxes-select-all:after { content: '\2714'; margin-top: -11px; margin-left: -4px; text-align: center; text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css"> <link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/css/dataTables.checkboxes.css"> <script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script> <script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"></script> <h3><a href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes</a>: <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/select/">Select extension</a></h3> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Extn</th> <th>Start date</th> <th>Salary Value</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> <hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/select/">See full article on Gyrocode.com</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.